视觉回归测试概念

视觉回归测试（VRT）会通过逐像素比较渲染后的屏幕截图，自动检测不同代码版本之间非预期的视觉变化。它可以捕获单元测试完全无法发现的 CSS 回归问题，例如布局偏移、颜色变化和间距损坏。

VRT 会先为组件或页面创建基线截图，然后在代码更改后创建新截图并进行比较。差异会在差异图像中突出显示。开发者会检查差异，并批准有意的更改或修复非预期的回归问题。

像素差异比较会逐像素比较图像，灵敏但容易受到抗锯齿和子像素渲染差异的影响，从而产生误报。结构差异工具（Applitools AI）比较的是视觉意图，而不是完全相同的像素，因此可以减少字体渲染差异造成的误报。

获得批准的截图会成为新的基线。请将基线存储在版本控制系统中（大型图像使用 Git LFS），或存储在专用云服务中。每个 PR 都会显示相对于基线的差异，维护者会在审查过程中批准或拒绝视觉更改。

组件级 VRT 会通过 Storybook 独立测试单个界面组件。页面级 VRT 会在真实浏览器中测试完整页面。组件测试速度更快、目标更明确；页面测试则能发现组件之间集成层面的布局问题。

请测试所有视觉状态：默认、悬停、聚焦、激活、禁用、加载、错误、空内容和完整内容。悬停状态需要使用 JavaScript 进行模拟（Playwright 中的 page.hover()）。状态覆盖不足会为交互状态的回归问题留下盲区。

请在多个浏览器（Chrome、Firefox、Safari）和视口（移动设备、平板电脑、桌面设备）中渲染屏幕截图。浏览器渲染差异可能导致误报，因此请使用各浏览器独立的基线，并配置差异阈值以容许已知的渲染差异。

字体渲染在不同 OS、浏览器和 GPU 组合之间会存在细微差异。请使用一致的持续集成环境（Docker + 特定版本的 Chrome），以消除环境导致的误报。云端 VRT 服务会自动处理环境一致性。

动态内容——时间戳、用户头像、广告和随机数据——会导致误报。请在捕获屏幕截图之前，用纯色覆盖层遮住动态区域。大多数 VRT 工具都支持使用项目选择器进行遮罩。

请在每个 PR 中通过持续集成运行 VRT。检测到未经批准的视觉差异时，应使构建失败。请将视觉差异交给设计审查者，而不仅仅是工程团队处理——视觉变化既是设计问题，也是工程问题。

在组件库和设计系统中，视觉一致性本身就是产品功能，因此 VRT 能带来最高的投资回报。对于经常变化的营销页面，维护基线的成本可能超过捕获回归问题所带来的价值。

为什么字体渲染差异会导致视觉回归测试产生误报？

视觉回归测试通过比较不同代码版本中的屏幕截图，捕获 CSS 和布局回归问题。有效的 VRT 需要一致的环境、充分的状态覆盖、动态内容遮罩，以及能够将差异交给设计评审人员的审查流程——因此它是一种协作式质量工具，而不只是自动化门禁。