Cypress如何统计指定测试阶段所有错误并在结束时统一列出

你当前仅监听win.console.error统计错误的思路存在明显漏报，不够完整，问题主要在这几方面：

• 未捕获的JS运行时异常、未处理的Promise拒绝、静态资源加载失败、跨域脚本错误这类问题，很多场景下不会触发console.error，而是直接抛到全局事件通道，只盯console.error会漏掉这部分错误。
• React、Vue等前端框架会拦截组件渲染、生命周期层面的错误，部分场景下不会直接输出console.error，会走框架内部的错误处理逻辑。
• 业务代码或者第三方日志SDK可能重写console.error方法，导致你拿到的错误信息不全，或者统计不到被拦截的调用。
• Cypress本身的命令执行失败、接口断言失败这类测试层错误，不会输出到页面的console.error里，完全统计不到。

核心逻辑是在指定测试片段执行前，初始化错误存储容器，同时挂载多维度的错误监听器，等片段内所有操作执行完成后，卸载所有监听恢复环境，再统一返回收集到的错误列表。可以封装成Cypress自定义命令复用，参考实现如下：

// 放在cypress/support/commands.js里全局可用
Cypress.Commands.add('runAndCollectErrors', (testActionFn) => {
  const errorList = [];
  let isCollecting = true;

  cy.window().then((win) => {
    // 1. 劫持console.error
    const originConsoleError = win.console.error;
    win.console.error = (...args) => {
      if (isCollecting) {
        errorList.push({
          errorType: 'console_error',
          message: args.map(item => item instanceof Error ? `${item.message}\n${item.stack}` : String(item)).join('\n')
        });
      }
      originConsoleError.apply(win.console, args);
    };

    // 2. 监听全局运行时错误（含资源加载错误）
    const handleGlobalError = (e) => {
      if (!isCollecting) return;
      // 区分是JS错误还是资源加载错误
      if (e.target === win) {
        errorList.push({
          errorType: 'uncaught_js_error',
          message: `${e.message}\n at ${e.filename}:${e.lineno}:${e.colno}\n${e.error?.stack || ''}`
        });
      } else {
        errorList.push({
          errorType: 'resource_load_error',
          message: `资源加载失败: ${e.target.src || e.target.href}`
        });
      }
      // 阻止错误直接中断测试，收集全量错误
      e.preventDefault();
    };
    win.addEventListener('error', handleGlobalError, true);

    // 3. 监听未处理的Promise异常
    const handlePromiseReject = (e) => {
      if (!isCollecting) return;
      const reason = e.reason;
      errorList.push({
        errorType: 'unhandled_promise_rejection',
        message: reason instanceof Error ? `${reason.message}\n${reason.stack}` : String(reason)
      });
      e.preventDefault();
    };
    win.addEventListener('unhandledrejection', handlePromiseReject);

    // 4. 监听Cypress命令执行错误
    const handleCypressFail = (err) => {
      if (!isCollecting) return true;
      errorList.push({
        errorType: 'cypress_command_error',
        message: `${err.message}\n${err.stack}`
      });
      // 返回false阻止Cypress直接标记用例失败，等收集完成后统一处理
      return false;
    };
    Cypress.on('fail', handleCypressFail);

    // 执行传入的待测操作片段
    testActionFn();

    // 所有操作执行完成后清理监听，返回结果
    cy.then(() => {
      isCollecting = false;
      // 恢复原生方法，移除监听，避免污染其他用例
      win.console.error = originConsoleError;
      win.removeEventListener('error', handleGlobalError, true);
      win.removeEventListener('unhandledrejection', handlePromiseReject);
      Cypress.off('fail', handleCypressFail);

      return cy.wrap(errorList);
    });
  });
});

使用示例 #

it('测试表单提交流程的全量错误', () => {
  cy.visit('/form-page');

  // 传入需要收集错误的操作片段
  cy.runAndCollectErrors(() => {
    cy.get('#username').type('test_user');
    cy.get('#submit').click();
    cy.wait('@submitForm');
    cy.get('.success-tip').should('be.visible');
  }).then((errors) => {
    // 片段执行完统一处理所有错误
    if (errors.length) {
      // 可以自定义打印、上报逻辑
      cy.log(`本次测试片段共捕获 ${errors.length} 个错误`);
      errors.forEach((err, idx) => {
        cy.log(`[错误${idx+1}][${err.errorType}] ${err.message}`);
      });
      // 需要断言无错就放开下面这行
      // expect(errors).to.be.empty;
    }
  });

  // 后续操作产生的错误不会被收集
});

补充注意事项 #

• 如果测试Vue/React项目，可以额外在拿到window对象后，挂载框架的全局错误处理钩子，比如Vue的app.config.errorHandler、React的全局错误监听钩子，避免框架吞掉组件渲染层面的错误。
• 如果不需要收集某类错误，直接删掉对应监听逻辑即可；如果需要遇到致命错误立刻终止测试，删掉对应事件里的e.preventDefault()和fail回调里的return false就行。
• 一定要在收集结束后恢复所有被改写的原生方法、移除事件监听，否则会导致后续用例的错误统计混乱。

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