Cypress测试报告生成指北

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

前言

在之前的文章中，我们已经知道如何在一个已有的vue2项目中引入Cypress测试框架，并初步配置了命令行和测试文件夹，完成了端对端测试基础环境的搭建。之后如果亲手实践了关于测试掘金首页渲染时间的案例，相信大家也能体会到它功能的强大与便捷，但有了测试结果之后，下一步我们想的就是如何展示了

Cypress在这方面也为我们提供了多种方式来生成测试报告，甚至到了复杂的程度，这个复杂倒不是说配置的过程有多麻烦，而是方法有些繁杂，官网上的介绍个别地方也因为叙述顺序的原因不太好理解。本文的目的就是梳理Cypress中各种类型测试报告生成策略的优缺点，尽量让大家阅读之后能快速地确定自己采用什么形式呈现测试结果

在了解Cypress生成测试报告的各种方法之前，希望大家能明确一点，那就是不管采用什么方法、安装了什么包或库，最终都会落脚到cypress.config.js中reporter和reporterOptions这两个参数的配置上，之后运行npx cypress run即可（也可以在命令行自行配置相关的npm指令）

Cypress中的测试报告都是通过测试生成器来生成的，而它本身内置了Mocha，任何 Mocha 支持的测试报告均可直接用于Cypress；除此之外，也可以通过编写.js文件自定义测试报告的样式；最后是比较推荐的，也是大家用的最多的方式，通过安装第三方插件来生成测试报告，下面将依次介绍

内置报告生成器

先了解一下cypress run的常用命令行参数：

指令	作用
--browser, -b	指定运行用例的浏览器
--reporter, -r	指定报告生成器来源
--reporter-options, -o	配置报告生成器
--spec, -s	指定运行的测试用例文件（一个或多个）

使用内置报告生成的方法很简单，直接运行npx cypress run -reporter spec/json/junit即可：

• spec：输出一个嵌套的分级视图
• json：输出一个大的 json 对象
• junit：输出一个 xml 文件

cypress.config.js中此时不需要作任何报告生成器相关的配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {...
  },
});

本地自定义报告生成器

假设项目目录结构如下所示：

> project-name
  > src
  > reporters
    - custom.js // 自定义测试报告的样式文件

cypress.config.js中此时应使用编写的custom.js文件：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {...
  },
  reporter: "reporters/custom.js" 
});

然后运行npx cypress run即可生成自定义样式的测试报告

第三方报告生成器

这里以官方提供的mochawesome为例，使用步骤如下：

基本配置

• 安装：npm install --save-dev mocha mochawesome

• 配置：

  // cypress.config.js
  module.exports = defineConfig({
      e2e: {...
      },
      reporter: 'mochawesome',
      reporterOptions: {
          reportDir: 'tests/e2e/results' // 指定生成测试报告的位置，相对cypress.config.js文件的位置
      }
  });
  

• 运行：npx cypress run

生成混合报告

以上的基本配置还存在两个问腿没解决：

• 每次生成的测试报告都会覆盖前一次生成的结果
• 每次只能生成一种格式的报告

针对不同需求，可以采用不同的方案来解决：

1. 同时生成spec和junit格式的报告，其中：spec在控制台输出，junit格式用于保存

   • npm install --save-dev cypress-multi-reporters mocha-junit-reporter
     • cypress-multi-reporters：生成多种类型测试报告
     • mocha-junit-reporter：junit报告器，需额外安装
   • ...接下来的步骤省略不关注了，配置较复杂，偷个懒，感兴趣的可以参照官网

2. 同时生成spec和json格式的报告，其中：spec在控制台输出，json格式用于保存，然后将json合并成一个，最终通过.html显示

   • 安装：npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator

     • mochawesome-merge：合并json报告
     • mochawesome-report-generator：生成html报告

   • 配置：

     // cypress.config.js
     module.exports = defineConfig({
         e2e: {...
         },
         reporter: 'mochawesome', // cypress run 时的测试报告生成策略
         reporterOptions: {
             reportDir: 'tests/e2e/results' // 测试报告的文件夹
             overwrite: false, // 是否覆盖原来的报告
             html: false, // 是否生成html报告
             json: true // 是否生成json文件
         }
     });
     

   • 运行：npx cypress run

     • mochawesome会自动生成有序的json文件

   • 合并json文件：npx mochawesome-merge "tests/e2e/results/*.json" > merge-test-mochawesome.json

     • merge-test-mochawesome.json文件在项目的根目录下

   • 生成html报告：npx marge merge-test-mochawesome.json

     • 会在根目录下新建一个mochawesome-report文件夹，打开里面的html文件即可

3. 同时生成spec和xml格式的报告，其中：spec在控制台输出，xml格式用于保存，然后将xml合并成一个，最终通过.html显示

   • 需要安装命令行工具allure，然后与Cypress集成，继续偷个懒，后面想起来补上！

个人配置流程

最后提供一个我目前采的用配置流程（其实就是同时生成spec和json格式报告的那个方案）

• 安装： npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator

• 配置：

  // cypress.config.js
  module.exports = defineConfig({
      e2e: {...
      },
      reporter: 'mochawesome',
      reporterOptions: {
          reportDir: 'tests/e2e/results'
          overwrite: false, 
          html: false, 
          json: true 
      }
  });
  

• 运行：

  1. npx cypress run
  2. npx mochawesome-merge "tests/e2e/results/*.json" > merge-test-mochawesome.json
  3. npx marge merge-test-mochawesome.json

• 查看：根目录mochawesome-report文件夹下的mochawesome.html文件

参考资料： Reporters | Cypress Documentation