[JS/TS] 谷歌CDP MCP工具：AI驱动自动化浏览器测试，提升前端与设计走查效率

谷歌的 Chrome DevTools MCP（Model Context Protocol）工具在提升前端测试效率方面表现突出，它为 AI 驱动的自动化测试开辟了新的可能性。简单来说，它能让你设定的 AI Agent 自动打开浏览器，执行设计走查和交互测试任务。

如果你能提供设计稿，这套工具的自动设计走查功能会变得更加精准。如果再结合现有的设计系统，基本上可以实现一次 UI 生成，配合多次自动化走查，就能高效完成界面和交互的验证，极大减少了人工干预的需求。

安装配置后，你的 Agent 能够利用集成的 Puppeteer 能力，自动化执行点击、输入文本、拖拽元素、页面导航、表单填写乃至文件上传等一系列前端测试操作。

此外，它还能捕获网络请求、控制视口与模拟不同设备、执行自定义脚本、抓取浏览器控制台日志、进行页面截图、获取 DOM 快照，并通过性能追踪与 Lighthouse 审计来深入分析网页性能及内存使用情况，这为全面的自动化测试提供了强大支持。

在连接方式上，项目默认会启动一个预配置的 Chrome 实例。同时，它也支持通过 --autoConnect、--browser-url 参数或 WebSocket 连接到已有的浏览器实例。这个特性非常实用，方便在人工手动测试和 AI 代理自动化测试之间共享登录状态和页面上下文，避免了重复登录等繁琐操作。

对于更轻量级的任务，它还提供了一个“slim”模式。该模式仅暴露有限的导航和脚本执行工具，适用于那些只需基础网页浏览功能的简单场景，体现了工具设计的灵活性。

总的来说，通过将浏览器自动化能力封装成 MCP 工具，它为构建AI驱动的智能测试工作流提供了基础设施，让自动化测试的覆盖范围和智能化程度都得到了显著提升。

项目详情与源码地址：github.com/ChromeDevTools/chrome-devtools-mcp