Azure Pipelines中Cypress测试随机失败的调试方案咨询

一、扩展cy.visit确认超时及获取加载详情 #

要明确判断cy.visit是否超时并收集更多加载信息，可以通过.fail()回调捕获错误，同时添加预检查和状态验证：

beforeEach(function() {
  // 先发送HEAD请求确认服务器可达
  cy.request({method: 'HEAD', url: '/', timeout: 10000})
    .then(response => {
      cy.log(`服务器预检查状态码: ${response.status}`);
    })
    .catch(err => {
      cy.log(`服务器预检查失败: ${err.message}`);
      throw err;
    });

  // 扩展cy.visit，捕获加载失败细节
  cy.visit('/', { timeout: 240000 })
    .then(() => {
      cy.log('页面加载成功');
      // 验证页面完全加载
      cy.document().its('readyState').should('eq', 'complete');
      cy.url().then(currentUrl => cy.log(`当前页面URL: ${currentUrl}`));
    })
    .fail((error) => {
      cy.log(`页面加载失败原因: ${error.message}`);
      // 判断是否为超时错误
      if (error.message.includes('timed out')) {
        cy.log('★ 确认是加载超时导致失败');
        // 额外获取服务器响应信息
        cy.request({url: '/', failOnStatusCode: false, timeout: 30000})
          .then(resp => {
            cy.log(`服务器响应状态码: ${resp.status}`);
            cy.log(`响应内容长度: ${resp.body?.length || 0}`);
          });
      }
      // 抛出错误，保留原有失败流程
      throw error;
    });

  // 合并原有逻辑，避免重复操作
  cy.window().then((win) => {
    win.document.body.style.animation = 'none';
    win.document.body.style.transition = 'none';
    Object.defineProperty(win.navigator, "language", { value: "de" });
  });

  cy.mockGlobalServices();
  
  // 调整异常捕获，先收集所有错误信息
  cy.on('uncaught:exception', (err, runnable) => {
    cy.log(`捕获未处理异常: ${err.message}`);
    cy.log(`异常堆栈: ${err.stack}`);
    // 暂时注释严格断言，先排查偶发问题
    // expect(err.message).to.include('of undefined')
    return false;
  });
});

二、其他偶发问题调试建议 #

1. 临时启用视频和截图
   修改Cypress配置，打开失败时的视频录制和截图：

   video: true,
   screenshotOnRunFailure: true,
   

   偶发失败后可以直观查看页面状态，定位是否是渲染异常或资源加载问题。

2. 开启详细日志
   启动测试时添加环境变量，输出Cypress内部详细日志：

   DEBUG=cypress:* npx cypress run
   

   日志会包含网络请求明细、命令执行时序、内部状态变化，帮助定位偶发卡点。

3. 清理浏览器缓存
   每次visit前清空缓存，避免缓存导致的资源加载异常：

   cy.visit('/', {
     timeout: 240000,
     onBeforeLoad(win) {
       win.sessionStorage.clear();
       win.localStorage.clear();
     },
     headers: {
       'Cache-Control': 'no-store, no-cache, must-revalidate'
     }
   });
   

4. 合并重复的cy.visit
   原代码中两次调用cy.visit会导致页面重复加载，可能引发状态混乱，建议合并成一次调用，把所有前置配置放在同一个onBeforeLoad中。

5. 排查ESM警告关联问题
   日志中的Custom ESM Loaders警告虽然是实验特性提示，但偶发问题可能和ES模块加载冲突有关，可以尝试升级Cypress版本到最新稳定版，或检查项目中是否有自定义ESM加载器影响测试环境。

三、关于首次失败后测试跳过的说明 #

Cypress中如果beforeEach钩子执行失败，后续所有测试都会被跳过（因为前置条件不满足）。解决核心是先定位beforeEach中cy.visit的偶发失败原因，通过上述调试方法收集足够信息后再针对性修复。

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