Playwright MCP 教程

按 microsoft/playwright-mcp README 走一遍。跑通标准：MCP 已接上，新对话里 Agent 能打开一个公开页并按无障碍树点击。需要 Node 18+。

本机已执行 npx @playwright/mcp@latest --help。没有写入你的 Cursor MCP。

1. 标准配置

官方 Standard config，在 Cursor MCP 设置里粘贴：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Claude Code：claude mcp add playwright npx @playwright/mcp@latest。

本机 --help 开头能看到 --browser、--headless、--cdp-endpoint：

2. 新开对话再点页面

让 Agent 打开一个公开页（例如 https://example.com），按快照里的 ref 点、填、抽文本。旧对话读不到刚加的 MCP。

3. 和 CLI Skills 怎么选

官方：编码 Agent 更适合 Playwright CLI + SKILLS；MCP 适合要持续盯页面结构的自动化。要复用已登录标签，装 Playwright 的 Chrome 扩展再连（README 的 extension 模式）。

4. 翻车点

这是无障碍树，不是截图层。深度看 Network / 性能用 Chrome DevTools MCP。默认是独立浏览器配置，不是你正在用的那个窗口。

出处：README