Cypress 视觉回归执行器

它解决的问题

UI 的意外变化很少在单元测试里暴露。样式被覆盖、组件间距偏移、图标丢失这类问题，只有看到渲染结果才能发现。传统做法是让测试跑完后人工翻截图，或者在 PR 上肉眼比对，成本高、漏检多，跨浏览器场景下更明显。

它的工作方式

这个技能在 Cypress 已有的截图能力上做了一层自动化的回归比对：

• 使用 cy.screenshot() 在用例执行过程中捕获当前页面的渲染结果
• 把截图与仓库里保存的基准图像做逐像素比对，差异算法基于 pixelmatch
• 集成 Percy SDK，把视觉快照扩展到多个浏览器环境，让差异不局限在本地跑的那几个内核上

整个流程是"跑用例、截图、比对、出报告"，不需要再维护一套独立的视觉测试框架。

适用边界与注意点

• 它假设基准图像已经存在且可信。首次接入时需要先人工确认一批截图，之后任何基准更新都应走评审，否则误报会被当成正常差异吞掉。
• pixelmatch 对抗锯齿和字体渲染差异敏感，CI 机器的字体或操作系统不同可能带来大量假阳性，建议在固定环境里生成基准。
• 它捕捉的是快照时刻的渲染结果，轮播、动画中间态、时间戳这类动态内容会让比对不稳定，需要先用例把页面稳定下来再截图。
• 比对粒度是像素级的，无法判断"按钮偏移 2px 是否合理"，语义层面的设计变更仍需设计师确认。