qa-testing-visual-regression

该技能用于自动化视觉回归测试与像素级质量保障，确保代码变更不会破坏组件在不同浏览器和设备上的外观。主要能力包括：视觉回归工具与配置（Chromatic 与 Figma/Storybook 集成、Playwright 视觉测试、Percy 云端测试）；跨浏览器与状态测试（Chrome、Firefox、Safari，以及 hover、focus、disabled、active 等视觉状态）；无障碍自动化检查（axe-playwright 违规检测、颜色对比度验证）；性能监控（Lighthouse CI、WebPageTest）；以及 CI/CD 集成（GitHub Actions 配合 Chromatic，PR 上自动运行，出现回归可阻止合并）。用法示例：npm install chromatic --save-dev 后运行 npx chromatic --project-token=<token>；npm install @percy/cli --save-dev 后运行 npx percy storybook；测试中可用 await expect(page.locator('.button-primary')).toHaveScreenshot()。适用场景为组件库、设计系统与前端 UI 的视觉质量把关。限制：资料未提供价格、许可、具体平台支持范围及准确率等信息，部分配置（如对比度计算阈值、CI 密钥）需自行补充。