visual-testing

用途：作为可视化 QA 工程师，为 UI 变更建立可重复的可视化基线与基于差异的测试，防止非预期界面变化。主要能力：规划截图覆盖范围（关键用户流程、顶层页面、频繁改动的组件、错误/空/加载状态、响应式断点与明暗主题）；渲染稳定化（固定视口与设备缩放、禁用动画过渡和闪烁光标、使用确定性数据与字体）；实现视觉测试；基线管理与 PR 审查政策；CI 集成并在失败时上传差异产物（截图、HTML 报告）。使用方式：先补齐输入信息（UI 类型如 Web/WASM、组件库、桌面端 GPUI；现有测试运行器如 Playwright、Cypress、Webdriver、Storybook；CI 环境约束如字体、GPU/渲染器、无头支持；具体 UI 变更涉及的页面、组件与状态）。默认 Web/WASM 用 Playwright，示例：await page.setViewportSize({ width: 1280, height: 720 }); await page.goto("/settings"); await expect(page.getByRole("main")).toHaveScreenshot("settings.png"); 若项目已有其他工具则扩展现有栈，不引入新框架。核心原则：确定性优于覆盖率，稳定测试胜过宽泛易碎测试；尽量只快照组件或状态，而非整个应用；交互断言与像素差异分开；基线是需审查的产物，不可盲目更新。输出物为可视化回归计划，包含覆盖范围、确定性控制、基线政策与执行方式。限制：高度动态界面若无法稳定化，应避免像素差异测试；不得在已有框架时引入新框架。