Playwright MCP

基本能力

核心功能

• 快速轻量：使用 Playwright 的无障碍树，而非基于像素的输入。
• LLM友好：无需视觉模型，完全基于结构化数据操作。
• 确定性工具应用：避免基于截图方法的常见模糊性问题。

适用场景

• 网页导航和表单填写
• 结构化内容的数据提取
• 由 LLMs 驱动的自动化测试
• 代理的通用浏览器交互

工具列表

基于快照的交互

• browser_click：点击网页元素
• browser_hover：悬停在网页元素上
• browser_drag：拖放操作
• browser_type：在可编辑元素中输入文本
• browser_select_option：选择下拉选项
• browser_snapshot：捕获当前页面的无障碍快照
• browser_take_screenshot：截取当前页面的截图

基于视觉的交互

• browser_screen_move_mouse：移动鼠标到指定位置
• browser_screen_capture：截取当前页面的截图
• browser_screen_click：点击鼠标左键
• browser_screen_drag：拖拽鼠标左键
• browser_screen_type：输入文本
• browser_press_key：按下键盘按键

标签管理

• browser_tab_list：列出浏览器标签
• browser_tab_new：打开新标签
• browser_tab_select：选择标签
• browser_tab_close：关闭标签

导航

• browser_navigate：导航到指定 URL
• browser_navigate_back：返回上一页
• browser_navigate_forward：前进到下一页

文件和媒体

• browser_file_upload：上传文件
• browser_pdf_save：将页面保存为 PDF

实用工具

• browser_wait：等待指定时间
• browser_close：关闭页面
• browser_install：安装浏览器

常见问题解答

1. 如何运行无头浏览器？
2. 使用 --headless 参数启动服务。
3. 如何在无 DISPLAY 的 Linux 系统上运行？
4. 使用 --port 参数启用 SSE 传输。
5. 如何清除浏览器状态？
6. 删除用户数据目录：%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile（Windows）、~/Library/Caches/ms-playwright/mcp-chrome-profile（macOS）、~/.cache/ms-playwright/mcp-chrome-profile（Linux）。

使用教程

使用依赖

确保已安装 Node.js 和 npm。

安装教程

在 VS Code 中安装

1. 点击以下按钮安装：
2. Install in VS Code

3. Install in VS Code Insiders

4. 或使用 VS Code CLI 安装： ```bash # For VS Code code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

# For VS Code Insiders code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}' ```

直接安装

npx @playwright/mcp@latest

调试方式

1. 运行无头浏览器： bash npx @playwright/mcp@latest --headless

2. 在无 DISPLAY 的 Linux 系统上运行： bash npx @playwright/mcp@latest --port 8931 然后在 MCP 客户端配置中设置 url 为 SSE 端点： js { "mcpServers": { "playwright": { "url": "http://localhost:8931/sse" } } }

3. 使用视觉模式： bash npx @playwright/mcp@latest --vision

许可证

该项目遵循 Apache-2.0 开源许可条款，请参阅 Apache-2.0 了解完整条款。