无法从@wdio/json-reporter的JSON输出生成multiple-cucumber-html-report

1. 替换JSON报告生成器 #

@wdio/json-reporter的输出格式与multiple-cucumber-html-reporter不兼容，直接改用专为Cucumber场景设计的@wdio/cucumber-json-reporter：

• 安装依赖：

  npm install @wdio/cucumber-json-reporter --save-dev
  

• 修改wdio.conf.ts中的reporters配置，替换原有json-reporter：

  reporters: [
    ['cucumber-json', {
      jsonFolder: './reports/json/', // 指定JSON报告输出目录
      language: 'en'
    }]
  ]
  

2. 配置失败步骤自动截图 #

在wdio.conf.ts的afterStep钩子中添加截图逻辑，将截图直接附加到Cucumber测试步骤：

afterStep: async function (step, scenario, { passed }) {
  if (!passed) {
    const screenshot = await browser.takeScreenshot();
    await scenario.attach(Buffer.from(screenshot, 'base64'), 'image/png');
  }
}

3. 调整报告生成脚本适配新格式 #

修改generate-report.ts，确保读取@wdio/cucumber-json-reporter生成的文件：

const report = require('multiple-cucumber-html-reporter');

report.generate({
  jsonDir: './reports/json/', // 与cucumber-json-reporter的输出目录保持一致
  reportPath: './reports/html/',
  displayDuration: true,
  displayReportTime: true,
  metadata: {
    browser: {
      name: 'chrome',
      version: 'latest'
    },
    device: 'Local Machine',
    platform: {
      name: 'Windows',
      version: '11'
    }
  }
});

4. 验证执行流程 #

• 先运行测试生成兼容格式的JSON报告：

  npx wdio run wdio.conf.ts
  

• 再执行报告生成命令：

  ts-node generate-report.ts
  

完成以上配置后，生成的HTML报告会自动包含失败步骤的截图，同时解决格式不兼容问题。

内容的提问来源于stack exchange，提问作者Nishashree J C