playwright-visual-regression

用途：本技能用于搭建 Playwright 视觉回归测试，通过内置 toHaveScreenshot() 断言捕获截图、与基线比对（基于 pixelmatch），在视觉差异超过阈值时让测试失败。覆盖基线截图、动态内容遮罩、动画处理、全页与元素级截图、跨浏览器测试（Chromium、Firefox、WebKit），并涉及 VUDA MCP 的 AI 视觉调试与视觉模型分析。\n\n安装：Python 使用 pip install playwright，再执行 playwright install chromium firefox webkit；TypeScript/JavaScript 使用 npm install -D @playwright/test，再执行 npx playwright install chromium firefox webkit。\n\n用法：在测试中调用 expect(page).toHaveScreenshot("homepage.png")，元素级用 expect(locator).toHaveScreenshot("card.png")；通过 mask 传入定位器遮罩时间戳、头像等动态内容。首次运行生成基线，需用 npx playwright test --update-snapshots 生成，基线存放于测试文件旁的 snapshots 目录。可结合 pytest fixture 组织测试，用 @pytest.mark.visual 选择性运行，或用 --grep @visual 筛选用例。阈值选项包括 maxDiffPixels、maxDiffPixelRatio、threshold，可在 playwright.config 中设置 toHaveScreenshot 的 timeout、animations: 'disabled' 及多浏览器/移动端 projects。\n\n适用场景：组件级或元素级视觉回归优先于全页截图；需要跨浏览器与多视口测试；可用 Docker 镜像（如 mcr.microsoft.com/playwright:v1.50.0-noble）保持渲染一致。\n\n限制与注意事项：资料给出简单组件、文本页、含字体全页的阈值参考区间，但具体取值需按项目验证；动态内容必须遮罩以减少噪声；全页截图较慢且更难诊断。其余细节暂未提供。