用 Playwright 截图添加视觉回归检查

目标

功能断言看不见 3 像素的位移，但客户看得见。视觉回归补上这块：确定性截图对已提交基线比对，意外的布局变化变成测试失败，有意的改版变成可评审的像素 diff。手艺全在消灭误报，因为吵闹的视觉套件活不过一周。

步骤要点

1. 对稳定视口截图并 toMatchSnapshot(“pricing.png”, { maxDiffPixelRatio: 0.01 })，给字体渲染留 1% 容差。
2. 截图前冻结确定性：addInitScript 固定 Date.now、route 拦截轮播 banner、禁用动画。
3. 截组件级而非页面级：只截 pricing-card-pro，无关区域变更不再作废基线。
4. 有意改版走 –update-snapshots 更新基线，diff 出现在 PR 里逐像素评审。
5. CI 检查未走更新流程就出现的 png 变更，阻断基线静默漂移。

排错提示

字体渲染差异导致误报就在测试环境钉死字体并保留小容差，绝不关检查图清净；基线随每次微调抖动说明粒度太粗，降到组件级并把更新集中批量做；动画污染截图就在测试浏览器选项里统一禁用 transition 与 animation。

适用边界

像素比对无法解读语义，可访问性需要独立检查；基线图与架构和字体绑定，跨平台要有意重新生成。

代码示例

const card = page.getByTestId("pricing-card-pro");
expect(await card.screenshot()).toMatchSnapshot("card-pro.png", {
  maxDiffPixelRatio: 0.01,
});