为 WebdriverIO/Cucumber 框架生成 HTML 报告

Posted 2023-02-16

【中文标题】为 WebdriverIO/Cucumber 框架生成 HTML 报告

【英文标题】：Generate HTML report for WebdriverIO/Cucumber framework

【发布时间】：2017-11-15 20:01:48

【问题描述】：

我正在使用 WebdriverIO/Cucumber (wdio-cucumber-framework) 进行自动化测试。我想在 html 文件中获取测试执行结果。截至目前，我正在使用 Spec Reporter (wdio-spec-reporter)。这有助于在控制台窗口中打印结果。但我想要一个 HTML 文件中的所有执行报告。

如何在 HTML 文件中获取 WebdriverIO 测试执行结果？

谢谢。

【问题讨论】：

你可以使用 wdio 的 json 报告器。然后使用master的想法插件，我们可以生成HTML报告。

@Murthi - 你能告诉我大师的想法插件名称吗？你能分享一些该插件的参考网址吗

github.com/damianszczepanik/cucumber-reporting 但您必须使用 cucumber 选项来生成 cucumber json 报告。

您还需要这个@ThangakumarD 的帮助吗？这个问题的当前状态是什么？

@iamdanchiv - 谢谢 :)

【参考方案1】：

好的，终于有空来解答你的问题@Thangakumar D。 WebdriverIO 报告是一个庞大的主题（有多种方法可以生成这样的报告），所以我将继续从我最喜欢的报告器开始：Allure！

Allure Reporter:

[前言：确保您位于项目根目录中] 安装你的包（如果你还没有的话）：npm install wdio-allure-reporter --save-dev 安装

Allure CommandLine

（稍后你会知道原因）：npm install -g allure-commandline --save-dev 设置您的 wdio.config.js 文件以支持

Allure

作为记者

wdio.config.js：

reporters: ['allure', 'dot', 'spec', 'json'],
reporterOptions: 
    outputDir: './wdio-logs/',
    allure: 
        outputDir: './allure-reports/allure/'
    

运行您的测试！

请注意，一旦您的回归结束，您的/allure-results/ 文件夹中将填充多个.json、.txt、.png（如果您有屏幕截图错误）和@ 987654335@ 文件。

Allure CommandLine

将使用此文件夹的内容为您呈现

HTML 报告

。 转到您的/allure-results/ 文件夹并通过以下方式生成报告：allure generate <reportsFolderPath>（这样做allure generate . 如果您希望您的 /allure-reports/ 文件夹位于 /allure-results/ 中） 现在进入您的/allure-reports 文件夹并在您选择的浏览器中打开index.html（对于初学者使用Firefox）

注意：除非您进行一些调整，否则生成的 index.html 文件不会将所有内容加载到 Chrome 上。这是由于默认的 WebKit 无法加载所需的所有 AJAX 调用。阅读更多信息here。

如果您成功完成了前面的所有步骤，它应该如下所示：

希望这会有所帮助。干杯!

---

注意：当我有更多时间使用其他很棒的方法从您的 WebdriverIO 报告日志生成报告时，我会尝试更新这篇文章，特别是如果这篇文章一路上得到一些爱/赞成。

例如： 我喜欢使用的另一个组合是：wdio-json-reporter/wdio-junit-reporter 加上易于使用的模板语言 Jinja2。

【讨论】：

@iamdanchiv- 感谢您的帮助。我已经 globally 安装了 'wdio-allure-reporter' 一旦我执行了我的测试套件，我就会在 ./allure-reports/allure/ 文件夹中得到结果，其中包含多个 JSON 和 XML 文件。要在命令窗口中生成 HTML 报告，我导航到“allure-reports”文件夹并输入以下命令 c:\projects\functionalTest\allure-reports> allure generate . 我得到 allure 不被识别为内部或外部命令我们是否需要任何其他包比我已经在全球范围内拥有的“wdio-allure-reporter”？

@ThangakumarD 您是否在全球范围内安装了allure-commandline？就像我上面说的，你需要它来生成你的报告。所以基本上，做npm install -g allure-commandline（--save-dev 将它作为依赖项保存在你的项目中，如果你不想在你的项目中使用allure-commandline 来生成 HTML 报告以外的其他目的，你可以跳过它）。

@ThangakumarD 如果您将结果存储在./allure-reports/allure/ 中，那么您应该在同一文件夹中运行allure generate . 命令。顺便说一句，您可以使用来自node_modules 的路径明确引用诱惑：./<pathToRootProject>/node_modules/.bin/allure generate .

我收到了 HTML 报告！非常感谢！

【参考方案2】：

我一直在用Mochawesome记者，它看起来很漂亮，看看 here。

Mochawesome 记者生成 mochoawesome.json，然后可以使用 Mochawesome report generator 创建漂亮的报告

安装：

> npm install --save wdio-mochawesome-reporter
> npm install --save mochawesome-report-generator@2.3.2

在 wdio.conf.js 中加入这一行更容易集成：

  // sample wdio.conf.js
  module.exports = 
  // ...
  reporters: ['dot', 'mochawesome'],
  reporterOptions: 
    outputDir: './', //mochawesome.json file will be written to this directory
  ,
  // ...
;

将脚本添加到 package.json：

"scripts": 
  "generateMochawesome": "marge path/to/mochawesome.json --reportTitle 'My project results'"
,