时间线报告器

wdio-timeline-reporter 是一个第三方包，更多信息请参见GitHub | npm

一站式 WebdriverIO 报告器，用于您测试结果的聚合可视化，因为“眼见为实”

原因

因为我们花费大量时间调试失败的测试，在终端输出和查看错误截图之间切换等。此报告器将您需要的所有典型信息聚合到一个报告中。运行测试并获得事件的时间线，您可以回顾这些事件以进一步验证一切是否正常。

功能包括：

• 非常适合 Mocha 和 Jasmine 框架。也适用于 Cucumber，但每个步骤都将作为测试报告。
• 测试结果的详细摘要。
• 每个测试运行的详细信息，包括在测试执行期间捕获的所有屏幕截图。
• 测试结果过滤。非常适合专注于失败的测试。
• 附加到测试的错误堆栈跟踪。
• 能够在运行时向测试添加其他信息。
• 无需后处理。在 wdio 测试过程完成后，将生成一个静态 html 报告文件。
• 时间线服务用于管理截图，包括调整图像大小。

可以在此处找到一个示例 html 报告。

有关如何安装WebdriverIO 的说明，请参见此处。

安装

有关与 WEBDRIVERIO V4 兼容的版本，请参见此处

npm install --save wdio-timeline-reporter

一个依赖项将添加到您的package.json中。

{
  "dependencies": {
    "wdio-timeline-reporter": "^5.1.0"
  }
}

用法

将timeline添加到 wdio 配置文件中的 reporters 数组中。

还要从 wdio-timeline-reporter 导入并添加TimelineService。

服务对于组合报告和创建 html 是必需的，因为报告器现在在 webdriverio 5 中按运行器实例初始化。请参阅 webdriverio 上的开放讨论

TimelineService 还可以管理在测试执行期间拍摄的屏幕截图。您可以选择减小图像的大小和质量，并将图像作为 base64 嵌入到报告中。这些可以通过报告器选项进行配置。

// wdio.conf.js
const { TimelineService } = require('wdio-timeline-reporter/timeline-service');
exports.config = {
  // ...
  reporters: [['timeline', { outputDir: './desired_location' }]],
  // ...
  services: [[TimelineService]]
};

报告器选项

如果您希望覆盖默认的报告器配置，请向 reporters 下 timeline 数组中添加一个 reporterOptions 对象文字，如下所示。

索引	描述
1.	将在其中创建 html 文件和屏幕截图的目录。必填选项。
2.	报告 html 文件的名称。默认值为timeline-report.html。
3.	将图像作为 base64 嵌入到 html 文件中。默认值为false。
4.	图像操作的对象选项。
5.	设置 JPEG 质量。仅当resize选项为true时才相关。值越小，图像大小和质量越低。默认值为70。允许的最大值为100。
6.	调整图像大小。默认值为false。
7.	减少像素总数的值。仅当resize选项为 true 时才相关。默认为1有效值1 - 5。
8.	拍摄屏幕截图的频率。支持的值为on:error、before:click、none。默认为none。before:click是为被测应用程序创建屏幕截图时间线的绝佳选择。

向测试上下文添加其他信息

可以使用addContext静态方法向测试添加其他信息。这对于添加可能有助于调试失败测试的重要信息很有用，例如在测试运行期间使用动态用户名创建的用户。

基本用法

TimelineReporter.addContext静态方法接受字符串参数或具有两个属性title和value的对象文字，例如。

{ title: 'sessionId', value: 'b59bb9ec-ab15-475e-9ce6-de8a14ca0cd3' }

值也可以是链接。

Mocha 示例

const TimelineReporter = require('wdio-timeline-reporter').default;

describe('Suite', function() {
  it('Test', function() {
    // object literal parameter
    TimelineReporter.addContext({
      title: 'Test User',
      value: 'user id created during the test'
    });

    // value as anchor tag
    TimelineReporter.addContext({
      title: 'Dynamic link',
      value: '<a href="">Some important link related to test</a>'
    });

    // string parameter
    TimelineReporter.addContext('This test might be flaky');
  });
});

致谢

非常感谢wdio-json-reporter的作者和维护者。阅读他们的 v5 解决方案帮助我加快了工作速度。