如何在WebdriverIO的Allure测试报告中集成并正确展示测试截图

问题原因 #

你之前的两种写法都没有把截图绑定到Allure报告的关联体系中：

• 第一种afterStep钩子调用browser.takeScreenshot()只返回截图的base64编码，你没有对返回值做后续处理，既不会生成本地文件也不会同步到Allure
• 第二种afterTest钩子虽然用browser.saveScreenshot()生成了本地文件，但Allure不会自动扫描项目根目录的图片文件，需要你主动将截图作为附件绑定到对应测试用例

前置依赖 #

首先确认你已经在项目中安装了Allure报告依赖：

npm install @wdio/allure-reporter --save-dev

并且在wdio.conf.js的reporters配置项中已经开启了Allure报告：

reporters: [['allure', {
    outputDir: 'allure-results',
    disableWebdriverStepsReporting: true,
    disableWebdriverScreenshotsReporting: false,
}]],

正确实现代码 #

首先在wdio.conf.js顶部引入Allure报告工具：

const allureReporter = require('@wdio/allure-reporter').default;

方案1：每步执行后截图（afterStep钩子） #

afterStep: function (test, scenario, { error, duration, passed }) {
  // 按你的需求调整条件，当前为无错误时截图
  if (!error) {
    // takeScreenshot返回base64格式的截图内容
    const screenshot = browser.takeScreenshot();
    // 将截图作为附件添加到Allure报告
    allureReporter.addAttachment(
      `步骤截图_${scenario.name}_${Date.now()}`, // 附件名称，避免重复
      Buffer.from(screenshot, 'base64'), // 转成Buffer格式
      'image/png' // 附件类型
    );
  }
}

方案2：测试结束后截图（afterTest钩子） #

afterTest: function (test, scenario, { error, duration, passed }) {
  if (!error) {
    const screenshot = browser.takeScreenshot();
    allureReporter.addAttachment(
      `测试用例结束截图_${test.title}_${Date.now()}`,
      Buffer.from(screenshot, 'base64'),
      'image/png'
    );
    // 如果需要同时保留本地副本，可以再加一行saveScreenshot，路径自定义避免覆盖
    // browser.saveScreenshot(`./screenshots/${test.title}_${Date.now()}.png`)
  }
}

注意事项 #

• 附件名称建议加时间戳或者唯一标识，避免重名覆盖导致报告加载异常
• 如果需要仅在测试失败时截图，将判断条件修改为if (error)即可
• 生成报告时执行allure generate allure-results -o allure-report --clean，Allure会自动将所有附件打包到报告目录中，直接打开allure-report/index.html即可看到截图

内容的提问来源于stack exchange，提问作者damian-sketch