Cypress搭配Mochawesome如何实现高层级测试聚合统计图表展示

Mochawesome 默认仅对it用例的直接父级describe块渲染环形统计图表，你当前用例结构中C层用例的直接父级是B层describe，因此默认只有B层展示图表。以下是无侵入修改源码、适配现有结构的可落地方案：

自定义Reporter注入聚合统计逻辑 #

不需要修改node_modules内的原有文件，通过继承原生Mochawesome reporter实现各层级测试结果的递归统计：

• 在项目根目录新建custom-mochawesome-reporter.js，写入以下逻辑：

const Mochawesome = require('mochawesome');

class CustomMochawesomeReporter extends Mochawesome {
  constructor(runner, options) {
    super(runner, options);

    runner.on('end', () => {
      // 递归统计当前suite及所有子suite的用例结果
      const calcAggregateStats = (suite) => {
        const stats = {
          passes: 0,
          failures: 0,
          pending: 0,
          skipped: 0,
          total: 0
        };

        // 统计当前suite直接挂载的用例
        suite.tests.forEach(test => {
          stats.total++;
          if (test.state === 'passed') stats.passes++;
          else if (test.state === 'failed') stats.failures++;
          else if (test.pending) stats.pending++;
          else stats.skipped++;
        });

        // 累加所有子suite的统计结果
        suite.suites.forEach(childSuite => {
          const childStats = calcAggregateStats(childSuite);
          Object.keys(stats).forEach(key => {
            stats[key] += childStats[key];
          });
        });

        // 将聚合结果挂载到suite节点，供渲染时读取
        suite.aggregateStats = stats;
        return stats;
      };

      // 从根测试节点开始全量统计，自动覆盖顶层、A层、B层所有块
      calcAggregateStats(this.runner.suite);
    });
  }
}

module.exports = CustomMochawesomeReporter;

• 修改cypress.json配置，替换默认reporter为自定义版本，先关闭单文件html生成，方便后续多spec结果合并：

{
  "reporter": "./custom-mochawesome-reporter.js",
  "reporterOptions": {
    "reportDir": "cypress/reports/mocha",
    "overwrite": false,
    "html": false,
    "json": true
  }
}

合并多Spec测试结果 #

Cypress 运行多个spec文件时会为每个文件单独生成一份json报告，执行以下命令合并为单份全局报告数据：

npx mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/merged-report.json

调整报告模板渲染多层级图表 #

• 把Mochawesome默认模板从node_modules/mochawesome-report-generator/src/templates目录完整复制到项目内的custom-report-template目录，避免修改原始依赖文件。
• 做两处模板修改即可实现需求：
  • 找到负责渲染describe块的模板片段，将原有环形图的数据源从「当前suite直接子用例统计」替换为我们之前挂载的aggregateStats，只要是带子块的suite（包括A层）都会自动渲染聚合环形图。由于你每个B层块下只有1个用例，B层的聚合结果和原有默认统计值完全一致，不会出现数据偏差。
  • 找到报告顶部的全局概览区域，新增同款环形图组件，数据源取根节点的aggregateStats，即可实现顶层全局聚合图表展示。
• 执行命令基于合并后的json和自定义模板生成最终html报告：

npx marge cypress/reports/merged-report.json --reportDir cypress/reports/final --templateDir ./custom-report-template

轻量替代方案 #

如果不想修改模板，可以写一个简单的node脚本，在合并完json报告后递归遍历所有suite节点，把节点原生的stats字段直接替换为递归计算的聚合统计值，再用Mochawesome默认模板生成报告即可。这种方式不需要调整模板代码，默认渲染逻辑就会自动给所有层级的suite块、顶层概览渲染对应聚合环形图。

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