多功能Cucumber HTML报告器

[](https://discord.gg/d6rfHkSDjc) [](https://github.com/WasiqB/multiple-cucumber-html-reporter/actions) [](http://opensource.org/licenses/MIT) [](https://nodei.co/npm/multiple-cucumber-html-reporter/)

多功能Cucumber HTML报告器是一款专为Cucumber设计的报告解析模块，它将JSON输出转化为精美易读的测试报告。与市面上其他报告模块不同的是，本项目提供：

• 全部测试特性与场景的概览
• 可以展示多轮相同特性测试结果或跨浏览器/设备测试结果的特性概述
• 特性概述支持搜索、过滤和排序功能
• 带有浏览器/设备元数据的特性概览

关键信息

Cucumber默认时间表示为纳秒。如果你使用的是CucumberJS 2或3版本，并希望显示持续时间，请务必同时使用displayDuration和durationInMS = true参数。

（或者启用暗模式后）

[image](https://user-images.githubusercontent.com/10329968/193400025-37dcbc0a-f5b8-4dea-b40e-51330c43aebf.png) [image](https://user-images.githubusercontent.com/10329968/193400032-1142963c-f216-416c-bf42-95a26351a824.png)

一个示例可以在[这里](https://wasiqb.github.io/multiple-cucumber-html-reporter/browsers/index.html)找到。

你也可以在不使用CucumberJS与浏览器元数据但自定义元数据的情况下创建美观的概述，这是由[LennDG](https://github.com/LennDG)创建的功能。

一个示例可以在[这里](https://wasiqb.github.io/multiple-cucumber-html-reporter/custom-metadata/index.html)找到。

安装

通过以下命令本地安装这个模块：

npm install multiple-cucumber-html-reporter

保存为依赖项或开发依赖项：

npm install multiple-cucumber-html-reporter --save
npm install multiple-cucumber-html-reporter --save-dev

兼容性

多个Cucumber HTML报告器现在与CucumberJS 1, 2, 3 和 4版本兼容。

使用方法

如果你正在使用Protractor，我建议你使用[protractor-multiple-cucumber-html-reporter-plugin](https://github.com/wswebcreation/protractor-multiple-cucumber-html-reporter-plugin)。

如果你使用的是[webdriver.io](http://webdriver.io/)，请查看[WEBDRIVER.IO.MD](./docs/WEBDRIVER.IO.MD)了解如何使用。

它提供了multiple-cucumber-html-reporter并集成了许多良好的辅助功能，只需几行代码就能让Protractor + CucumberJS 1/2/3无缝整合。

对于 cucumber-js 2.x 及更低版本

多个Cucumber HTML 报告器会将Cucumber的JSON输出转换成精美的报告。要在CucumberJS的AfterFeatures钩子中实现这一功能，需要添加下面的代码：

const report = require("multiple-cucumber-html-reporter");

report.generate({
  jsonDir: "./path-to-your-json-output/",
  reportPath: "./path-where-the-report-needs-to-be/",
  // ...其他配置...
});

对于 cucumber-js 3.x

由于 cucumber-js 3.x不再支持AfterFeatures钩子，你需要在单独的Node执行程序中运行多个Cucumber HTML 报告器，这将在 cucumber-js 进程结束后进行。

重要提示：

当你使用Cucumber生成JSON文件时，每个文件名都应该是唯一的。如果文件名不是唯一的，Cucumber将会覆盖JSON文件。

建议是使用例如特征名、浏览器/设备名以及一个Unix时间戳，比如(new Date).getTime()，生成类似name_of_feature.chrome.1495298685509.json这样的文件名。

选项

jsonDir

• 类型：String
• 必须：是

存储所有生成的JSON文件的目录，相对于执行脚本的位置。

注意： 如果你从命令行使用npm脚本（如npm run generate-report），那么jsonDir将是相对于脚本执行路径的。如果在项目根目录下执行，则将从项目根目录开始查找jsonDir。

reportPath

• 类型：String
• 必须：是

报告应保存的目录，相对于执行脚本的位置。

注意： 同上，如果从命令行执行npm脚本（如npm run generate-report），报告将被保存到相对于脚本执行路径的reportPath。

...其他配置

此处省略了其他详细配置项，这些可以用来定制报告的显示方式、打开方式、保存合并后的JSON文件等。

推荐理由

1. 全面的报告功能 - 不仅提供详细的测试结果，还能展示测试时间、浏览器/设备信息等。
2. 强大的应用场景 - 非常适合自动化测试场景，尤其是需要跨浏览器、跨设备测试的情况。
3. 高度可定制化 - 支持自定义元数据、页面标题、页脚等多种设置，满足个性化需求。
4. 兼容性广泛 - 能够很好地工作在CucumberJS 1至4的不同版本之间，减轻了升级时的负担。

如果你正在寻找一款能大幅提升测试报告用户体验的工具，多个Cucumber HTML报告器值得尝试。通过其美观的设计和丰富的功能，它能让测试结果展示变得更加专业且易于理解。立即安装，开始体验更优质的测试报告吧！