Playwright视觉回归：截图不是越多越好

2025年3月记录，分类「Playwright」。这篇按当时的测试现场整理，重点放在目标、动作和可复用的检查点。

截图边界

视觉回归最怕截图很多但全是噪音。我只对稳定、关键、业务价值高的区域做截图断言。

记录这篇的目的，是让下次遇到同类问题时少走一轮弯路。

基线管理

• 屏蔽时间、头像、广告位和随机数据。
• 基线图按浏览器、分辨率和主题区分。
• UI 需求变更时同步更新基线并留记录。

expect(page.locator('[data-testid="order-card"]')).to_have_screenshot(
    'order-card.png', mask=[page.locator('.timestamp')]
)

降噪

• 截图失败能看出真实 UI 差异。
• 动态区域不会频繁误报。
• 基线更新有评审，不随手覆盖。

这类内容最怕只靠口头传递，所以我会把命令、样本和异常分支一起留下。

适用场景

视觉回归要少而准，截图越多不代表质量越高。后面遇到类似需求，可以先按这个结构跑一遍手工验证，再决定是否自动化。