如何在Puppeteer-Jest自动化中使用类Selenium的Extent报告

ExtentReports本身没有和Selenium做强绑定，作为通用测试报告库完全可以直接在Puppeteer技术栈下使用，同时Jest生态也有不少体验对齐的同类报告工具可选，具体方案如下：

直接接入ExtentReports的实现方式 #

Extent官方提供了Node.js版本的npm包，生成的报告样式、功能和你之前在Selenium栈用的版本完全一致，支持步骤记录、截图嵌入、异常栈展示、标签分类，接入步骤：

• 安装依赖：执行命令npm install extentreports --save-dev
• 在Jest配置中指定全局setup/teardown文件，初始化全局Extent报告实例，在beforeEach、afterEach生命周期钩子中绑定当前测试用例的实例，自动记录用例执行状态、错误信息
• 对接Puppeteer能力：用例执行失败时调用page.screenshot()获取截图，通过Extent提供的附件接口嵌入到对应失败用例的报告条目里，和之前Selenium场景下嵌失败截图的逻辑完全一致
• 所有用例执行完成后，在全局afterAll钩子中调用Extent实例的flush()方法，输出最终的HTML报告文件

最简接入代码示例：

// jest-extent-setup.js
const { ExtentReports } = require('extentreports');
// 初始化报告实例，指定输出路径
const extent = new ExtentReports('./test-output/puppeteer-extent-report.html');

beforeEach(() => {
  // 为当前用例创建报告条目
  global.extentTest = extent.createTest(expect.getState().currentTestName);
});

afterEach(async () => {
  const testState = expect.getState();
  if (testState.errors.length) {
    // 失败时嵌入Puppeteer截图
    const failScreenshot = await page.screenshot({ encoding: 'base64' });
    global.extentTest
      .fail(testState.errors[0].message)
      .addScreenCaptureFromBase64String(failScreenshot, '失败场景截图');
  } else {
    global.extentTest.pass('用例执行通过');
  }
});

afterAll(() => {
  // 生成最终报告
  extent.flush();
});

之后在jest.config.js里把这个文件加到setupFilesAfterEach配置项里即可生效。

适配Puppeteer+Jest的同类报告工具 #

如果觉得手动对接Extent需要写的生命周期逻辑偏多，可以选已经和Jest生态做了深度适配的工具，报告体验和Extent对齐，配置成本更低：

• jest-html-reporters：Jest生态中体验最接近Extent的单页HTML报告工具，自带用例筛选、耗时统计、错误栈折叠展示能力，支持嵌入截图、自定义日志附件，不需要手动维护报告实例，只要在配置中声明reporter，失败时把Puppeteer截图路径挂到测试上下文就能自动嵌入报告，适合快速搭建项目
• allure-jest：通用型测试报告框架Allure的Jest适配包，报告能力和Extent同量级，额外支持测试步骤分层、历史执行趋势统计、多维度套件分类，对接Puppeteer时只需要在失败钩子中把截图、操作日志作为附件传入即可，适合长期迭代的中大型自动化项目
• puppeteer-html-reporter：专门面向Puppeteer测试场景的轻量报告工具，内置了Puppeteer操作轨迹监听、失败自动截图逻辑，不需要手动编写截图、步骤记录代码，对接Jest的reporter配置后即可直接生成带操作流、截图、耗时统计的报告，适合轻量快速的测试场景

所有测试报告工具本质都和UI自动化驱动没有强耦合，不管是Selenium、Puppeteer还是其他框架，只要能拿到测试执行状态、对应的日志/截图附件，就能生成符合预期的报告效果，不需要被工具标注的适配场景限制。

内容的提问来源于stack exchange，提问作者Sunny More