截图对比

截图对比是指检查同一屏幕、页面或窗口的两张截图，找出其中的差异。对比方式可以是视觉对比，即并排显示两张图片、用滑块叠加显示，或以部分透明度混合显示。也可以是计算对比，由软件生成差异图，标出变化的像素，并给出不同像素的数量或比例。

可靠的对比需要输入条件一致。两张图片应具有相同的像素尺寸、缩放比例和裁剪范围。窗口尺寸、Retina 缩放或滚动位置发生变化时，即使内容相同，几乎所有像素也会不同。

人工对比与自动对比

人工对比适合数量少、需要判断的场景，例如判断一次改版是否更易读。自动对比适合数量多、需要重复执行的场景：脚本将每次新截图与已保存的基准图比较，只报告超过阈值的变化。

截图对比的使用场景

• 代码修改后的视觉回归测试。
• 检查竞争对手或自有页面的内容变化。
• 用于设计评审和发布说明的改版前后对比图。
• 确认文档或仪表盘与早期版本一致。

视觉差异比对的步骤

1. 将两张图片对齐到相同尺寸。
2. 逐像素比较颜色值。
3. 忽略低于容差的差异，以消除抗锯齿造成的噪点。
4. 用高亮颜色标记变化的像素，并统计总数。

SSIM 等感知方法比较的是结构和对比度，而非精确的颜色值，因此能减少由微小渲染偏移引起的误报。

截图对比的常见错误

• 对比尺寸或缩放比例不同的图片。
• 画面中保留时钟、广告、轮播或动画。
• 两次截图使用的字体或浏览器版本不同。
• 将容差设得过高，导致真实变化被忽略。

反复截取相同画面？

Temposhot 的 Website Capture 会为每个 URL 保存 Device、Area 和 Wait 设置，因此重复执行时输出的图片可以直接比较。对于屏幕区域，保存的 Custom Area 会保持相同的矩形范围。参见截取选项。

常见问题

差异阈值应设为多少？

取决于页面。从较低的值开始，检查误报，并对动态区域设置遮罩，而不是提高阈值。

不安装任何软件能对比两张截图吗？

可以。Compare Images会在浏览器中高亮显示两张图片的差异。

来源

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

相关资源

• 对比图片：在本地对比两张图片的差异。
• Website Capture 快速入门：批量截取可重复的页面集合。
• 截取来源：保存的自定义区域。