WebdriverIO如何重写spec reporter修改Running属性区分桌面/移动Chrome测试

方案1：零扩展代码，用spec reporter内置渲染配置实现（推荐） #

这是改动量最小的方案，无需重写整个reporter，直接利用spec reporter官方提供的自定义渲染能力即可：

1. 给两个Chrome的capabilities分别添加独立的自定义标识字段，不要修改webdriver协议要求的原生字段（避免影响浏览器启动）：

// 纯桌面端Chrome配置
{
  browserName: 'chrome',
  // 原有其他能力配置...
  envTag: '桌面端'
}

// 移动端模拟Chrome配置
{
  browserName: 'chrome',
  'goog:chromeOptions': {
    mobileEmulation: { /* 你的移动模拟配置 */ }
  },
  envTag: '移动端模拟'
}

2. 在wdio配置的spec reporter选项中，传入自定义headline渲染逻辑，覆写「Running」行的生成规则：

reporters: [
  ['spec', {
    renderer: {
      headline: (runner) => {
        // 复用原有输出逻辑，仅拼接自定义的环境标识
        return `Running: ${runner.capabilities.browserName} (v${runner.browserVersion}) on ${runner.platform} · ${runner.capabilities.envTag}`
      }
    }
  }]
]

配置完成后，两个实例的「Running」行就会自动携带环境标识，直接区分输出环境。

方案2：兼容旧版本的轻量reporter扩展 #

如果当前使用的WebdriverIO版本不支持内置renderer配置，不需要从零重写spec reporter，只需基于现有spec reporter做最小扩展，覆写需要的输出逻辑即可：

1. 新建custom-spec-reporter.js文件，核心代码仅十余行：

const SpecReporter = require('@wdio/spec-reporter').default

class CustomSpecReporter extends SpecReporter {
  onRunnerStart (runner) {
    // 将自定义环境标识注入到runner的显示元数据中
    runner.displayName = `${runner.capabilities.envTag || ''} Chrome`
    // 复用父类所有现有输出逻辑，不改动原有其他功能
    super.onRunnerStart(runner)
  }
}

module.exports = CustomSpecReporter

2. 在wdio配置中替换原有spec reporter为自定义扩展即可，原有spec reporter的配置项可以完全复用：

const CustomSpecReporter = require('./custom-spec-reporter')

// 配置示例
reporters: [
  [CustomSpecReporter, {
    // 原有spec reporter的配置照常填写
  }]
]

关于之前修改suite title不生效的原因 #

before hook的执行时机，是在reporter已经读取完runner、spec的头部元数据之后，此时对suite title的修改不会反向同步到已经生成的头部输出块（即包含「Running」行的部分），属于执行时机不匹配导致的修改失效。

注意：所有自定义标识请存放在独立的自定义capability字段中，不要修改browserName、browserVersion等webdriver协议识别的原生字段，否则会导致浏览器启动流程异常。

内容的提问来源于stack exchange，提问作者Rogger Fernandes