4，Cypress 之 报告生成html页面

一、安装mochawesome

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

二、配置cypress.json

// cypress.json
{
   ...
  "reporter": "mochawesome",
    "reporterOptions": {
        "reportDir": "tests/e2e/results/reports",
        "overwrite": false,
        "html": false,
        "json": true,
        "toConsole": true
    },
  ...
}

三、执行脚本
创建 tests/e2e/report/index.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const fse = require('fs-extra');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { merge } = require('mochawesome-merge');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const generator = require('mochawesome-report-generator');
// const cypress = require('cypress')
async function runTests () {
  await fse.remove('mochawesome-report');
  // await cypress.run({ config: { baseUrl: 'http://localhost:8080/' } })
  const options = {
    files: [
      // you can specify more files or globs if necessary:
      './tests/e2e/results/reports/*.json'
    ],
    reportDir: './tests/e2e/results/'
  };
  const jsonReport = await merge(options);
  // const totalFailed = jsonReport.stats.failures
  await generator.create(jsonReport, options);
}
runTests();

四、 添加执行命令
package.json 添加执行命令

// package.json
"scripts": {
    "buildReport": "node tests/e2e/report/index.js",
    // 注意：需要确保项目正在运行，并运行在https://localhost:8080/mp/
    "test.headless:e2e": "vue-cli-service test:e2e --headless  --url https://localhost:8080/mp/",
},

五、执行命令

# 运行项目
npm run serve  
# 执行测试命令
测试项目：npm run test.headless:e2e // 注意运行项目时的端口变化，需要同步到package.json=》scripts=》“test.headless:e2e”命令中里面去，如项目运行在8080端口的话，需更改为："test.headless:e2e": "vue-cli-service test:e2e --headless --url https://localhost:8080/mp/",
# 执行报告构建命令
生成报告：npm run buildReport

六、完成
报告文件就生成在 tests/e2e/results/mochawesome.html

参考文件：https://www.jianshu.com/p/459612488233