背景
最近在做业务页面的功能验证时，需要反复在浏览器里点击、检查状态、截图留档。传统做法要么手写 Playwright/Puppeteer 脚本，要么纯人工点点点。前者成本高、维护麻烦，后者效率低、容易漏。
这次我尝试了一条新路子：通过 **MCP（Model Context Protocol）** 把 Chrome 浏览器交给 AI 直接操作，用自然语言下达测试指令，由 AI 驱动 `chrome-devtools-mcp` 完成整个测试流程。本文记录这次实践的全过程，供想入坑的同学参考。
什么是 chrome-devtools-mcp
`chrome-devtools-mcp` 是 Google 官方开源的一个 MCP Server，它将 Chrome DevTools Protocol（CDP）的能力封装成一组标准工具，暴露给支持 MCP 的 AI 客户端（如 Claude、CodeBuddy 等）。基于 Puppeteer/CDP，为 AI 提供以下能力,核心能力包括：
| 能力类别 | 说明 |
| 页面导航 | 打开 URL、前进后退、等待加载 |
| 元素交互 | 点击、填表单、拖拽、上传文件、按键 |
| 页面感知 | 截图、页面快照（结构化 DOM）、执行 JS |
| 网络分析 | 列出/查看网络请求 |
| 性能分析 | 性能 trace、Lighthouse 审计 |
连接 Chrome 有二种模式：
1. **`--browserUrl`**：连接通过 `--remote-debugging-port=9222` 启动的 Chrome —— ⚠️ Chrome 136+ 出于安全考虑，禁止对默认用户数据目录开启调试端口，需要指定独立的 `--user-data-dir`，登录态无法复用
2. **`--autoConnect`**（Chrome 144+ 新增）：连接正在运行的本地 Chrome，调试通道在浏览器内部通过 `chrome://inspect/#remote-debugging` 开启 —— ✅ 完美匹配需求
我们选择第二种：
1、它支持 `--autoConnect` 模式，可以直接**连接到你当前正在使用的 Chrome 实例**，复用已登录的会话状态，不用折腾 cookie 或重新登录。
2、`--autoConnect` 模式，不是"开箱即连"，需要用户**在 Chrome 里手动开启一次**远程调试（安全设计，防止恶意程序静默接管浏览器）
3、 在 Chrome 地址栏打开 `chrome://inspect/#remote-debugging`，打开 Remote Debugging 开关
环境准备
1、检查node版本npm 版本（chrome-devtools-mcp 需要 Node 20.19+）
node -v # v24.18.0
npm -v # 11.16.0
2、 验证 MCP 服务器可用
npx -y chrome-devtools-mcp@latest --help
3、CodeBuddy 的 MCP 配置支持两级：**项目级**（`.codebuddy/mcp.json`）与**全局级**（`~/.codebuddy/mcp.json`）。两处都写入相同配置：配置内容如下：
```json
{
"command": "cmd",
"args": [
"/c", "npx", "-y", "chrome-devtools-mcp@latest",
"--autoConnect",
"--channel=stable",
"--no-usage-statistics",
"--no-performance-crux"
]
}
参数说明：
- `--autoConnect`：连接正在运行的 Chrome（Chrome 144+），复用当前登录态
- `--channel=stable`：明确使用稳定版 Chrome
- `--no-usage-statistics` / `--no-performance-crux`：关闭遥测与 CrUX 数据上报（可选，内网环境建议加上）
- `-y`：npx 免确认安装
配置好后，AI 就能"看到"并"操控"你屏幕前的浏览器了。
启动验证
完整流程：
1.、以上都配置完成后
2、**确保目标服务在运行**：`npm run serve` 启动 `localhost:8080`，或直接访问项目的地址（前提需要提前登录要验证的系统）
3. **下达测试任务**，例如：
访问 https://demo.ruoyi.vip/index，帮我测试一下AI对话菜单的功能包括：1、添加一个新对话2、对话内容是：帮我整理一些最新AI模型资讯，输出md格式的测试报告。
