Puppeteer 可视化回归测试

痛点：肉眼排查 UI 变动有多低效

在现代前端开发中，页面结构往往错综复杂。一次看似无害的代码重构、依赖库升级，甚至是不同浏览器内核的渲染差异，都可能导致页面 CSS 布局错位或关键按钮样式消失。

传统做法依赖开发者人工走查，这在微前端或持续集成（CI）场景下效率极低且极易漏测。我们真正需要的，是一种能自动捕捉这些渲染差异的「视觉回归测试」手段，确保每一次代码合并都不会破坏原有的视觉体验。

核心机制：像素级快照与容差比对

该技能基于 Puppeteer 与 pixelmatch 构建。其工作流非常直接：首先利用无头浏览器截取当前页面渲染状态的基准截图；随后，在后续测试中抓取实时渲染画面，与基线进行像素级的逐一比对。

• 阈值配置：重点在于其可配置的容忍度（threshold）。完全追求零误差在跨平台场景下通常不切实际，允许设定百分比阈值能有效屏蔽部分抗锯齿或微小色差带来的干扰。
• 差异定位：通过 pixelmatch 计算，如果差异像素超出阈值，就能快速生成差异图，直观定位到发生偏移的具体组件区域。

工程实践中的边界

在接入该方案前，需要明确其适用范围。纯异步加载资源（如受网络影响的流媒体或第三方广告）往往会导致测试结果不稳定，建议配置 waitUntil 等待策略或屏蔽无关资源。

此外，当基线库因全局字体或主题规范变更导致大面积失效时，需要系统性地重置基线，而非逐个修补报告。