用途：该技能面向视觉回归测试，帮助在功能测试之外捕捉页面或组件的视觉变化，例如全局 CSS 改动意外破坏结账页布局、响应式设计回归、跨浏览器渲染差异，以及组件库变更影响下游 UI。
主要能力：
- 截图对比与像素差异检测；
- 组件级、页面级与交互态（如弹窗、下拉、悬停）视觉测试；
- 多视口响应式测试与跨浏览器测试；
- 动态内容遮罩、差异阈值配置与基线管理；
- 与 CI 集成，在 PR 阶段发现视觉回归。
涉及工具与用法（资料示例）：
- Playwright 内置视觉快照：await expect(page).toHaveScreenshot('homepage.png')；首次运行 npx playwright test --update-snapshots 创建基线，之后 npx playwright test 比对；可在配置中设置 maxDiffPixels 或 maxDiffPixelRatio，并通过 mask 遮罩动态内容。
- Percy：npm install --save-dev @percy/playwright，使用 percySnapshot(page, 'Homepage')，运行 PERCY_TOKEN=your_token npx percy exec -- npx playwright test；配置 .percy.yml 指定宽度等。
- Chromatic：npm install --save-dev chromatic，npx chromatic --project-token=your_token，与 Storybook 集成自动捕获组件状态。
- BackstopJS：以 JSON 配置场景与视口，命令包括 backstop reference、backstop test、backstop approve。
适用场景：设计系统组件、关键用户流程（首页、结账、登录）、需审查视觉变更的前端项目，以及邮件模板、PDF、A/B 变体等视觉输出。
限制与注意：视觉测试较慢且占用存储，应优先覆盖关键路径；动画、懒加载、字体与平台差异易导致不稳定，需等待稳定、禁用动画并遮罩动态区域；基线更新需先审查差异，避免误批非预期变化。费用、平台细节等资料未明确提供的部分暂未提供。