SuperAPI AI 工具集

verify-frontend

测试与质量

查看项目

更新于 10-16 06:45

技能介绍

用途:在真实浏览器中端到端验证 UI 改动,而不是仅凭编辑成功或单元测试通过就宣布完成。适用于任何触及渲染 UI 的改动(组件、模板、样式、客户端逻辑),在编排循环中报告 UI 子任务完成前使用;仅类型、测试或文档等无运行时表面的改动可跳过。

主要能力:启动开发服务器并打开受影响页面;直接交互(点击、输入、切换)确认状态变化;调整移动端与桌面端宽度;截取改动前后截图;检查控制台新增错误与警告;检查网络请求失败;在性能相关时运行 Lighthouse 审计并报告分数。

使用方式:按协议逐步执行,任一步失败即修复并从第 1 步重跑,不得交付部分验证结果。若 chrome-devtools MCP 工具被延迟加载,先用一次 ToolSearch 调用加载所需工具集(new_page、navigate_page、take_screenshot、list_console_messages、list_network_requests、resize_page、lighthouse_audit)。基线:改动前启动开发服务器、打开页面、截图并记录控制台错误/警告数;若改动已应用且涉及共享布局或导航,可用 git stash → 截图与控制台计数 → git stash pop 获取真实基线,否则注明基线为事后补录。随后加载页面、交互、截图、执行控制台门禁(相对基线零新增错误或警告)、网络门禁(无新增失败请求)、性能门禁(性能分数相对基线下降超过 5 分视为发现项)。

报告格式:逐步给出带数字的结果,例如渲染、交互、控制台、截图、Lighthouse 各项;失败报告需指明步骤、观测值与预期值,部分验证记为未验证。

限制与注意:优先使用量化检查而非“看起来正常”;浏览器对话框(alert/confirm)会阻塞自动化,不要触发,改用控制台日志;该技能与 rules/verification-protocol.md 组合使用,测试、lint、构建仍照常运行。