Cypress无头模式测试随机失败但界面运行正常，求排查原因

核心解决方向及实操方法 #

• 优化元素等待逻辑，摒弃硬延迟
  无头模式的页面渲染、资源加载速度和界面模式存在差异，依赖cy.wait(3000)这类固定延迟很容易导致元素未就绪就执行断言。改用基于元素状态的智能等待：

  // 等待工单标题元素可见，超时时间延长至10秒
  cy.get('div.workorder-title', { timeout: 10000 })
    .should('be.visible')
    .and('contain', '21-270073 / EM / -');
  

  也可以全局调整默认超时，在cypress.config.js中配置：

  const { defineConfig } = require('cypress');
  
  module.exports = defineConfig({
    e2e: {
      defaultCommandTimeout: 10000, // 全局命令超时
      pageLoadTimeout: 60000, // 页面加载超时
    },
  });
  

• 验证API创建工单的有效性
  即便通过API创建工单，VPN链路的微小波动可能导致请求未完全落地。在查找DOM元素前，先通过API确认工单已成功创建：

  // 假设工单ID是21-270073，先调用查询接口验证
  cy.request('GET', `/api/workorders/21-270073`)
    .its('status')
    .should('eq', 200);
  
  // 再执行页面元素断言
  cy.get('div.workorder-title').should('contain', '21-270073 / EM / -');
  

• 禁用无头浏览器缓存
  无头模式下浏览器的缓存机制可能导致页面状态不一致，启动时添加禁用缓存参数：

  npx cypress run --browser chrome --args --disable-cache
  

• 强化测试隔离性
  随机失败常源于测试间的状态污染，确保每个测试用例执行前重置环境：

  beforeEach(() => {
    // 清除存储状态
    cy.clearLocalStorage();
    cy.clearSessionStorage();
    // 调用测试环境重置API（如果有）
    cy.request('POST', `/api/test-environment/reset`);
  });
  

• 收集失败时的诊断信息
  开启截图和录像功能，方便定位随机失败的具体场景：

  // cypress.config.js中配置
  module.exports = defineConfig({
    e2e: {
      screenshotOnRunFailure: true, // 失败自动存截图
      video: true, // 录制测试视频
    },
  });
  

  也可以通过命令行指定记录测试结果：

  npx cypress run --record --key your-project-record-key
  

内容的提问来源于stack exchange，提问作者Barış Can Ateş