Cypress E2E测试--watch模式正常运行但--headless模式失败求助

问题根因 #

你遇到的差异是Cypress 6.x版本默认无头模式使用Electron内核，和有头模式下的Chromium内核渲染逻辑、资源加载速度存在差异，加上测试用例中固定等待逻辑不稳定、首次测试浏览器冷启动开销大，最终导致第一个测试超时失败。

解决方案 #

1. 统一测试运行内核 #

指定和本地watch模式一致的Chrome浏览器运行无头测试，修改CI运行命令为：
yarn nx run checkout-e2e:e2e --headless --browser chrome

2. 优化测试等待逻辑 #

替换无断言的元素查询和固定时长等待，确保组件完全渲染后再执行操作，优化后的测试代码如下：

const classname = 'buybox--buy-box-example-one-size'
const url = `?path=/story/${classname}`

describe('BuyBox Example visual regression', () => {
  // 预热浏览器，避免首次加载超时
  before(() => {
    cy.visit('/')
  })

  it('Matches the snapshot', () => {
    cy.visit(url)
    // 确认Storybook页面加载完成
    cy.get('#root').should('be.visible')
    cy.viewport(1000, 1500)
    // 确认目标组件可见
    cy.get(`#${classname}`).should('be.visible')
    cy.wait(1000)
    // 给body加焦点后再触发快捷键
    cy.get('body').focus().type('S').type('A')
    cy.wait(2000)
    cy.get('body').matchImageSnapshot('buyboxOneSizeDesktopExample')

    cy.viewport(375, 667)
    cy.get(`#${classname}`).should('be.visible')
    cy.wait(1000)
    cy.get('body').focus().type('S').type('A')
    cy.wait(4000)
    cy.get('body').matchImageSnapshot('buyboxOneSizeExample')
  })
})

3. 调整全局超时配置 #

在cypress.json中添加超时配置，适配CI环境的网络/性能波动：

{
  "defaultCommandTimeout": 10000,
  "pageLoadTimeout": 60000,
  "requestTimeout": 10000
}

4. 关闭Windows环境硬件加速 #

如果在Windows系统运行无头测试，在cypress/plugins/index.js中添加浏览器启动参数，避免渲染异常：

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.family === 'chromium') {
      launchOptions.args.push('--disable-gpu')
      launchOptions.args.push('--disable-software-rasterizer')
    }
    return launchOptions
  })
}

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