1. MCP 是什么

MCP（Model Context Protocol） 是 Anthropic 推出的开放协议，让 AI 模型（如 Claude）能安全地与本地/远程工具和数据源交互。可以理解为 AI 的"USB-C 接口"——统一标准，即插即用。

核心架构：Host（客户端）→ Client（协议层）→ Server（工具提供方）

2. 浏览器 MCP 的两种方案

目前主流的浏览器 MCP 自动化测试的适用性对比：

3. 一句话选型

测功能 → Playwright MCP；查问题 → Chrome DevTools MCP。

• 你要验证"用户能不能走完注册流程" → Playwright
• 你要排查"这个页面为什么白屏/加载慢" → Chrome DevTools

两者不互斥，复杂项目可以同时配置，按任务切换调用。

4. 快速上手

Playwright MCP

// claude_desktop_config.json 或 settings.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

核心能力：

• browser_navigate — 导航到 URL
• browser_click — 点击元素（用 ref 标识，非 CSS 选择器）
• browser_snapshot — 获取页面可访问性树快照（轻量、结构化）
• browser_take_screenshot — 截图

Chrome DevTools MCP

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

核心能力：

• take_snapshot — 获取完整 DOM 快照（大量 Token，按需使用）
• list_network_requests — 列出所有网络请求及状态码
• list_console_messages — 获取控制台日志
• performance_start_trace / performance_stop_trace — 性能录制与分析

5. 关键经验

1. Token 就是成本：DevTools MCP 的 snapshot 动辄数千行，一定要让 AI 先想清楚"我要查什么"，再调工具，而非无脑全量抓取。
2. Playwright 用 ref 而非选择器：可访问性快照中的 ref 是 Playwright MCP 的核心——稳定、不受 DOM 结构变化影响，比手写 CSS/XPath 可靠得多。
3. 调试三板斧（DevTools MCP）：截图看面貌 → 网络请求看接口 → 控制台日志看报错，依次递进。
4. 自动化三板斧（Playwright MCP）：快照定位 → 操作执行 → 快照验证，循环往复。