网页改版前后怎么对比截图？先锁视口和基线，再看真实差异

网页只改了一个按钮，像素差异图却几乎全红，未必说明改版失控。视口宽度差一像素、字体加载时机不同、滚动位置偏了，都会让后面的像素整体错位。

视觉回归的第一原则不是“找不同”，而是先证明两张截图具备可比性。

基线截图要记录采集条件

不要只保存一张 PNG。至少同时记录：

• 页面地址和代码或内容版本；
• 浏览器与操作系统；
• 视口宽高和设备缩放；
• 登录账号、语言和主题；
• 截图时间以及是否等待字体、图片加载完成；
• 滚动位置、弹窗和轮播状态。

涉及用户数据时应使用专门测试账号，并在对外流转前脱敏。生产用户信息不能为了复现方便进入验收包。

两次截图先做到四个一致

视口一致：响应式断点附近只差几像素，布局就可能换列。

内容一致：倒计时、随机推荐、广告和异步列表会自然变化，应冻结测试数据或先从对比范围中排除。

字体一致：字体未加载时浏览器会先用替代字体，文字宽度变化会带动整页重排。

位置一致：整页截图要从同一滚动起点采集，局部截图则要保留足够上下文，不能一张多了标题栏、另一张少了。

选择对比模式，而不是只看一张红图

把基线图和改版图放进图片对比工具：

1. 先用滑块确认页面结构和主体位置；
2. 再用透明叠加观察文字、边框和间距漂移；
3. 最后用像素差异定位细小变化。

若差异图出现整片边缘重影，先检查尺寸与对齐，不要立刻把它登记成缺陷。相关排查可参考像素差异一片红时先统一尺寸和对齐点。

把差异分成三类

类别	例子	处理方式
预期变化	新按钮、改文案、调整间距	与需求逐项核对
环境噪声	字体、时间、动态数据	修正采集条件后重拍
非预期回归	元素错位、被裁、颜色异常	建立缺陷并标出范围

像素相同不代表功能正常。点击、键盘操作、表单校验、可访问性和不同设备仍要另行测试；图片对比只能负责可见外观。

每个问题都保留基线和结果

确认回归后，保存“基线、异常、修复后”三张图，并写明视口、版本和问题编号。多处差异可整理进图片转 PDF 工具形成验收记录，但 PDF 不能替代原始截图和采集条件。

修复后重新从同一条件采集，不要直接在异常截图上涂改后当作通过证据。

现在可以选一个稳定页面，固定视口和数据状态，先采集两张理论上相同的截图，再用图片对比工具验证基线噪声。先知道环境会产生多少自然差异，后续改版验收才不会被假报警牵着走。