如何在WebdriverIO中集成配置mochawesome报告生成器

第一步：修正 wdio.config.js 配置 #

原有配置错误点：

• 单独定义的mochawesomeOpts不会被识别，wdio-mochawesome-reporter v4+的所有配置项需直接写入reporter的options对象内
• marge参数格式错误，需使用对象格式而非字符串

修正后的配置如下：

reporters: [
  'dot',
  ['mochawesome', {
    outputDir: './Results',
    reportTitle: 'My Custom Title',
    showPassed: false,
    // 截图相关配置直接写在此处
    includeScreenshots: true,
    screenshotUseRelativePath: true,
    // marge配置使用对象格式
    marge: {
      saveHtml: true,
      reportDir: './Report',
      reportFilename: 'Test_Report'
    }
  }]
],
// 删掉原有单独定义的mochawesomeOpts块，无需保留

第二步：修正 package.json 配置 #

原有配置错误点：

• test命令未执行wdio测试，直接返回错误退出
• generateMochawesome命令参数格式错误，marge不需要加--reporter-options前缀
• 冗余依赖可能导致版本冲突，可删除mocha-simple-html-reporter、mochawesome-screenshots，wdio-mochawesome-reporter已自带相关功能

修正后的scripts部分如下：

"scripts": {
  "test": "wdio run ./wdio.config.js",
  "generateMochawesome": "marge ./Results/*.json --reportDir ./Report --reportFilename Test_Report"
},

第三步：执行验证 #

• 运行npm test执行测试，会在./Results目录下生成mochawesome的JSON结果文件
• 运行npm run generateMochawesome即可在./Report目录下生成最终的HTML测试报告

可选优化：测试完成自动生成报告 #

在wdio.config.js中添加onComplete钩子，无需手动执行生成报告命令：

onComplete: function (exitCode, config, capabilities, results) {
  const merge = require('mochawesome-merge')
  const generator = require('mochawesome-report-generator')
  merge({ files: ['./Results/*.json'] }).then(report => {
    generator.create(report, {
      reportDir: './Report',
      reportFilename: 'Test_Report',
      saveHtml: true
    })
  })
}

内容的提问来源于stack exchange，提问作者Vijay Rajendran