视觉回归测试是什么
视觉回归通过截图对比发现样式级变化：首次运行生成基线，之后逐像素或按结构比对；Playwright 提供 toHaveScreenshot，工具生态中也有专门的视觉测试服务。它是「低成本发现意外改动」的手段，但误报治理是前提：动态区域与渲染差异不先处理，基线会长期处于待重建状态。
基本信息
| 基线 | 首次运行生成，人工确认后入库 |
|---|---|
| 比对方式 | 逐像素、阈值容忍或按结构比对 |
| 工具 | Playwright toHaveScreenshot、专业视觉测试服务 |
| 误报来源 | 字体渲染、动画、滚动位置、动态内容 |
| 范围策略 | 先关键页面与稳定区域，再逐步扩大 |
截图断言
截图断言
await expect(page).toHaveScreenshot('home.png', {
// 容忍少量像素差异
maxDiffPixels: 100,
});
// 动态区域先遮盖或掩码：
// await expect(page).toHaveScreenshot({ mask: [page.locator('.time')] });典型使用场景
- 样式重构：验证 CSS 调整只影响目标区域。
- 组件库升级：大面积组件的视觉一致性抽查。
- 多端适配：桌面与移动项目的基线分别维护。
- 主题切换：暗色与亮色主题独立基线。
- 发布门禁：对核心页面做视觉比对，阻止意外改版。
- 基线审查：截图变化时人工确认是预期还是回归。
启用范围建议
| 范围 | 建议 | 理由 |
|---|---|---|
| 核心页面 | 优先启用 | 改版影响面大 |
| 营销活动页 | 暂缓或掩码 | 内容高频变动 |
| 组件库页面 | 按组件矩阵启用 | 一次覆盖多页面 |
字体渲染、动画与滚动位置都会影响结果；先对关键页面与稳定区域启用，把误报压住再扩大范围。
基线随功能迭代更新：更新动作进评审并附带新截图，避免「一键接受」成为习惯。
动态区域用掩码与遮盖处理，比单纯调大差异阈值更可靠。
截图文件与代码同仓管理：基线的变更历史随提交可追溯，评审也能看到差异。