作者 modelcontextprotocol · modelcontextprotocol/servers-archived
一个 MCP 里的 Headless Chrome — 导航、截图、点击、填表。比 Playwright 简洁，特别是只需 Chromium 时。
Anthropic 虽然已归档但仍可用的参考 MCP。用 Puppeteer 驱动 Headless Chromium，支持导航、截图、点击、填表、选择、悬停和任意 page.evaluate。不提供无障碍树功能——直接用 CSS 选择器操作。当 Playwright 显得过于复杂时可以用这个。
playwright MCP%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
}
}打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
}
}Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
}
}点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。
{
"mcpServers": {
"puppeteer": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
}
}格式与 Claude Desktop 相同。重启 Windsurf 生效。
{
"mcpServers": [
{
"name": "puppeteer",
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
]
}Continue 使用服务器对象数组，而非映射。
{
"context_servers": {
"puppeteer": {
"command": {
"path": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-puppeteer"
]
}
}
}
}加入 context_servers。Zed 保存后热重载。
claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。
何时使用： 有一份页面列表，需要在某次变更后全部肉眼查看。
结果： 得到一份可用作基准的截图集和差异报告，无需搭建视觉回归测试流程。
puppeteer_evaluate 通过 CSS 隐藏这些元素何时使用： 需要用 20 种不同的输入来测试一个表单，验证输入验证逻辑。
结果： 10 分钟内完成超出 Playwright spec 能覆盖的验证。
puppeteer_navigate 访问新 URL，或者用 puppeteer_fill 显式清空字段（传入空字符串）何时使用： 迁移后或 CMS 更新后 — 损坏的图片很常见且令人尴尬。
结果： 一份具体的损坏图片修复列表，包含每个图片所在的页面。
window.scrollTo(0, document.body.scrollHeight) 滚动页面，然后等待并检查通过重放用户操作路径来复现 Sentry 报告的错误
.checkout-btn 然后填充了 #card-number。在 Puppeteer 中重现并捕获控制台。✓ 已复制| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| puppeteer_navigate | url | 打开或重定向到一个 URL | free |
| puppeteer_screenshot | name, selector?, width?, height? | 捕获整个页面或特定元素 | disk space |
| puppeteer_click | selector | 用 CSS 选择器点击元素 | free |
| puppeteer_fill | selector, value | 在输入框中输入文本 | free |
| puppeteer_select | selector, value | 从 <select> 中选择一个选项 | free |
| puppeteer_hover | selector | 显示只在悬停时出现的菜单或提示 | free |
| puppeteer_evaluate | script | 在页面上下文中运行任意 JS — 作为选择器无法实现的最后手段 | free |
puppeteer_evaluate 以 JSON 格式提取你需要的东西 — 不要截图后再 OCR错误：找不到元素元素还没有渲染。通过 puppeteer_evaluate('await new Promise(r => setTimeout(r, 1000))') 添加短暂等待，或者使用更具体的选择器进行隐式等待。
Chromium 在 Linux/Docker 上启动失败安装依赖：apt-get install -y chromium-browser 或使用预装了所有东西的 Playwright MCP 镜像。
截图是空白的页面还没有加载。导航后，在截图前在轮询循环中等待已知元素：puppeteer_evaluate("document.querySelector('.main') !== null")。
| 替代方案 | 何时用它替代 | 权衡 |
|---|---|---|
| Playwright MCP | 任何严肃的浏览器自动化 — 严格来说更好的选择 | 安装包稍大，但通过无障碍树提供更好的可靠性 |
| Firecrawl MCP | 只需要内容提取，不需要交互 | 托管服务，消耗额度，但能更好地处理反爬虫 |
| browser-tools MCP | 想要检查你自己的真实 Chrome（包含登录会话、扩展程序） | 需要 Chrome 扩展程序；完全不同的使用场景 |