视觉回归测试

定义

视觉回归测试(Visual Regression Testing)通过对页面或组件的渲染结果截图,与事先批准的基线图像进行比对,自动检测界面上肉眼可见的变化——布局错位、样式丢失、字体异常、元素重叠等传统功能断言难以覆盖的问题。

工作流程

1. 首次运行截取页面快照并经人工确认后存为基线
2. 后续构建重新截图,与基线做像素级或感知级比对
3. 差异高亮呈现,由人判断是缺陷还是预期改版;预期改版则更新基线

技术难点

朴素的像素比对极易误报:抗锯齿、字体渲染、动态内容(时间、广告、动画)都会造成无意义差异。成熟方案采用容差阈值、忽略区域、感知哈希或 AI 视觉比对来降噪,并固定视口、字体与数据以保证截图确定性。

工具

开源有 BackstopJS、Playwright 自带的截图断言、reg-suit 等;商业服务有 Percy(BrowserStack)、Applitools、Chromatic(Storybook 团队)等。

定位

它是 UI 自动化中「功能对但界面坏了」这一盲区的补充手段。