Playwright MCP

✓ 官方★ 34.987

微软官方的浏览器自动化 MCP 服务器——通过无障碍树（accessibility tree）实现，无需截图或视觉模型。

Playwright MCP 操控一个真实浏览器——但与基于截图的方案不同：该服务器基于 Playwright 的无障碍树（accessibility tree）工作，也就是一个页面的结构化描述（有哪些按钮、链接、表单字段，及其名称和状态）。README 将其优势总结为「Fast and lightweight」「LLM-friendly — no vision models needed, operates purely on structured data」以及「deterministic tool application」——因为智能体是直接定位元素而不是点击坐标，所以不存在「指的是哪个像素」这种歧义。

为此，智能体获得一组浏览器工具：browser_navigate 打开页面，browser_snapshot 以文本形式返回当前的无障碍快照，browser_click 及相关工具与元素交互，browser_tabs 管理多个标签页。额外能力是可选启用的：PDF 导出（browser_pdf_save，通过 --caps=pdf）以及用于特殊场景的基于坐标的鼠标操作（--caps=vision）。网络路由以及 Cookie/LocalStorage 同样可以控制。

支持 Chrome、Firefox、WebKit 和 Microsoft Edge；默认浏览器可见运行（headed），加上 --headless 则不可见运行。唯一前提是 Node.js 18 或更高版本——服务器可直接通过 npx @playwright/mcp@latest 启动，无需长期安装。这样一来，像 Claude Code 这样的智能体就能操作网页、填写表单，并对自己的前端进行端到端点击测试，每一步都会作为可追溯的工具操作被记录下来。

🔧 SETUP

检查前提条件：Node.js 18 或更高版本
在 Claude Code 中注册：`claude mcp add playwright npx @playwright/mcp@latest`
其他 MCP 客户端填入标准配置：`{"mcpServers": {"playwright": {"command": "npx", "args": ["@playwright/mcp@latest"]}}}`
可选启用额外能力：`--caps=pdf`（PDF 导出）或 `--caps=vision`（坐标点击），用 `--headless` 让浏览器不可见运行
测试：让智能体打开一个页面并描述它——它会使用 browser_navigate 和 browser_snapshot

✅ 什么时候用？

对自己的前端进行端到端测试

修改登录表单后：「打开 localhost:3000，用测试数据登录，检查密码错误时是否出现相应错误提示」——智能体会通过无障碍树逐步点击完成测试。

无需视觉模型的结构化网页交互

自动填写一个多步骤表单：智能体以文本快照的形式看到带有名称和角色的字段，并确定性地填写——比截图分析更快、更省成本。

⛔ 什么时候不该用？

像素级视觉检查

无障碍树描述的是结构和状态，而不是外观——布局是否错位、颜色是否正确，标准模式无法察觉。

更好的选择: 如需视觉检查，可启用可选的视觉模式（`--caps=vision`），或使用传统的基于截图的测试。

与自己已登录的浏览器交互

Playwright MCP 会启动自己独立的浏览器实例——日常浏览器中已有的登录状态和会话不会自动出现在其中。

更好的选择: 如果需要在自己已登录的浏览器中操作，更适合使用 Claude in Chrome。