用途：通过截图逐像素对比已批准的基线，检测 UI 组件和页面的非预期视觉变化，适用于发现意外界面改动或像素差异。触发词包括检测 UI 变化等。
主要能力：支持 Playwright 视觉对比、Percy、Chromatic、BackstopJS、reg-suit；可跨移动（375px）、平板（768px）、桌面（1280px）、宽屏（1920px）断点捕获；生成高亮变化区域的 diff 图；按阈值判定测试失败；集成 CI，在每次 PR 运行并上传 diff 工件。
必要用法：先扫描组件目录与路由，为每个组件或页面编写视觉测试：导航到组件 URL 或 Storybook 故事，等待网络请求、动画和懒加载图片完成，设置一致视口。截图时使用确定性设置：禁用动画与过渡（* { animation: none !important; transition: none !important; }），用 CSS 遮罩动态内容，可滚动页面用 fullPage: true。对比基线的像素差异阈值建议组件测试 0.1%、整页 0.5%。失败时审查 diff 图，判定为有意变更用 --update-snapshots 更新基线，判定为回归则附 diff 图提交缺陷。首次运行缺少基线时用 --update-snapshots 生成并提交到仓库。
限制与依赖：需安装浏览器自动化工具（Playwright、Puppeteer 或 Cypress），配置视觉回归库，基线截图需提交版本控制或存于云服务；需要一致的渲染环境（Docker 或 CI 固定 OS/字体/GPU）。跨 OS 抗锯齿与字体渲染差异需在 Docker 中固定字体或用阈值容忍亚像素差异；动画导致截图不稳定时注入 prefers-reduced-motion 或在截图前禁用动画；视口不一致时显式设置 setViewportSize 并用 overflow: hidden 隐藏滚动条；时间戳、头像、广告等动态内容需用 mask 选项或 page.evaluate 替换。示例中包含 Playwright 的 toHaveScreenshot 用法和 BackstopJS 场景配置，输出为基线截图、diff 图、通过/失败报告、CI 工件与响应式覆盖矩阵。