截图对比

截图对比是指将两张或多张截图并排放置或叠加，以找出不同版本、状态或环境之间的视觉差异。

Related workflow terms: 前后对比截图, 视觉回归测试.

手动对比与自动对比

最简单的截图对比方式是手动查看：并排打开两张图，寻找其中的差异。这种方法适合快速检查，例如对比设计稿和实际上线的页面，或查看界面改动前后的状态。

但手动方法很难应对大规模任务。人眼不容易发现间距、颜色或字体渲染上的细微差别，尤其是要查看许多页面时。而且每次拉取请求或部署都重复这项工作，也难以长期坚持。

自动对比由软件检测差异。工具先截取基准图，再在发生改动后截取新图，然后逐像素比较两者。不同之处会在差异图中突出显示，通常用对比色标出发生变化的像素。即使只偏移了一个像素，也能立即看出来。

截图对比的应用场景

只要视觉一致性很重要，团队就可能使用截图对比：

• QA 与测试——确认代码改动没有在页面、组件或断点上造成意外的视觉回归。
• 设计评审——将已实现的界面与批准的设计文件对比，找出偏差。
• 跨浏览器测试——检查同一页面在 Chrome、Firefox、Safari 和 Edge 中的渲染是否一致。
• 响应式审核——比较同一页面在不同视口宽度下的表现，确认布局行为符合预期。
• 部署验证——在发布前后截图，确认页面没有出现视觉故障。

在这些场景中，对比可以揭示人工检查可能遗漏的差异。

视觉差异检测如何工作

大多数视觉差异检测工具都采用相似的流程：

1. 截取基准图——在指定的视口尺寸和配置下，截取已知正常状态的画面。
2. 截取新版本——使用与基准图相同的参数，截取当前状态的画面。
3. 对齐图像——工具确保两张图的尺寸相同。有些工具能处理轻微的对齐偏移，有些则要求尺寸完全一致。
4. 比较像素——工具遍历两张图中位置对应的像素并计算差异。常见算法包括逐像素比较、感知差异比较（根据人眼敏感度给差异加权）和结构相似性（SSIM）。
5. 生成差异图——用对比色突出显示有变化的像素，让差异一眼可见。

灵敏度阈值通常可以调整。严格的阈值会捕捉每一处亚像素偏移，适合要求像素级精准的设计系统；宽松的阈值会忽略轻微的渲染差异，适合抗锯齿效果可能变化的内容型页面。

可靠的对比流程会把截图条件与图像一起记录下来，包括 URL、视口、浏览器、配色方案和截图日期。没有这些背景信息，差异就更难理解；团队日后回看问题时，也更难复现。

截图对比的常见错误

• 比较视口尺寸不同的图像。 如果基准图的宽度为 1440 px，而新截图为 1280 px，差异检测会标出所有因宽度变化而产生的布局差别。应始终保持截图尺寸一致。
• 使用 JPEG 进行对比。 JPEG 采用有损压缩，每次保存都会引入略有不同的伪影。同一页面的两次截图也可能生成不同的 JPEG，导致误报。应使用 PNG 进行可靠对比。
• 忽略动态内容。 时间戳、广告、动画元素和用户专属数据会在两次截图之间变化，从而触发虚假的差异。对比前应遮盖或排除已知的动态区域。
• 阈值设得过于宽松。 宽松的差异阈值可能把真正的回归问题当作噪声而忽略。应从严格设置开始，只对存在已知变化的区域适当放宽。