Cypress测试失败时如何自动滚动到页面底部或截取全页截图

1. 修复全页截图失效问题 #

你之前配置未生效的核心原因是全局截图配置需要放在Cypress的全局支持入口文件中才能生效：

• Cypress 10及以上版本：配置写在 cypress/support/e2e.js
• Cypress 10以下旧版本：配置写在 cypress/support/index.js

不要将该配置放在单个测试用例文件中，配置完成后，所有测试失败触发的默认截图都会自动使用fullPage模式捕获全页内容。

2. 实现测试失败时自动滚动到底部（适配视频录制） #

该需求可以通过监听Cypress全局测试失败钩子实现，滚动操作会在测试判定失败后、视频录制结束前执行，滚动后的状态会被完整录入失败视频，操作步骤如下：
在上述的全局支持入口文件中添加以下代码：

// 监听所有测试用例运行结束事件
Cypress.on('test:after:run', (test) => {
  // 仅测试失败时执行滚动逻辑
  if (test.state === 'failed') {
    // 滚动页面到最底部
    cy.window().then(win => {
      win.scrollTo(0, win.document.body.scrollHeight)
    })
    // 如果页面的滚动区域不是全局body，是指定容器，替换为以下逻辑即可：
    // cy.get('你的滚动容器选择器').scrollTo('bottom', { ensureScrollable: false })
  }
})

如果页面存在异步加载的底部内容，可以在滚动前添加短等待逻辑，比如cy.wait(300)，确保内容渲染完成后再滚动。

3. 效果验证 #

你可以用以下测试用例快速验证配置是否生效：

it('验证失败滚动和全页截图效果', () => {
  // 访问一个长度超过视口的页面
  cy.visit('你的长页面地址')
  // 故意写一个触发失败的断言
  cy.get('#不存在的元素').should('be.visible')
})

运行后查看生成的失败视频和截图，即可确认功能是否正常。

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