如何在测试失败时截取屏幕截图？Playwright(JS)简易实现方案问询

Playwright(JS) 本身就提供了非常简便的实现方式，分两种场景说明：

1. 使用官方Playwright Test Runner（最省心） #

Playwright Test 内置了失败自动截图功能，默认就会在测试失败时生成截图，存放在项目根目录的test-results文件夹里。如果需要自定义行为，只需在playwright.config.js里调整配置：

module.exports = {
  use: {
    // 仅在测试失败时截图（默认行为，可显式配置）
    screenshot: 'only-on-failure',
    // 可选：搭配失败时保留视频记录
    video: 'retain-on-failure',
  },
};

screenshot参数的可选值说明：

• 'on'：每一次测试结束都生成截图
• 'only-on-failure'：仅测试失败时截图（默认）
• 'off'：完全关闭自动截图

2. 非Test Runner场景（比如用Jest/Mocha） #

如果是和其他测试框架搭配使用，可以通过监听测试生命周期事件手动实现：

示例（Jest环境） #

在测试文件的afterEach钩子中判断测试状态，失败时截图：

afterEach(async () => {
  const testState = expect.getState();
  // 检查当前测试是否失败
  const isFailed = testState.testResults.some(result => result.failureMessages.length > 0);
  if (isFailed) {
    // 自定义截图存储路径
    await page.screenshot({ path: `failed-screenshots/${Date.now()}-${testState.currentTestName}.png` });
  }
});

另一种方式：监听页面错误 #

直接监听页面的错误事件，触发时截图：

page.on('pageerror', async (error) => {
  await page.screenshot({ path: `error-screenshots/${Date.now()}.png` });
  // 抛出错误不中断测试流程（可选）
  throw error;
});

内容的提问来源于stack exchange，提问作者David Pongo