cypress 生成 report

cypress 有好几种方法生成不同类型的report。

我以下的例子都是基于vue框架的cypress的项目。

1. 第一种是junit的report。

修改 cypress.json ,加上下面的配置。 reporter、reporterOptions 这两个可以是它特有的参数。mochaFile 是 mocha 特有的参数。

{
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "cypress/results/output.xml"
  }
}

然后执行 cypress run，执行完后就会在cypress/results 目录下看到生成的文件output.xml，但是如果有多个测试文件.js 的话，会被最后一个覆盖，所以可以给名字弄个哈希值。修改 "mochaFile": "cypress/results/output-[hash].xml" ，这个每个文件就会生成对应的一个xml. 注意，每次运行前记得清除一下results。

2. 如果想把spec输出到控制台并且把junit的reports 保存下来可以用 mocha-multi-reporters

先安装依赖的插件：npm i -D mocha mocha-multi-reporters mocha-junit-reporter

修改 cypress.json 为：
{
  "reporter": "mocha-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "spec, mocha-junit-reporter",
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/output-[hash].xml"
    }
  }
}

3. 上面说了，每个测试文件会生成单独的一个report，所以如果想要把生成的多个report整合成一个并生成为html。

3.1 先安装依赖的插件：npm i -D mocha mochawesome mochawesome-merge mochawesome-report-generator

3.2 修改 cypress.json 为：

{
  "reporter": "mochawesome",
  "reporterOptions": {
    "reportDir": "cypress/results",
    "overwrite": false,
    "html": false,
    "json": true
  }
}

3.3 然后运行 cypress run，就会在reportDir 生成多个类似于mochawesome.json, mochawesome_001.json, mochawesome_002.json 的文件，下一步就是整合为一个json

3.4 运行 npx mochawesome-merge ./cypress/results/*.json > mochawesome.json 就会生成一个整合后的json ：mochawesome.json  ，注意 网上还很多地方是写 npx mochawesome-merge --reportDir cypress/results > mochawesome.json 这种用法不支持了，  来自git的解释：After upgrading to version 4 all you need is to remove the --reportDir option and instead specify a glob pattern or several ones if necessary, separating each one with a space。

3.5 整合后就是介于json生成html了，理论上是运行这句话就可以了 npx mochawesome-report-generator mochawesome.json ，遗憾的是我这边报错了，粗略的查了一下，有可能是保存的json 的 encode 有问题，不是UTF-8 ，

4. 最后一种方法是使用cypress-mochawesome-reporter

4.1 先安装依赖的插件： npm i --save-dev cypress-mochawesome-reporter

4.2 修改 cypress.json 为以下：其中reporterOptions 是自定义需要显示的东西

"reporter": "cypress-mochawesome-reporter",

"reporterOptions": {

"reportDir": "cypress/report",

"charts": true,

"reportPageTitle": "custom-title"

}

4.3 打开 cypress/support/index.js 文件，加入这句：import 'cypress-mochawesome-reporter/register';

4.4 打开 cypress/plugins/index.js 文件，找到 module.exports = (on, config) => { } 加入这句：require('cypress-mochawesome-reporter/plugin')(on);

4.5 在reportDir就生成了如下的文件：

打开index.html 长这样

原文地址：https://blog.csdn.net/azhang190426/article/details/117524653

相关推荐