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.jsonmochawesome_001.jsonmochawesome_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 ,

cypress 生成 report

 

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就生成了如下的文件:

cypress 生成 report 打开index.html 长这样

cypress 生成 report

上一篇:爬取51job职位信息--进行专业市场需求可视化分析(python、tableau、DBeaver)


下一篇:Macos 下面 开源软件 下载