用途:用于检测和验证 UI 视觉回归,覆盖组件变更、CSS/样式修改、响应式设计验证和跨浏览器一致性检查。功能性测试无法发现布局位移、颜色变化、字体渲染、对齐、图片缺失、内容溢出等视觉缺陷,该技能专门填补这一空白。
主要能力:先运行建立基线截图,再将新截图与基线按像素或 AI 语义方式对比;可遮罩时间戳、计数、广告、头像等动态内容;支持桌面、平板、手机多视口与多浏览器测试;提供像素差异、结构相似度、AI 语义等对比算法;通过配置 maxDiffPixels、maxDiffPixelRatio、threshold、animations、caret 等参数控制误差容忍度;AI 工具(如 Percy)可忽略抗锯齿和字体微差以减少误报。
使用方式:以 Playwright 为例,使用 expect(page).toHaveScreenshot('homepage.png') 捕获并对比截图,首次运行保存基线,后续运行自动比对;用 mask 遮罩动态元素;用 page.setViewportSize 切换移动端与平板视口;配合 @percy/playwright 的 percySnapshot 做 AI 对比,并可用 scope 指定组件。还可通过 Agent 驱动批量执行多页面、多设备、多浏览器组合,输出对比数量、差异数与 HTML 报告。
适用场景:UI 组件与样式变更验证、响应式与跨浏览器一致性检查、CI/CD 中阻断视觉回归。
限制:需人工审查差异并批准有意变更,不应自动全部通过;动态内容需显式遮罩;AI 工具的收费、价格及具体平台能力资料暂未提供;官方未提供安装命令。