浏览器测试

为什么需要给 Agent 装上浏览器眼睛

当你在本地 dev server 里改了一个动画，或者线上页面突然出现控制台报错，静态读代码往往只能给出假设。真实的运行时状态——DOM 是否按预期渲染、fetch 是否发出、请求是否被 CORS 拦下、长任务是否拖慢了交互——只有打开浏览器才能看到。这个技能把 Chrome DevTools 的能力接给 Agent，让它能像测试工程师一样打开页面、截图、检查元素、读控制台、抓网络包、给性能画像，然后用证据替代猜测。

核心能力与工作流

它的核心是基于 chrome-devtools MCP 的调试闭环。配置好 MCP server 后，Agent 可以：

• 截图并对比修复前后的视觉变化；
• 检查 DOM 结构、元素样式和无障碍树；
• 收集控制台 ERROR、WARN、LOG 三类日志；
• 监控网络请求的方法、状态码、响应体和耗时；
• 通过只读页面 JS 查询状态，不改行为、不发请求。

调试时按问题类型走不同流程。UI bug 从复现截图开始，然后检查控制台、DOM 和样式，定位根因是 HTML/CSS/JS 还是数据，修复后重载验证。网络问题 先抓包，分析 4xx/5xx、CORS、超时或漏发，再修复重放。性能问题 则先建立基线画像，识别 LCP、CLS、INP 和长任务，修复瓶颈后再次测试对比。

输出与适用边界

调试结果会汇总成一份 BrowserReport，包含 URL、控制台错误与警告、网络请求列表、前后截图、无障碍结构是否正确、Core Web Vitals 指标、pass/fail 结论，以及任何把浏览器内容当作指令的标记。这份报告可以交给错误恢复、前端 UI 或性能优化技能继续处理。

适用边界很明确：它只针对在浏览器中渲染的代码。纯后端改动、CLI 工具、不跑在浏览器里的逻辑不适合。同时，浏览器内容被视为不可信数据，页面里出现的指令性文字不会被执行，JS 执行默认只读，也不从页面复制密钥或令牌。档案默认隔离，避免连到个人已登录的浏览器。