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 长这样