如何创建和使用 Webdriverio v6 自定义报告器？

Question

如何创建和使用 Webdriverio v6 自定义报告器？我的做法与此类似，这就是the docs [1] 的建议：

[ 编辑： 我想知道这是否与我从 Typescript 转换为 Javascript 有关。但在 Webdriverio v4 中运行良好。 ]

import DotReporter = require('@wdio/dot-reporter');

...

const config: WebdriverIO.Config = {
   ...

   reporters: [DotReporter],

   reporters: [  [DotReporter, {}]  ],    // this also doesn't work

那么就会出现这个错误：

[0-0] 2020-04-03T23:34:22.513Z 错误@wdio/runner：错误：类型检查 对于选项“记者”失败：记者应该是一个字符串 格式“wdio--reporter”或函数/类。请 有关自定义记者的更多信息，请参阅文档 (https://webdriver.io/docs/customreporter.html) 在 validateConfig （/project/root/node_modules/@wdio/config/build/utils.js:135:17） 在远程 (/project/root/node_modules/webdriverio/build/index.js:31:45) 在初始化实例 (/project/root/node_modules/@wdio/runner/build/utils.js:70:36)

但是记者是一个班级。在这种情况下，它是 Webdriver 自己的 Dot repoter 类。

这是一个记者的源代码——Webdriverio 的 DotReporter——由于上述错误，我无法工作：

import chalk from 'chalk'
import WDIOReporter from '@wdio/reporter'

/**
 * Initialize a new `Dot` matrix test reporter.
 */
export default class DotReporter extends WDIOReporter {
   ...

请注意：reporters: ['dot']，虽然它工作正常，但在这种情况下不是解决方案——我真正想要使用的报告器是我自己的自定义报告器。但是我在这个问题中使用了 DotReporter，因为当我尝试以自定义报告方式使用它时，它会导致相同的错误。

我应该输入什么来创建、导入和使用自定义报告器？

[1] 文档：https://webdriver.io/docs/customreporter.html

Answer 1

现在它可以工作了（但是：“你可以在 2 天内接受你自己的答案”）——我必须做两件事：

1) 从此改变：

export default class MyCustomReporter extends WDIOReporter {

到这里：

export = class MyCustomReporter extends WDIOReporter {

（我没有试图找出为什么 = 有效但 default 无效。）

2) 此后，出现了这个错误：

[0-0] 2020-04-05T01:26:30.781Z 错误@wdio/local-runner：启动测试会话失败：TypeError：没有'new'就不能调用类构造函数WDIOReporter

当我编辑 Typescript 编译器配置文件 tsconfig.json 以生成 ES2017 Javascript 代码时，此错误消失了：

{
    "compilerOptions": {
        "target": "ES2017",

我想默认目标是 ES2015 或任何生成 Nodejs 无法使用的 Javascript 类的东西。

不管怎样，有了= 和ES2017，记者现在可以工作了。

Answer 2

KajMagnus 的答案对我不起作用，但我还是设法解决了它。就我而言，它看起来像这样（我什至在这里发表了这条评论）：

import WDIOReporter from '@wdio/reporter';

// do not try to fix next line, only this type of export works here:

module.exports = class CustomReporter extends WDIOReporter {

区别在于模块.export = class;不只是 export = class。

在我的 tsconfig.json 我使用

"target": "ES2017",
"module": "commonjs",
"lib": [
      "es5",
      "es6",
      "dom"
    ]

在 wdio.conf.js 中

const CustomReporter = require('./whatever/reporter');

因为我还使用时间线 HTML 屏幕截图报告器和规范报告器，所以在我的情况下看起来像这样：

reporters: [
    [
      'timeline',
      {
        outputDir: './reports',
        embedImages: true,
        images: {
          quality: 70,
          resize: true,
          reductionRatio: 2
        },
        screenshotStrategy: 'before:click'
      }
    ],
    'spec',
    [CustomReporter, {}]
  ],

但如果您只想使用自定义的：

reporters: [[CustomReporter, {}]]

“CustomReporter”你可以用你喜欢的任何东西替换它，但记得在所有地方都这样做。您还可以选择不仅扩展 WDIOReporter，还可以选择扩展您想要的任何其他报告器。 WDIOReporter 易于使用，因为它基于 SpecReporter，所以我推荐它。无论如何，你可以在那里做任何你想做的事情。