浏览器自动化 MCP 对比：Playwright MCP vs MCP-Chrome

Guo白给
11 阅读4分钟

浏览器自动化 MCP 对比：Playwright MCP vs MCP-Chrome

本文档对比两款主流的浏览器自动化 MCP 服务器，帮助你选择最适合的工具。

一、项目概览

项目简介开发者
Playwright MCP基于 Playwright 自动化框架的 MCP 服务器，通过可访问性树(Accessibility Tree)实现精准网页操作Microsoft
mcp-chrome通过浏览器扩展控制已有 Chrome 浏览器的 MCP 服务器，可复用用户登录状态hangwin (社区)

二、开源仓库地址

项目GitHub 仓库npm 包
Playwright MCPgithub.com/microsoft/p…@playwright/mcp
mcp-chromegithub.com/hangwin/mcp…mcp-chrome-bridge

三、核心功能对比

功能Playwright MCPmcp-chrome
是否需要浏览器插件❌ 默认不需要✅ 必须安装 Chrome 扩展
浏览器控制方式Playwright 自动化框架Chrome DevTools Protocol + 扩展
浏览器实例启动独立新浏览器控制已打开的浏览器
登录状态独立配置文件（可配置保留）直接使用现有登录状态
支持的浏览器Chrome, Firefox, WebKit, Edge仅 Chrome/Edge
页面快照方式可访问性树（结构化数据）DOM + 截图
无头模式✅ 支持 --headless❌ 需要可见浏览器
启动速度较慢（需启动新进程）较快（复用已有浏览器）
隔离性✅ 高（独立环境）❌ 低（共享用户数据）

四、配置操作指南

4.1 Playwright MCP 配置

基础配置（推荐）
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}
带参数配置
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chrome",
        "--headless",
        "--viewport-size", "1280x720"
      ]
    }
  }
}
常用参数说明
参数说明
--browser <type>浏览器类型：chrome, firefox, webkit, msedge
--headless无头模式运行
--isolated隔离模式，不保存状态
--user-data-dir <path>指定用户数据目录
--storage-state <path>加载存储状态文件
--viewport-size <size>视口大小，如 "1280x720"
--port <port>HTTP/SSE 模式端口
用户配置文件位置
# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile

# macOS
~/Library/Caches/ms-playwright/mcp-chrome-profile

# Linux
~/.cache/ms-playwright/mcp-chrome-profile

4.2 mcp-chrome 配置

步骤 1：安装浏览器扩展
  1. 访问 github.com/hangwin/mcp…
  2. 下载扩展文件或从 Chrome Web Store 安装
  3. 在 Chrome 中启用扩展并授权
步骤 2：安装 Bridge 工具
npm install -g mcp-chrome-bridge
# 或
npx mcp-chrome-bridge
步骤 3：MCP 客户端配置
{
  "mcpServers": {
    "chrome": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}
或使用 STDIO 模式
{
  "mcpServers": {
    "chrome": {
      "command": "npx",
      "args": ["mcp-chrome-bridge"]
    }
  }
}

五、提供的工具对比

Playwright MCP 工具列表

工具功能
browser_navigate导航到 URL
browser_click点击元素
browser_type输入文本
browser_fill_form填写表单
browser_snapshot获取页面快照
browser_take_screenshot截图
browser_evaluate执行 JavaScript
browser_press_key按键操作
browser_select_option选择下拉选项
browser_hover鼠标悬停
browser_drag拖拽操作
browser_file_upload文件上传
browser_tabs标签页管理
browser_pdf_save保存为 PDF (需 --caps=pdf)
browser_close关闭浏览器

mcp-chrome 工具列表

工具功能
navigate导航到 URL
click点击元素
type输入文本
screenshot截图
evaluate执行 JavaScript
get_tabs获取标签页列表
switch_tab切换标签页
close_tab关闭标签页
get_cookies获取 Cookies
set_cookies设置 Cookies

六、优缺点分析

Playwright MCP

✅ 优点

  • 无需安装浏览器插件，开箱即用
  • 支持多种浏览器（Chrome、Firefox、Safari）
  • 基于可访问性树，元素定位精准
  • 完善的隔离机制，适合自动化测试
  • Microsoft 官方维护，更新活跃
  • 丰富的配置选项和工具

❌ 缺点

  • 启动新浏览器有一定延迟
  • 默认不能直接使用已登录账号
  • 资源占用相对较高

mcp-chrome

✅ 优点

  • 直接使用已登录的浏览器会话
  • 启动快，无需等待浏览器启动
  • 可以操作用户已打开的标签页
  • 资源占用低

❌ 缺点

  • 必须安装浏览器扩展
  • 仅支持 Chrome/Edge
  • 隐私安全风险较高
  • 社区维护，更新可能不及时
  • 配置相对复杂

七、使用场景推荐

场景推荐工具
自动化测试✅ Playwright MCP
网页数据采集/爬虫✅ Playwright MCP
需要使用已登录账号操作✅ mcp-chrome
需要支持 Firefox/Safari✅ Playwright MCP
快速原型验证两者皆可
CI/CD 流水线集成✅ Playwright MCP
操作企业内网系统（需登录）✅ mcp-chrome
批量截图/PDF 生成✅ Playwright MCP

八、快速开始示例

Playwright MCP 示例对话

用户: 帮我打开百度，搜索"人工智能"，然后截图

AI 执行:
1. browser_navigate -> https://www.baidu.com
2. browser_type -> 在搜索框输入"人工智能"
3. browser_click -> 点击"百度一下"按钮
4. browser_take_screenshot -> 保存截图

mcp-chrome 示例对话

用户: 帮我在当前浏览器里打开我的 GitHub 主页

AI 执行:
1. navigate -> https://github.com (使用已登录状态)
2. screenshot -> 返回截图

九、总结

维度Playwright MCPmcp-chrome
易用性⭐⭐⭐⭐⭐⭐⭐⭐
功能丰富度⭐⭐⭐⭐⭐⭐⭐⭐
安全性⭐⭐⭐⭐⭐⭐⭐⭐
灵活性⭐⭐⭐⭐⭐⭐⭐⭐⭐
社区活跃度⭐⭐⭐⭐⭐⭐⭐⭐

推荐选择：

  • 如果你是开发者或需要自动化测试 → Playwright MCP
  • 如果你需要操作已登录的网站 → mcp-chrome 或 Playwright MCP 扩展模式

十、参考链接

avatar
文章
阅读
粉丝