SuperAPI AI 工具集

visual-testing

测试与质量

查看项目

更新于 10-15 21:11

技能介绍

用途:该技能专注于通过截图对比检测非预期的 UI 变化,覆盖多视口与多设备配置。视觉缺陷常逃过单元与集成测试,因为后者测行为而非外观;本技能通过将实际渲染输出与已批准的基线对比来补足这一空白。

主要能力:六阶段工作流——PLAN(用 sequential-thinking MCP 分解视觉测试用例与视口配置)、NAVIGATE(将页面置为正确捕获状态)、CAPTURE(多视口截图,可缩放查看细节)、COMPARE(与基线进行像素级差异对比)、REPORT(生成带高亮变化的回归报告)、BASELINE(经批准更新基线或标记回归)。支持 CSS 回归检测、响应式断点验证、组件库视觉测试、设计系统合规检查、跨浏览器渲染对比、动画过渡捕获(GIF)及部署前后对比。

核心原则:基线优先,金标准图像作为事实来源并需显式批准更新;多视口覆盖,至少测试移动/平板/桌面三种,含横竖屏;阈值化对比,默认 0.1% 像素差异容差,动画页面可放宽;元素级缩放用于小元素微回归;GIF 录制捕获动画与交互的时序行为。

必要用法:执行前需做 MCP 预检,验证 sequential-thinking、claude-in-chrome 与 memory-mcp 可用,任一不可用应中止。捕获时按视口逐个 resize_window、等待重排、用 computer 截图或缩放,并用 gif_creator 录制交互。基线存于 memory-mcp,命名空间为 visual-testing/baselines/{project}/{page}/{viewport},按 ISO8601 版本化并保留最近若干版本。

适用场景:部署可能影响多页的 UI 改动、验证响应式断点、确保设计令牌一致应用、对比 staging 与生产外观、记录 UI 状态用于交接。

限制:不适用于无视觉组件的功能测试、简单导航流程、API 或数据验证、性能测试与无障碍审计。文件未提供安装命令、价格、平台支持范围及与其他工具的集成细节,这些事实暂未提供。