如何用Cypress导出保存页面body下所有元素及内容并对比网页升级前后差异？

需要验证网页经Jenkins升级前后，body内所有div的内容完全一致。当前尝试的代码仅存储了div元素本身，未包含内容，导致对比无效：

var oldBody = document.createElement( 'html' );
oldBody.innerHTML = request.body 

var newBody = document.createElement( 'html' );
newBody.innerHTML = request.body 

cy.expect(oldBody).to.contain(newBody)

要正确对比内容，需提取div的文本内容或完整HTML结构并存储，而非直接对比DOM元素对象。以下是可行的Cypress实现步骤：

• 升级前捕获内容快照：
  打开目标页面后，提取所有div的文本或innerHTML，存入Cypress环境变量：

  cy.visit('/your-target-page')
  cy.get('body div').then($divs => {
    // 提取所有div的文本内容，也可改用$div.html()获取完整HTML结构
    const oldDivContents = Array.from($divs).map(div => div.textContent.trim())
    Cypress.env('oldDivContents', oldDivContents)
  })
  

• 触发Jenkins升级任务：
  通过Cypress调用Jenkins接口触发升级（或等待外部任务完成，需根据实际情况处理）：

  cy.request({
    method: 'POST',
    url: 'your-jenkins-job-url/build',
    auth: { username: 'your-user', password: 'your-token' }
  })
  // 等待任务完成，可自行封装轮询Jenkins任务状态的逻辑
  cy.waitForJenkinsJobCompletion('your-jenkins-job-url')
  

• 升级后重新验证内容：
  重新打开页面，提取div内容并与快照对比：

  cy.visit('/your-target-page')
  cy.get('body div').then($divs => {
    const newDivContents = Array.from($divs).map(div => div.textContent.trim())
    expect(newDivContents).to.deep.equal(Cypress.env('oldDivContents'))
  })
  

原参考内容的核心逻辑：

• 直接对比DOM元素对象会因元素实例不同导致验证失败，必须提取**可序列化的内容（文本/HTML代码）**进行对比
• 可借助Cypress环境变量或自定义命令存储快照数据，实现跨测试步骤的数据复用
• 若需验证完整页面结构，可直接提取document.body.innerHTML存储后做全量对比

内容的提问来源于stack exchange，提问作者David Pongo