为WebdriverIO / Cucumber框架生成HTML报告

Question

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

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

感谢。

Answer 1

好的，最后有空余时间来处理你的问题@Thangakumar D。 WebdriverIO报告是一个广泛的主题（有多种方式可以生成这样的报告），所以我将继续开始我最喜欢的记者：倾城！

<强> Allure Reporter:

• [前言：确保您在项目根目录]
• 安装您的包（如果您还没有）：npm install wdio-allure-reporter --save-dev
• 安装 Allure CommandLine （稍后会看到原因）：npm install -g allure-commandline --save-dev
• 设置您的wdio.config.js文件以支持倾城作为记者

<强> wdio.config.js：

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

• 运行测试！请注意，一旦回归结束，您的/allure-results/文件夹中就会填充多个.json，.txt，{{1} （如果您有屏幕截图错误）和.png文件。 Allure CommandLine 将使用此文件夹的强效功能为您呈现 HTML报告。
• 转到您的.xml文件夹并通过以下网址生成报告：/allure-results/（请执行此操作allure generate <reportsFolderPath>
• 如果您想要allure generate .内的/allure-reports/文件夹
• 现在进入您的/allure-results/文件夹并打开/allure-reports进入您选择的浏览器（使用Firefox作为初学者）

注意：除非您进行一些调整，否则生成的index.html文件不会在Chrome上加载所有内容。这是由于默认的WebKit无法加载所需的所有AJAX调用。详细了解 here 。

如果您已成功完成上述所有步骤，则应如下所示：

希望这有帮助。干杯!

注意：我会尝试更新这篇文章，因为我可以通过其他很棒的方式从您的WebdriverIO记者日志中生成报告，特别是如果这篇文章在此过程中获得一些爱/赞成。

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

Answer 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'"
},