前端自动化测试框架Cypress（二十三）生成测试报告（一）

因为Cypress也是在Mocha的基础上构建的，所以任何为Mocha构建的报告生成器都可以在Cypress里使用。这里有一个Mocha内建报告生成器列表：
Mocha内建报告生成器
我们同样为Mocha添加了另外两个普遍使用的第三方的报告生成器。同样地构建在Cypress里，你可以不用额外安装直接使用：
teamcity
junit
最后，我们也支持自定义，或其他第三方的报告生成器。
你知道吗？你可以利用Mocha使用多报告生成器？
这通常在CI的时候是很有用的。典型的情况是，我们看到使用者用默认的spec报告去展示stdout，同时也用junit生成一个实际的报告文件。
Once you’ve read through the documentation below, we invite you to experience the power of Cypress reporters via Section 9 of our open source testing workshop for Cypress.
报告生成器选项
一些报告生成器接受参数以便用户自定义一些行为。这些可以在cypress.json或在命令行里进行传递：

cypress.json
{
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "results/my-test-output.xml",
    "toConsole": true
  }}

命令行

cypress run --reporter junit \
  --reporter-options "mochaFile=results/my-test-output.xml,toConsole=true"

以上配置会输出JUnit的报告到STDOUT（标准输出）并保存一份为XML文件。有的报告生成器可能不支持参数选项，就算有也可能各自不相同。请参考各自的报告生成器文档。
Report per spec
从Cypress 3+开始，在cypress run的执行过程中，每一个测试用例文件都是完全单独运行的，这意味着后面的测试结果会覆盖之前的测试结果呢。为了针对每个测试文件生成单独的测试报告，请在mochaFile文件中使用[hash]：

{
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "results/my-test-output-[hash].xml"
  }}

这将会在results目录下创建分开的XML报告文件。你可以使用第三方的工具来进行合并。比如，对于Mochawesome报告生成器，有一款mochawesome-merge工具。
多报告生成器
很多时候，我们看到用户想要拥有多报告生成器的能力。当运行在CI模式下的时候，你可能想要生成一个junit报告的同时，再生成一个json格式的报告。这是非常好的，但是，通过设置了这些之后你将可能，不会再在测试运行时收到额外的反馈信息。
解决方案有的，就是使用多报告生成器。你将收到两个报告带来的益处。
我们建议使用这个优秀的npm模块：
https://github.com/stanleyhlng/mocha-multi-reporters
对于我们自己的内部项目，每一个我们都使用多报告生成器。
多报告生成器示例
示例都在https://github.com/cypress-io/cypress-example-circleci-orb已被实现。
用例文件测试报告到标准输出STDOUT，保存JUnit XML文件
我们想要输出一个测试用例”spec”报告到STDOUT，同时，保存Mochawesome JSON格式的所有报告并且合并到一个单独的报告文件里。
我们需要安装额外的依赖，包括Mocha本身：
npm install --save-dev mocha mocha-multi-reporters mocha-junit-reporter
然后添加一个单独的reporter-config.json文件，使能spec和junit报告生成器，使得junit报告生成器能够保存每一个单独的XML报告文件：

{
  "reporterEnabled": "spec, mocha-junit-reporter",
  "reporterOptions": {
    "mochaFile": "cypress/results/results-[hash].xml"
  }}

命令行指令告诉Cypress使用mocha-multi-reporters模块并且指明了配置文件：
cypress run --reporter mocha-multi-reporters
–reporter-options configFile=reporter-config.json
注意：我们推荐在运行此指令前，删除cypress/results目录下所有的文件，因为每一次运行都会生成新的XML文件。比如，我们可以在package.json下面添加npm脚本指令：

{
  "scripts": {
    "delete:reports": "rm cypress/results/* || true",
    "prereport": "npm run delete:reports",
    "report": "cypress run"
  }}

然后再调用npm run report。
用例文件测试报告到标准输出STDOUT，输出合并后的Mochawesome JSON报告文件
本示例在https://github.com/cypress-io/cypress-example-circleci-orb的分支spec-and-single-mochawesome-json有展示。我们想要输出测试用例文件对应的报告文件到标准输出STDOUT，保存各个测试用例文件的Mochawesome JSON报告，并合并所有的JSON报告成一个。
我们需要安装几个依赖：
npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator
然后在cypress.json配置报告生成器，跳过HTML报告生成并保存每一个JSON测试报告到cypress/results目录：

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

这样就会生成cypress/results/mochawesome.json, cypress/results/mochawesome_001.json, …等报告文件。然后我门就可以使用mochawesome-merge来合并它们。
npx mochawesome-merge --reportDir cypress/results > mochawesome.json
现在我们可以利用mochawesome.json和% url https://github.com/adamgruber/mochawesome-report-generator %}来生成一个合并后的HTML报告了：
npx mochawesome-report-generator mochawesome.json
这样会生成一个如下所示的漂亮的独立的HTML报告mochawesome-report/mochawesome.html。你可以看到，所有的测试结果，时间信息，甚至测试代码信息等：

请参考Integrating Mochawesome reporter with Cypresss了解更多信息。
自定义报告生成器
Cypress支持自定义报告生成器，不管是在你本地的还是通过npm安装的。
本地报告生成器
假设你有如下的目录结构：

> my-project
  > cypress
  > src
  > reporters
    - custom.js
设定自定义报告生成器的路径：
// cypress.json
{
  "reporter": "reporters/custom.js"}
以上路径是相对于cypress.json文件所在的位置的相对路径。
命令行
cypress run --reporter reporters/custom.js
我们同样支持传递绝对路径。
npm报告生成器
如果你通过npm来安装一个自定义的报告生成器，需要按照如下定义包名：
// cypress.json
{
  "reporter": "mochawesome"}

命令行:

cypress run --reporter mochawesome

你需要为报告生成器安装所有的对等依赖项，哪怕它们与Cypress是绑定在一起的。例如，mochawesome需要mocha作为对等依赖。你需要为你的项目安装mocha作为一个开发依赖项以便它能正常工作。