playwright-visual-comparison-screenshot-test

Playwright 视觉对比截图测试指南与说明 1. 测试目的 通过对比当前页面截图与基准截图，检测 UI 变化，确保界面在不同环境或代码变更后保持一致。 2. 前提条件 - 已安装 Playwright（建议使用最新版本） - 已配置测试项目并启用截图功能 - 基准截图已生成并存储在指定目录（通常为 `screenshots/` 或 `golden/`） 3. 基本用法 使用 `expect(page).toHaveScreenshot()` 断言当前页面或元素与基准截图一致： ```javascript await expect(page).toHaveScreenshot('homepage.png'); ``` 可针对特定元素进行截图对比： ```javascript const element = page.locator('#header'); await expect(element).toHaveScreenshot('header.png'); ``` 4. 生成基准截图 首次运行测试时，若基准文件不存在，Playwright 会自动创建。建议在稳定环境下生成基准图，避免因动态内容导致误判。 5. 更新基准截图 当 UI 发生预期变更时，需更新基准图。运行以下命令强制更新所有截图： ```bash npx playwright test --update-snapshots ``` 或仅更新特定测试： ```bash npx playwright test my-test.spec.js --update-snapshots ``` 6. 容差设置 可通过选项设置像素差异容忍度，适用于抗锯齿、字体渲染等微小差异： ```javascript await expect(page).toHaveScreenshot('image.png', { threshold: 0.2 // 允许 20% 的像素差异 }); ``` 7. 处理动态内容 若页面包含时间戳、随机数据等动态元素，建议隐藏或屏蔽后再截图： ```javascript await page.evaluate(() => { document.querySelector('.timestamp').style.visibility = 'hidden'; }); await expect(page).toHaveScreenshot('stable-view.png'); ``` 8. 多设备/分辨率支持 可在不同视口尺寸下进行测试，确保响应式布局正确： ```javascript await page.setViewportSize({ width: 1280, height: 720 }); await expect(page).toHaveScreenshot('desktop.png'); await page.setViewportSize({ width: 375, height: 667 }); await expect(page).toHaveScreenshot('mobile.png'); ``` 9. 失败处理 当截图不匹配时，Playwright 会生成差异图（通常保存在 `test-results/` 目录），便于人工审查是否为预期变更。 10. 最佳实践 - 将基准截图纳入版本控制（如 Git） - 定期审查并清理过时截图 - 避免在高动态页面上使用视觉对比测试 - 结合其他测试类型（如断言、交互测试）提高覆盖率 11. 注意事项 - 不同操作系统或浏览器渲染可能存在细微差异，建议在 CI/CD 环境中统一运行环境 - 字体、缩放比例、GPU 加速等可能影响截图结果，需保持测试环境一致性 通过以上指南，可有效利用 Playwright 的视觉对比功能保障 UI 稳定性。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本

相关资产