Cypress截图报TypeError，截图已保存但脚本执行失败求助

核心修复步骤 #

• 提前注册异常捕获逻辑，确保覆盖页面加载到截图的全流程
• 升级Cypress至12.17.0及以上版本（该版本已修复Windows环境下路径解析的replaceAll bug）
• 替换固定等待为基于元素加载的断言等待，提升测试稳定性

错误原因解析 #

1. replaceAll报错：属于Cypress内部路径处理缺陷，在Windows Server环境下解析文件路径时出现未定义值调用replaceAll的情况，该问题已在官方后续版本中修复
2. getBoundingClientRect报错：页面存在动态渲染元素，截图时元素未完全加载或已被DOM移除，导致获取元素位置时触发null引用错误

修改后的测试代码 #

describe("example to-do app", () => {
  it("Signature Testing", () => {
    // 提前注册全局异常捕获，避免截图后脚本中断
    cy.on("uncaught:exception", (err, runnable) => {
      console.log(err)
      return false
    })

    cy.viewport(1336, 720)
    cy.visit("https://www.iciciprulife.com/ulip-plans/unit-linked-insurance-plans/icici-pru-signature-ulip-calculator.html")
    
    // 等待页面核心元素加载完成后再截图，替代固定等待
    cy.get('body').should('be.visible')
    cy.screenshot()
  })
})

额外优化建议 #

• 避免使用cy.wait(10000)这类固定时长等待，优先用cy.get()结合.should()的断言等待，减少不必要的延迟同时提升可靠性
• 若升级版本后仍有问题，可在cypress.config.js中配置截图相关参数：

module.exports = defineConfig({
  e2e: {
    screenshotsFolder: './cypress/screenshots',
    scrollBehavior: 'center', // 确保元素在视口中居中，避免截图时元素位置异常
    screenshotOnRunFailure: true
  }
})

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