视觉回归测试

视觉回归测试是一种自动化测试方法，它会对比界面改动前后的截图，以发现意外的视觉差异。

Related workflow terms: 无头浏览器, Playwright.

视觉回归测试如何工作

整个过程按“截图、对比、审阅”的循环进行。首先，为页面、组件或特定视口等每种界面状态截取基准图，代表预期的视觉外观。

代码改动后，再次截取同样的画面。测试工具随后把每张新截图与基准图逐像素对比，或使用感知算法进行比较，并突出显示所有差异。

发现差异后，由人工审阅。有意改动，例如重新设计的按钮或更新后的颜色，经批准后会成为新基准；无意改动，例如元素错位或布局损坏，则会标记为回归问题并退回修复。

这个循环会在 CI/CD 管线中自动运行，在视觉回归到达生产环境前发现问题。

视觉回归测试的应用场景

• 设计系统——确保共享组件库的更新不会破坏多个应用中所用组件的视觉外观。
• 跨浏览器测试——在 Chrome、Firefox、Safari 和 Edge 中截取同一页面，验证各浏览器的渲染一致。
• 响应式布局——对比不同视口宽度下的截图，发现行为异常的布局断点。
• 主题变化——确认深色模式切换、品牌颜色更新或字体改动不会对界面其他部分造成意外影响。
• 无障碍审核——发现代码改动后可能影响可读性、对比度或焦点指示器的视觉变化。

像素差异与感知差异

主要有两种对比方法：像素级差异和感知差异。

像素差异会逐个像素比较图像，任何细小变化都会标出。它很精确，但也容易产生噪声：抗锯齿、亚像素字体渲染和动画时机的轻微不同，都可能造成误报。多数像素差异工具允许设置容差阈值以减少噪声。

感知差异会尝试像人眼一样评估变化。它会忽略视觉上无法察觉的改变，例如相差一个色阶的颜色或文字渲染中的亚像素偏移，只标记人能注意到的差异。这种方法误报较少，但可能遗漏非常细微的回归。

实际使用中，许多团队会先采用带有较小容差的像素差异；随着测试套件扩大、误报疲劳成为问题，再改用感知差异。

最可靠的截图测试套件会配合稳定的固定数据，包括固定字体、确定性数据和已遮盖的动态区域。没有这些约束，团队会逐渐不再信任差异结果，测试也就失去了价值。

常见错误

• 没有稳定动态内容。 时间戳、实时数据、随机内容和广告会在两次截图之间变化，产生误报。应遮盖这些区域或使用模拟数据，保证对比稳定。
• 在不同环境中运行测试。 由于字体渲染、抗锯齿和默认浏览器设置不同，macOS 上的截图会与 Linux 上的截图不同。所有截图都应在相同的容器化环境中运行，以保持一致。
• 容差设置过高。 较高阈值能压制误报，却也会隐藏真正的回归。应从较低容差开始，再根据管线中的实际噪声调整。
• 忽视基准图维护。 界面不断变化，基准图也会过时。应定期审阅和更新，并把基准批准视为需要明确判断的步骤，而不是自动接受所有变化。