用途:为 UI 变更设计和实现可重复的视觉回归测试,通过建立截图基线与差异比对,防止非预期的界面变化。
主要能力:选择视觉断面(关键用户流程、顶层页面、样式频繁改动的组件、错误/空/加载状态、响应式断点与明暗主题);稳定渲染(固定视口与设备缩放、禁用动画过渡与闪烁光标、使用确定性数据与稳定字体);实现视觉测试并使用截图断言;管理基线与审查策略;集成 CI。
使用方式:需先确认 UI 类型(Web/WASM、组件库、桌面如 GPUI)、现有测试运行器(Playwright/Cypress/Webdriver/Storybook 等)、CI 环境约束(字体、GPU/渲染器、无头支持)以及具体 UI 变更。默认选择:Web/WASM 且已有 Playwright 时用 Playwright,示例:await page.setViewportSize({ width: 1280, height: 720 }); await page.goto("/settings"); await expect(page.getByRole("main")).toHaveScreenshot("settings.png");。若项目已用其他工具(Cypress、Storybook 快照、Percy、Chromatic),应扩展现有工具而非引入新框架。基线存于仓库或审查服务,PR 中审查差异;预期变更需在 PR 明确注明“基线更新”。CI 在触及 UI 代码的 PR 上运行,失败时上传差异产物(截图、HTML 报告)。
核心原则:确定性优先于覆盖率;尽量采用最小稳定断面;交互断言与像素差异分离;基线是需审查的产物,不得盲目更新。
限制:对于高度动态的界面,除非能稳定化,否则避免像素差异比对;已有框架时不要引入新框架。输出格式为视觉回归计划,含覆盖、确定性控制、基线策略与执行四部分。其他细节暂未提供。