浏览器控制类 MCP 工具
浏览器类 MCP Server 让 AI 能够直接操控浏览器：打开网页、点击按钮、填写表单、截取截图、提取页面内容。这是实现网页自动化和信息采集工作流的关键工具。
两大主流方案对比
| 维度 | Puppeteer MCP（官方） | Playwright MCP（社区） |
|---|---|---|
| 维护方 | Anthropic 官方 | 社区（mcp-playwright） |
| 底层引擎 | Puppeteer（Chrome/Chromium） | Playwright（Chrome/Firefox/WebKit） |
| 多浏览器支持 | ❌ 仅 Chromium | ✅ 三大引擎 |
| 工具丰富度 | 基础（navigate/screenshot/click） | 更丰富（包含等待、拦截网络） |
| 稳定性 | 官方维护，稳定 | 社区维护，更新频繁 |
| 适用场景 | 快速入门、简单抓取 | 复杂交互、SPA 应用 |
| 安装复杂度 | 低 | 中等（需要安装 Playwright 浏览器） |
推荐：初次使用从官方 Puppeteer MCP 开始；有复杂需求再切换到 Playwright MCP。
官方 Puppeteer MCP Server
安装
npm install -g @modelcontextprotocol/server-puppeteer
配置
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
}
}
}
可用工具
| 工具名 | 参数 | 说明 |
|---|---|---|
puppeteer_navigate | url | 导航到指定 URL |
puppeteer_screenshot | name, selector（可选） | 全页或元素截图 |
puppeteer_click | selector | 点击元素 |
puppeteer_fill | selector, value | 填写输入框 |
puppeteer_select | selector, value | 选择下拉选项 |
puppeteer_hover | selector | 鼠标悬停 |
puppeteer_evaluate | script | 在页面执行 JavaScript |
典型用法示例
提示：打开 https://example.com/login，填入用户名 admin、
密码 test123，点击登录，截图确认登录成功
Claude 的调用序列：
1. puppeteer_navigate(url="https://example.com/login")
2. puppeteer_fill(selector="#username", value="admin")
3. puppeteer_fill(selector="#password", value="test123")
4. puppeteer_click(selector="button[type=submit]")
5. puppeteer_screenshot(name="login_result")
Playwright MCP Server
安装
# 安装社区 Playwright MCP
npm install -g @playwright/mcp
# 安装 Playwright 浏览器（首次运行）
npx playwright install chromium
配置
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp",
"--browser", "chromium",
"--headless"
]
}
}
}
参数说明：
- --browser：chromium / firefox / webkit
- --headless：无头模式（生产环境推荐），省略则显示浏览器窗口
- --viewport：可选，指定视口大小，如 1920x1080
Brave Search MCP（网络搜索）
当需要实时网络信息时，Puppeteer/Playwright 之外还有更轻量的选择：Brave Search MCP。
npm install -g @modelcontextprotocol/server-brave-search
{
"mcpServers": {
"brave-search": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-brave-search"],
"env": {
"BRAVE_API_KEY": "your-brave-api-key"
}
}
}
}
Brave Search API 提供免费层（每月 2000 次搜索），申请地址：
api.search.brave.com
| 工具名 | 说明 |
|---|---|
brave_web_search | 搜索网页，返回标题、URL 和摘要 |
brave_local_search | 搜索本地商户信息 |
浏览器 MCP 的使用边界
常见问题
Q：浏览器 MCP 能处理需要登录的网站吗？
A：可以，但需要每次手动登录或提供 Cookie。生产级方案建议用持久化 profile（--user-data-dir 参数）保存登录状态。
Q：为什么截图工具只看到空白页面？
A：通常是 SPA 页面还没渲染完成。在截图前加一步 puppeteer_evaluate("() => new Promise(r => setTimeout(r, 2000))") 等待渲染。
Q：headless 模式下某些网站拒绝访问？
A：部分网站检测 headless 特征。可以尝试去掉 --headless 参数使用有头模式，或配置更真实的 User-Agent。
本节执行清单
- [ ] 安装官方 Puppeteer MCP Server 并完成基本配置
- [ ] 测试 navigate + screenshot 基本流程
- [ ] 如需复杂交互，评估是否需要切换到 Playwright MCP
- [ ] 如需网络搜索，申请 Brave Search API key 并配置