无法合并mochawesome测试报告，如何生成单份汇总HTML文件

核心问题原因 #

• 你当前合并逻辑有两个根本性错误：
  • mochawesome-merge 仅支持合并 mochawesome生成的json报告文件，不支持直接合并已生成的html文件，你配置的匹配规则./cypress/reports/*.html完全不生效
  • 你在每次单条用例执行完成后就调用generateReport，此时全量测试报告还未生成完，只能合并已经跑完的部分结果，甚至会出现文件读写冲突

第一步：调整基础配置 #

先修改Runner.js的reporter配置，测试执行阶段仅生成json文件，合并完成后再统一生成最终html，避免不必要的资源开销：

async function testRunner(fixture) {
  return cypress.run({
    config: {
      "reporter": "mochawesome",
      "reporterOptions": {
        "reportFilename": "sample" + `${fixture}`,
        "reportDir":"./cypress/reports/",
        "charts": true,
        "overwrite": false,
        "html": false, // 执行阶段关闭html生成
        "json": true
      }
    },
    env: {
      testcaseID: `${fixture}`,
    },
    spec: './cypress/integration/' + `${param.getSpec()}` + ".spec.js",
  });
}

第二步：调整报告合并逻辑 #

修改TestRunner.js，调整合并时机和配置：

先确认已安装必要依赖 #

npm install mochawesome mochawesome-merge mochawesome-report-generator --save-dev

修正后的代码 #

const testRunner = require("./Runner.js");
const { merge } = require('mochawesome-merge');
const marge = require('mochawesome-report-generator');

// 合并配置修改为匹配json文件，指定最终输出参数
const mergeOptions = {
  files: [
    './cypress/reports/*.json', // 匹配所有json报告
  ],
  reportDir: './cypress/reports/', // 最终报告输出目录
  reportFilename: 'mochawesome_final', // 最终报告文件名
  charts: true,
  overwrite: true
}

async function generateReport(options) {
  const mergedReport = await merge(options);
  // 生成最终html报告
  return marge.create(mergedReport, options);
}

async function runner(dataSet) {
  const retry = [];
  // 先跑完所有测试用例
  for (let i = 0; i < dataSet.length; i += 1) {
    await new Promise(resolve => setTimeout(resolve, 10000)); // 替换原可读性差的延时写法为标准写法
    try {
      const result = await testRunner(dataSet[i]);
      console.log(JSON.stringify(result, null, " "));
      if (result.runs[0].stats.failures === 1) {
        retry.push(result.config.env.testcaseID);
      }
    } catch (error) {
      console.error(error);
      process.exit(1);
    }
  }
  // 所有用例执行完成后，统一合并生成报告
  await generateReport(mergeOptions);
  console.log('最终合并报告已生成：./cypress/reports/mochawesome_final.html');
  // 后续可自行添加重试逻辑
}

针对已安装cypress-mochawesome-reporter的情况 #

如果要使用该插件合并报告，不需要自己写合并逻辑，按以下规则执行即可：

1. 确认cypress.config.js中配置正确：

const { defineConfig } = require('cypress')
module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    reportPageTitle: '测试汇总报告',
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
  },
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
  },
})

2. 确认cypress/support/e2e.js中已经导入注册：

import 'cypress-mochawesome-reporter/register';

3. 若你是通过脚本多次调用cypress.run执行测试，不需要在单次执行后处理报告，所有执行完成后调用插件提供的合并方法即可，无需自定义合并逻辑。

已有5份html报告的处理方法 #

html报告本身无法直接合并，你需要找到这5份报告对应的同名json文件，放到同一个目录下，执行以下命令即可直接生成合并报告：

npx mochawesome-merge ./cypress/reports/*.json > merged.json
npx marge merged.json -f mochawesome_final -o ./cypress/reports/ --charts true

执行完成后就能在./cypress/reports/目录下找到mochawesome_final.html汇总报告。

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