时间线报告器

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"
  }
}

使用

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

同时从wdio-timeline-reporter导入并添加TimelineService。

服务是必需的，用于合并报告并创建html，因为在webdriverio 5中，reporters现在是按运行器实例初始化的。查看webdriverio上的公开讨论

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

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

Reporter选项

如果您希望覆盖默认的reporter配置，请在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' }

value也可以是链接

Mocha示例

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

describe('Suite', function() {
  it('Test', function() {
    // 对象字面量参数
    TimelineReporter.addContext({
      title: 'Test User',
      value: 'user id created during the test'
    });

    // 值为锚标签
    TimelineReporter.addContext({
      title: 'Dynamic link',
      value: '<a href="">Some important link related to test</a>'
    });

    // 字符串参数
    TimelineReporter.addContext('This test might be flaky');
  });
});

致谢

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