截图视觉基线工作流

概述

视觉回归若环境不确定或差异一律自动接受，就会沦为噪声橡皮图章。冻结字体、视口与动画使截图确定、为关键页面与状态建立基线、逐条审阅差异并有意图地接受，再经评审更新基线，才能让测试真正捕获意外变更。

关键步骤

1. 冻结字体、视口与动画以保证确定性。
2. 为关键页面与状态生成基线截图。
3. 审阅每处差异，判定有意变更或回归。
4. 仅经评审更新基线。

验证

• 无代码改动时重跑无差异。
• 有意的样式改动产生符合预期的差异。
• 基线更新有记录。
• 没有静默接受的回归。

决策点

绝不应自动接受变更快照，否则测试将失去意义；宜覆盖关键页面与状态而非全部页面，以免噪声成倍增加。

适用范围

本条目围绕「截图视觉基线工作流」给出可复制的步骤、验证方式与常见问题，适合需要按此流程落地的工程团队。执行时请结合自身上下文调整命令与阈值，并在变更前后留存证据，便于后续复核与回滚。

建议在正式环境落地前先在预发或隔离环境演练一遍，把关键观测指标与负责人一并记录，确保出现异常时能快速定位并恢复。

npx playwright test visual.spec.ts --update-snapshots
# then review the diff before committing baselines