Playwright MCP Server - Microsoft 官方浏览器自动化工具

Posted on 十月 11, 2025

Playwright MCP Server - Microsoft 官方浏览器自动化工具

Microsoft 官方实现 | Stars: 21600 | TypeScript | Apache-2.0

概述

Playwright MCP Server 是 Microsoft 官方提供的浏览器自动化工具，基于 Model Context Protocol 实现。它采用可访问性树（Accessibility Tree）技术，提供快速、精确的浏览器自动化能力。

与传统基于截图的自动化方案不同，Playwright MCP 使用结构化数据直接操作浏览器，无需视觉模型进行图像识别，实现了更快的响应速度和更高的准确性。该工具已内置于 GitHub Copilot Coding Agent，可以在开发过程中实时验证代码改动的效果。

支持 Chromium、Firefox、WebKit 三大浏览器引擎，提供 20 个核心工具覆盖导航、交互、表单、截图、JavaScript 执行等全方位自动化需求。特别适合 AI 辅助测试、Web 数据采集、表单自动化等场景。

核心特性

✅ Microsoft 官方实现，与 Playwright 深度集成
🚀 基于可访问性树，无需截图和视觉模型
🎯 确定性执行，操作精确可靠
🌐 跨浏览器支持（Chromium、Firefox、WebKit）
🛠️ 20 个核心工具，覆盖全面自动化场景
📊 支持 JavaScript 执行，灵活扩展能力
🔌 内置于 GitHub Copilot，无缝集成开发流程
💻 多 IDE 支持（VS Code、Cursor、Windsurf 等）

工具列表

1. browser_navigate

功能：导航到指定 URL

参数：

url (string, 必需) - 要导航到的网页地址

示例：

1
2
3

{
  "url": "https://example.com"
}

2. browser_navigate_back

功能：返回上一页

参数：无

示例：

{}

3. browser_click

功能：点击页面元素

参数：

element (string, 必需) - 要点击的元素描述
ref (string, 必需) - 元素的精确引用
doubleClick (boolean, 可选) - 是否执行双击操作
button (string, 可选) - 鼠标按钮类型（left/right/middle）
modifiers (array, 可选) - 键盘修饰键（如 Shift, Ctrl）

示例：

{
  "element": "Submit button",
  "ref": "button[type='submit']",
  "doubleClick": false,
  "button": "left"
}

4. browser_type

功能：在可编辑元素中输入文本

参数：

element (string, 必需) - 输入元素的描述
ref (string, 必需) - 元素的精确引用
text (string, 必需) - 要输入的文本内容
submit (boolean, 可选) - 输入后是否提交
slowly (boolean, 可选) - 是否逐字符缓慢输入

示例：

{
  "element": "Search input",
  "ref": "input[name='search']",
  "text": "Playwright automation",
  "submit": true,
  "slowly": false
}

5. browser_fill_form

功能：填充表单的多个字段

参数：

fields (array, 必需) - 表单字段数组，每个字段包含 element、ref 和 value

示例：

{
  "fields": [
    {
      "element": "Username",
      "ref": "input[name='username']",
      "value": "john_doe"
    },
    {
      "element": "Email",
      "ref": "input[name='email']",
      "value": "john@example.com"
    }
  ]
}

6. browser_select_option

功能：在下拉列表中选择选项

参数：

element (string, 必需) - 选择元素的描述
ref (string, 必需) - 元素的精确引用
values (array, 必需) - 要选择的值数组

示例：

{
  "element": "Country selector",
  "ref": "select[name='country']",
  "values": ["US"]
}

7. browser_hover

功能：悬停在指定元素上

参数：

element (string, 必需) - 要悬停的元素描述
ref (string, 必需) - 元素的精确引用

示例：

{
  "element": "Menu item",
  "ref": ".menu-item:first-child"
}

8. browser_drag

功能：执行拖放操作

参数：

startElement (string, 必需) - 起始元素描述
startRef (string, 必需) - 起始元素引用
endElement (string, 必需) - 目标元素描述
endRef (string, 必需) - 目标元素引用

示例：

{
  "startElement": "Draggable item",
  "startRef": ".draggable",
  "endElement": "Drop zone",
  "endRef": ".dropzone"
}

9. browser_press_key

功能：按下键盘按键

参数：

key (string, 必需) - 要按下的键名（如 Enter, Tab, Escape）

示例：

1
2
3

{
  "key": "Enter"
}

10. browser_file_upload

功能：上传文件

参数：

paths (array, 可选) - 要上传的文件路径数组

示例：

1
2
3

{
  "paths": ["/path/to/file1.pdf", "/path/to/file2.jpg"]
}

11. browser_snapshot

功能：获取当前页面的可访问性树快照

参数：无

示例：

{}

12. browser_take_screenshot

功能：截取页面截图

参数：

type (string, 可选) - 图片格式（默认: png）
filename (string, 可选) - 保存截图的文件名
element (string, 可选) - 要截图的元素描述（针对性截图）
ref (string, 可选) - 元素的精确引用
fullPage (boolean, 可选) - 是否截取整个可滚动页面

示例：

{
  "type": "png",
  "filename": "screenshot.png",
  "fullPage": true
}

13. browser_evaluate

功能：在页面或元素上执行 JavaScript 代码

参数：

function (string, 必需) - 要执行的 JavaScript 函数
element (string, 可选) - 执行脚本的元素描述
ref (string, 可选) - 元素的精确引用

示例：

{
  "function": "document.title",
  "element": null,
  "ref": null
}

14. browser_wait_for

功能：等待指定时间或文本出现/消失

参数：

time (number, 可选) - 等待的秒数
text (string, 可选) - 等待出现的文本
textGone (string, 可选) - 等待消失的文本

示例：

1
2
3

{
  "text": "Loading complete"
}

15. browser_handle_dialog

功能：处理浏览器对话框（alert/confirm/prompt）

参数：

accept (boolean, 必需) - 是否接受对话框
promptText (string, 可选) - prompt 对话框的输入文本

示例：

{
  "accept": true,
  "promptText": "User input"
}

16. browser_console_messages

功能：获取浏览器控制台消息

参数：

onlyErrors (boolean, 可选) - 是否只返回错误消息

示例：

1
2
3

{
  "onlyErrors": true
}

17. browser_network_requests

功能：获取页面的网络请求记录

参数：无

示例：

{}

18. browser_resize

功能：调整浏览器窗口大小

参数：

width (number, 必需) - 窗口宽度（像素）
height (number, 必需) - 窗口高度（像素）

示例：

{
  "width": 1920,
  "height": 1080
}

19. browser_close

功能：关闭当前页面

参数：无

示例：

{}

配置方式

Claude Desktop 配置

在 claude_desktop_config.json 中添加：

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

VS Code 配置

在 VS Code 的 MCP 设置中添加：

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

Cursor 配置

在 Cursor 设置中添加相同的配置：

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

NPX 直接使用

1	npx @playwright/mcp@latest

Docker 部署

1
2
3

docker run -it \
  -v /path/to/config:/config \
  playwright-mcp

使用场景

1. AI 辅助端到端测试

自动化生成和执行浏览器测试用例。

示例流程：

使用 browser_navigate 访问测试页面
使用 browser_fill_form 填写表单
使用 browser_click 提交表单
使用 browser_wait_for 等待结果
使用 browser_snapshot 验证页面状态

2. Web 数据采集

高效抓取动态网页数据。

示例流程：

导航到目标网站
处理登录流程（如需要）
执行 JavaScript 提取数据
获取网络请求记录
保存数据到本地

3. 表单自动化

批量填写和提交表单。

示例流程：

读取待填写数据列表
对每条数据执行表单填写
截图保存填写结果
提交并验证成功

4. UI 交互验证

实时验证前端功能实现。

示例流程：

访问开发环境页面
执行交互操作（点击、输入等）
获取控制台消息检查错误
截图对比 UI 变化

5. 网站监控

定期检查网站状态和内容变化。

示例流程：

定时访问目标网站
检查关键元素是否存在
截图保存当前状态
对比历史数据发现变化

6. GitHub Copilot 开发辅助

在代码编写过程中实时验证改动效果。

示例流程：

修改前端代码
自动刷新浏览器页面
执行预定义的交互测试
显示测试结果和错误信息

技术架构

可访问性树技术

1
2
3

网页 DOM → 可访问性树 → 结构化数据 → MCP 工具
                                    ↓
AI 模型 ← 精确的元素引用 ← 语义化的元素描述

与传统方案对比

特性	Playwright MCP	截图方案	Selenium
响应速度	极快	慢	中
准确性	高	中	高
资源占用	低	高	中
视觉理解	不需要	必需	不需要
AI 友好性	高	中	低
确定性	高	低	高

支持的浏览器

Chromium - Chrome、Edge、Brave 等
Firefox - Firefox 浏览器
WebKit - Safari 浏览器引擎

与其他 MCP 服务器对比

特性	Playwright MCP	Puppeteer MCP	Browserbase MCP
官方支持	✅ Microsoft	❌ 社区	✅ Browserbase
可访问性树	✅ 原生支持	❌ 无	✅ 支持
跨浏览器	✅ 三大引擎	❌ 仅 Chromium	✅ 多浏览器
工具数量	20 个	15 个	12 个
GitHub Stars	21600	5000	3200
适用场景	全面自动化	Chrome 专用	云端测试

最佳实践

1. 优化元素选择

// 推荐：使用语义化描述
{
  "element": "Login button",
  "ref": "button[aria-label='Login']"
}

// 避免：使用不稳定的选择器
{
  "element": "Button",
  "ref": "div > div > button:nth-child(3)"
}

2. 合理使用等待

// 推荐：等待特定文本
{
  "text": "Data loaded successfully"
}

// 避免：固定时间等待
{
  "time": 5
}

3. 错误处理

// 在关键操作前获取控制台消息
browser_console_messages({ "onlyErrors": true })

// 执行操作
browser_click({ "element": "Submit", "ref": "button[type='submit']" })

// 再次检查错误
browser_console_messages({ "onlyErrors": true })

4. 性能优化

批量操作：使用 browser_fill_form 而非多次 browser_type
避免全页截图：仅在必要时使用 fullPage: true
复用浏览器实例：避免频繁的 browser_close

常见问题

Q: 如何处理动态加载的内容？

使用 browser_wait_for 等待特定文本或元素出现：

1
2
3

{
  "text": "Content loaded"
}

Q: 如何获取页面数据？

使用 browser_evaluate 执行 JavaScript：

1
2
3

{
  "function": "Array.from(document.querySelectorAll('.item')).map(el => el.textContent)"
}

Q: 如何处理多个标签页？

当前版本主要支持单页面操作。如需多标签页，建议在应用层管理多个浏览器实例。

Q: 性能如何？

导航速度: ~500ms（本地页面）
交互延迟: <100ms
截图耗时: ~200ms（全页）

Q: 支持哪些文件上传？

支持任何本地文件，通过 browser_file_upload 工具指定文件路径数组。

评分详情

维度	评分	说明
功能性	4.8/5.0	工具全面，覆盖主要自动化场景
文档质量	4.7/5.0	官方文档清晰，示例丰富
社区活跃度	4.9/5.0	Microsoft 官方维护，社区活跃
维护状态	4.8/5.0	持续更新，快速响应问题
代码质量	4.5/5.0	TypeScript 实现，代码规范
综合评分	4.7/5.0	优秀的浏览器自动化 MCP 实现

总结

Playwright MCP Server 是 Microsoft 官方提供的专业级浏览器自动化工具，基于可访问性树技术实现快速、精确的 Web 自动化。它将 Playwright 的强大能力与 MCP 协议完美结合，为 AI 辅助开发提供了理想的浏览器自动化解决方案。

推荐指数: ⭐⭐⭐⭐⭐ (5/5)

适合你的情况：

✅ 需要浏览器自动化能力
✅ AI 辅助端到端测试
✅ Web 数据采集和监控
✅ 跨浏览器兼容性测试
✅ GitHub Copilot 集成开发

不适合的情况：

❌ 只需要简单的 HTTP 请求
❌ 需要移动端浏览器支持
❌ 资源极度受限的环境

Playwright MCP Server - Microsoft 官方浏览器自动化工具

概述

核心特性

工具列表

1. browser_navigate

2. browser_navigate_back

3. browser_click

4. browser_type

5. browser_fill_form

6. browser_select_option

7. browser_hover

8. browser_drag

9. browser_press_key

10. browser_file_upload

11. browser_snapshot

12. browser_take_screenshot

13. browser_evaluate

14. browser_wait_for

15. browser_handle_dialog

16. browser_console_messages

17. browser_network_requests

18. browser_resize

19. browser_close

配置方式

Claude Desktop 配置

VS Code 配置

Cursor 配置

NPX 直接使用

Docker 部署

使用场景

1. AI 辅助端到端测试

2. Web 数据采集

3. 表单自动化

4. UI 交互验证

5. 网站监控

6. GitHub Copilot 开发辅助

技术架构

可访问性树技术

与传统方案对比

支持的浏览器

与其他 MCP 服务器对比

最佳实践

1. 优化元素选择

2. 合理使用等待

3. 错误处理

4. 性能优化

常见问题

Q: 如何处理动态加载的内容？

Q: 如何获取页面数据？

Q: 如何处理多个标签页？

Q: 性能如何？

Q: 支持哪些文件上传？

评分详情

总结

相关资源