Webdriver.IO对接远程Selenium Grid时Allure报告无执行截图

核心问题定位 #

现有afterTest钩子存在两个直接导致截图缺失的问题：

1. browser.takeScreenshot()是异步方法，未加await等待执行完成，远程Grid存在网络延迟时，截图还未返回钩子流程就已结束
2. 仅调用截图方法拿到base64数据后，未主动将数据绑定为Allure测试用例附件，Allure不会自动收集孤立的截图返回值

分步排查&修复 #

• 第一步：修正截图钩子逻辑，主动绑定Allure附件
  首先安装必要依赖（未安装时执行）：

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

  替换原有afterTest配置为以下逻辑，注意异步写法和附件绑定：

  const allureReporter = require('@wdio/allure-reporter').default;
  
  afterTest: async function (test, context, { error, passed }) {
    // 等待截图返回完整base64数据
    const screenshotBuffer = await browser.takeScreenshot();
    // 将截图作为附件添加到当前Allure测试用例
    allureReporter.addAttachment(
      passed ? "用例执行成功截图" : "用例执行失败截图",
      Buffer.from(screenshotBuffer, 'base64'),
      'image/png'
    );
  }
  

  建议失败场景也保留截图，比仅成功截图更便于问题定位

• 第二步：校验Allure Reporter配置
  检查配置文件中reporters字段的Allure配置，确保未禁用截图收集：

  reporters: [
    ['allure', {
      outputDir: 'allure-results',
      // 以下两个配置必须为false，否则会拦截截图附件写入
      disableWebdriverScreenshotsReporting: false,
      disableMochaHooks: false
    }]
  ]
  

• 第三步：排查远程Selenium Grid侧异常

  • 检查Grid节点的浏览器启动参数，确认未添加--disable-screenshots类禁用截图的启动flag，无头模式下需使用官方支持的--headless=new（Chrome）/--headless（Firefox）参数
  • 开启WDIO debug日志，确认执行截图方法后拿到非空的base64返回值：如果返回为空，直接调用Grid的截图接口验证节点截图能力，排查节点权限、浏览器版本兼容问题
  • 确认Grid Hub、节点与测试执行机之间的网络无代理、网关拦截大体积base64响应，避免截图数据传输中断

• 第四步：校验Allure报告生成流程

  • 每次执行测试前，清空旧的allure-results目录，避免历史无截图的测试结果混入新报告
  • 生成报告时添加--clean参数强制清理旧报告缓存，命令参考：

    allure generate allure-results --clean -o allure-report
    

  • 检查执行测试的进程对allure-results目录有写入权限，可进入目录查看对应测试用例的结果文件夹，是否存在.png后缀的附件文件：如果附件存在但报告不显示，为报告生成步骤缓存问题；如果附件不存在，回到前序步骤排查钩子、配置、Grid链路问题

内容的提问来源于stack exchange，提问作者Ramkrishna Bhandare