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 ，这时候报错了 mochawesome.json unexpected token in JSON at position 0，生成的json 的 encode 有问题。

处理方式是new 一个 js ，命名为handleencode.js 复制以下代码，这个文件放到mochawesome.json同一文件夹，然后cmd 到这个文件运行 node handleencode.js 就可以生成转换过来的json了，在运行 npx mochawesome-report-generator mochawesome.json 就可以看到在mochawesome-report 这个文件夹生成的mochawesome.html 啦

  var fileEncoding = getFileEncoding('mochawesome.json')var fs = require('fs')var data = fs.readFileSync('mochawesome.json', fileEncoding)data = data.toString('utf8').replace(/^\uFEFF/, '') // remove BOMfs.writeFileSync('mochawesome.json', data, 'utf8')function getFileEncoding(f) {// this method is from https://stackoverflow.com/a/56188301var fs = require('fs')var d = new Buffer.alloc(5, [0, 0, 0, 0, 0])var fd = fs.openSync(f, 'r')fs.readSync(fd, d, 0, 5, 0)fs.closeSync(fd)// https://en.wikipedia.org/wiki/Byte_order_markvar e = falseif (!e && d[0] === 0xef && d[1] === 0xbb && d[2] === 0xbf) e = 'utf8'if (!e && d[0] === 0xfe && d[1] === 0xff) e = 'utf16be'if (!e && d[0] === 0xff && d[1] === 0xfe) e = 'utf16le'if (!e) e = 'ascii'return e
}

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

最后这种方法是最方便的。

cypress 生成 report相关推荐

HTMLTestRunner 为什么用PyCharm（Eclipse）执行测试成功但无法生成报告
在使用unittest+selenium进行自动化测试的时候,预期输出自动化测试报告,但是始终无法在指定package中输出report.html的报告.但是如果把生成report.html单独写进一 ...
Winform中在FastReport的PreviewControl预览控件中对report控件模板中控件值进行修改
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
前端学习（2737）：重读vue电商网站47之生成打包报告
打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告.生成报告的方式有两种: ① 通过命令行参数的形式生成报告 Javascript // 通过 vue-cli 的命令选项可以生成打包报告 / ...
npm run report，打包，包资源，vue大小，vue资源大小
npm run report 生成 report.html 以帮助分析包内容 npm run build --report npm run build -- --report
Pytest之重运行及生成测试报告
VOL 156 09 2020-09 今天距2021年113天这是ITester软件测试小栈第156次推文点击上方蓝字"ITester软件测试小栈"关注我,每周一.三.五早上 ...
医学报告生成论文总结【4-24】
医学报告生成论文总结 4-24 前言一.Cross-modal Memory Networks for Radiology Report Generation 二.Radiology Report ...
cypress自动化测试工具开发指南
待到秋来九月八,我花开后百花杀简介 cypress安装教程(MacOS版本) 安装前准备安装方式安装后使用 cucumber插件安装 cypress的基础配置插件支持配置--package.j ...
oracle怎么出出awr报告,如何在Oracle中生成AWR报告
在本文中,我将介绍一些在Oracle中为不同目的生成AWR报告的方法.DBA应该知道可以生成两种类型的AWR报告.一种是单实例报告,另一种是群集数据库报告. 什么是自动工作量存储库(AWR)?AWR是 ...
openGauss WDR Snapshot生成性能报告详细解读
openGauss WDR Snapshot生成性能报告详细解读 1. 简介 2. 操作步骤 2.1. 参数启用 2.1.1 启用WDR报告的snapshot收集 2.1.2 启用资源实时监控功能 2 ...

cypress 生成 report

cypress 生成 report相关推荐

最新文章

热门文章