cypress open测试通过但cypress run --browser chrome运行失败咨询

两个运行模式的底层逻辑从一开始就不一样，同用例出现结果差异是非常典型的问题，尤其是历史正常的提交现在也跑失败，基本可以排除业务代码改动的影响，优先从以下几个方向排查：

• cypress open启动的是带完整交互界面的Chrome，运行速度慢，视口尺寸是你手动调整的窗口大小，Cypress会实时渲染命令日志，浏览器不会做后台节流
• cypress run哪怕指定了Chrome，默认启动的是无头Chrome，运行速度快很多，默认视口是固定的小尺寸，会启用Chrome无头模式专属的性能优化，后台运行时会对非核心渲染逻辑做节流

1. 无头模式视口不匹配导致组件未渲染 #

这是表格类元素找不到的最高频诱因：
大部分UI组件库的表格、列表都会做滚动懒加载、视口内渲染优化——只有元素进入视口范围才会实际挂载DOM。无头模式默认视口是1000*660，如果你平时cypress open时窗口拉得很大，表格行刚好在视口内会正常渲染，到了无头模式下小视口里表格行不在渲染区域，自然找不到[data-test=tableRow]。

验证方式：执行命令时加--headed参数跑一次：cypress run --browser chrome --headed，如果带界面跑就正常，直接在cypress配置里固定全局视口即可：

// cypress.config.js
module.exports = {
  e2e: {
    viewportWidth: 1440,
    viewportHeight: 900,
    // 其他配置
  }
}

2. 运行速度变快触发时序问题 #

cypress run的命令执行速度比open模式快30%以上，如果你本地Chrome最近自动更新过，无头模式的JS执行效率还会进一步提升，原来刚好卡着4000ms超时边缘能渲染出来的元素，现在超时前还没挂载完成。
历史提交能跑过不代表逻辑没问题，只是之前的运行速度刚好踩中了时序的临界点。

• 不要用固定时长的cy.wait(2000)这种硬等待，先等表格对应的接口请求返回，再查找元素，同时可以给get命令加更充裕的超时时间：

// 先拦截表格数据接口
cy.intercept('GET', '**/api/table/list').as('getTable')
// 触发页面加载操作
// 等待接口返回成功
cy.wait('@getTable').its('response.statusCode').should('eq', 200)
// 查找元素时加超时，确保组件完成渲染
cy.get('[data-test=tableRow]', { timeout: 10000 }).should('exist')

3. 无头模式环境限制导致渲染失败 #

如果是在Linux环境、或者本地资源占用较高的时候跑，无头Chrome默认的沙箱策略、/dev/shm共享内存限制可能导致页面渲染崩溃，组件根本没加载完成。

• 可以给Chrome加启动参数排除这类问题，在cypress配置里加上：

e2e: {
  setupNodeEvents(on, config) {
    on('before:browser:launch', (browser = {}, launchOptions) => {
      if (browser.family === 'chromium' && browser.name !== 'electron') {
        launchOptions.args.push('--no-sandbox')
        launchOptions.args.push('--disable-dev-shm-usage')
      }
      return launchOptions
    })
  }
}

快速排查优先级 #

1. 先加--headed参数跑一次，快速确认是不是无头模式专属问题
2. 固定全局视口尺寸，排除懒加载不触发的问题
3. 替换硬等待逻辑为接口等待+元素断言重试，排除时序问题
4. 加Chrome启动参数，排除沙箱、内存限制导致的渲染崩溃

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