如何让Playwright Percy测试在快照不匹配时失败？附示例

1. 安装依赖 #

确保项目中已安装必要的Percy与Playwright集成包：

npm install --save-dev @percy/cli @percy/playwright

2. 测试代码配置 #

在Playwright测试文件中，完成快照捕获后，调用percy.waitForSnapshots()等待对比完成，并根据结果判断是否让测试失败：

const { test } = require('@playwright/test');
const percySnapshot = require('@percy/playwright');
const { waitForSnapshots } = require('@percy/cli');

test('页面快照对比测试', async ({ page }) => {
  // 访问目标页面
  await page.goto('https://your-test-page.com');
  
  // 执行页面操作（如点击、输入等）
  await page.click('#some-button');
  
  // 捕获快照
  await percySnapshot(page, '操作后的页面快照');
  
  // 等待所有快照对比完成
  const snapshotResult = await waitForSnapshots();
  
  // 检查对比结果，若存在未匹配的快照则抛出错误
  if (snapshotResult.failures.length > 0) {
    throw new Error(`快照对比失败：共 ${snapshotResult.failures.length} 个快照与基线不匹配`);
  }
});

3. 运行测试的正确命令 #

必须使用percy exec包裹Playwright测试命令，确保Percy能正确处理快照的上传与对比流程：

percy exec -- npx playwright test

关键说明 #

• waitForSnapshots()方法会阻塞测试流程，直到所有快照的对比操作完成
• 当快照与基线存在未被批准的差异时，snapshotResult.failures会包含对应的快照信息，此时主动抛出错误会让Playwright测试标记为失败
• 若希望自动批准所有变更，可在Percy项目设置中开启相关选项，但这会导致测试始终通过，不符合需求，需确保该选项处于关闭状态

内容的提问来源于stack exchange，提问作者Arun Raj