用途:视觉回归测试,通过快照对比发现界面视觉变化,并实现视觉 QA 自动化。
主要能力与工具:Chromatic(Storybook 集成)、Percy(BrowserStack)、Playwright 视觉对比、BackstopJS(开源)。
测试内容:组件状态(默认、悬停、聚焦、禁用、错误、加载);响应式断点(移动端、平板、桌面);深色模式与浅色模式;内容边界情况(空内容、长文本、大量条目)。
策略:在 Storybook 中进行组件级截图(隔离、确定性);页面级截图用于布局验证;阈值允许 0.1% 像素差异(抗锯齿存在差异);CI 集成,阻止未经批准引入视觉变化的 PR。
反模式:测试含动态数据的页面(时间戳、随机内容导致误报);截图分辨率不一致;不测试深色模式;忽略 CI 与本地之间的字体渲染差异。
限制:资料未提供具体安装命令、配置代码、价格或平台支持细节。