视觉回归测试

视觉回归测试是一种自动化测试方法，用于发现用户界面外观上的意外变化。它截取页面或组件的截图，与已确认的基准图像进行比较，并标记出超过设定阈值的差异，供人工审查。

功能测试检查按钮是否能用，视觉测试检查它看起来是否仍然正确：位置、颜色、尺寸、字体和间距都要对。修改一个共享文件中的 CSS，就可能让许多页面的布局发生偏移，视觉测试能在发布前把这些副作用暴露出来。团队通常在持续集成中运行这类测试，常用 Playwright、基于 Cypress 的插件或专门的视觉测试服务。

视觉回归测试的工作原理

1. 在受控浏览器中以固定视口尺寸渲染每个页面或组件。
2. 截取截图，经审查后保存为基准图像。
3. 每次有改动时，在相同条件下重新截图。
4. 将新图像与基准图像比较，生成差异图。
5. 审查者接受预期内的变化并将其作为新的基准，或者修复缺陷。

视觉回归测试的使用场景

• 设计系统和组件库。
• 拥有大量模板的营销网站。
• CSS 或依赖项频繁更新的 Web 应用。
• 在 Chromium、Firefox 和 WebKit 之间进行跨浏览器检查。

像素差异与感知差异

像素差异比较每个位置的颜色值并统计不匹配的数量。这种方法精确，但对抗锯齿和字体渲染很敏感。感知差异（例如基于 SSIM 的比较）按照人眼察觉变化的方式衡量结构和对比度的变化，可以减少误报。许多工具会把像素差异与容差设置和遮罩区域结合使用。

常见错误

• 在一种操作系统上生成基准，却在另一种系统上比较，导致字体渲染不同。
• 截取区域中留有日期、广告或动画。
• 不查看就接受差异，结果把缺陷变成了基准。
• 只测试一种视口尺寸。

总在重复截取同样的页面？

如果不使用测试套件而是手动进行视觉检查，Temposhot 的 Website Capture 可以按固定设备尺寸截取一组网址，Compare Images 可以突出显示两次截图之间的差异。请参阅网页截图自动化。

常见问题

视觉回归测试能取代功能测试吗？

不能。它检查的是外观，行为仍需由功能测试来检查。

如何减少误报？

冻结动态内容，每次运行都使用相同的环境，并遮罩那些本来就会变化的区域。

参考资料

• Playwright 视觉比较
• 维基百科：结构相似性指数

相关资源

• 图片比较：在浏览器中比较两张截图的差异。
• Website Capture 选项：设备和等待设置。
• 运行与结果：查看一次截取的结果。