视觉基线是什么
视觉基线指界面截图对比测试中作为参照的标准截图：渲染页面与基线逐像素或按容差比对，超过阈值即失败，用于拦截布局错位、样式回归、字体异常等肉眼与断言都难覆盖的问题。质量取决于基线治理——基线要经过评审、随有意改版更新、对动态内容做屏蔽，否则误报会把团队耐心耗尽。
基本信息
| 常用工具 | Playwright 的 toHaveScreenshot、BackstopJS、Percy、Applitools |
|---|---|
| 容差设置 | 像素差异阈值、忽略抗锯齿差异、限定对比区域 |
| 动态处理 | 屏蔽时间、随机头像、动画，或等待界面稳定后再截 |
| 基线评审 | 新截图入库前人工确认差异是否为预期变更 |
| 环境一致 | 固定浏览器版本与操作系统，跨环境渲染差异会引入噪声 |
| 更新流程 | 有意改版走更新命令加评审，禁止随手覆盖基线 |
典型使用场景
- UI 回归：改样式或组件库升级后，批量发现受影响的页面。
- 响应式验证：一套用例多档视口，快速对比断点样式。
- 多语言界面：长文案溢出与截断问题，截图对比最容易暴露。
- 主题切换：暗色模式与品牌换肤的成对基线管理。
- 设计走查：截图差异作为与设计稿评审的客观依据。
误报来源与对策
| 误报来源 | 对策 |
|---|---|
| 字体渲染差异 | 固定运行环境与字体 |
| 动画未停 | 等待动画完成或禁用动画 |
| 动态数据 | 屏蔽区域或使用固定数据 |
| 时间与随机元素 | 冻结时间，固定随机源 |
| 抗锯齿细微差异 | 设置合理容差阈值 |
基线是团队的契约：入库要评审，更新要留痕，否则对比测试会失去公信力。
只截关键页面与关键状态：全站全截图会让维护成本快速失控。
随手更新基线来消灭红灯：视觉回归网被悄悄剪断，样式事故失去拦截。