作者 modelcontextprotocol · modelcontextprotocol/servers-archived
一個 MCP 搞定無頭 Chrome — 導航、截圖、點擊、填表。只需要 Chromium 時比 Playwright 更簡單。
Anthropic 官方的封存但仍可運作的參考 MCP。透過 Puppeteer 驅動無頭 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 規格測試範疇的驗證覆蓋度。
puppeteer_navigate 導航至新頁面，或對各欄位使用 puppeteer_fill 傳入空字串明確清除何時使用： 遷移後或 CMS 變更後 — 圖片損壞是常見且令人難堪的問題。
結果： 一份具體的損壞圖片修復清單，附帶其所在頁面。
window.scrollTo(0, document.body.scrollHeight) 捲動頁面，等待後再檢查透過重現使用者操作路徑來復現 Sentry 回報的錯誤
.checkout-btn，然後填寫了 #card-number。用 Puppeteer 重現這個操作並擷取主控台輸出。✓ 已複製| 工具 | 輸入參數 | 何時呼叫 | 成本 |
|---|---|---|---|
| puppeteer_navigate | 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 — 不要截圖後再 OCRError: Element not found元素尚未渲染完成。透過 puppeteer_evaluate('await new Promise(r => setTimeout(r, 1000))') 加入短暫等待，或使用能隱式等待的更精確選擇器。
Chromium fails to launch on Linux/Docker安裝相依套件：apt-get install -y chromium-browser，或使用已預先安裝所有相依項目的 Playwright MCP 映像檔。
Screenshots are blank頁面尚未載入完成。導航後，先輪詢等待已知元素出現：puppeteer_evaluate("document.querySelector('.main') !== null")，確認後再截圖。
| 替代方案 | 何時用它替代 | 權衡 |
|---|---|---|
| Playwright MCP | 任何正式的瀏覽器自動化需求 — 絕對更優的選擇 | 安裝檔案略大，但透過無障礙樹提供更好的可靠性 |
| Firecrawl MCP | 只需要內容擷取而不需要互動操作時 | 雲端託管、需消耗點數，但對反爬蟲機制的處理更好 |
| browser-tools MCP | 需要操控你自己的真實 Chrome（含已登入的工作階段、擴充功能） | 需要安裝 Chrome 擴充功能；完全不同的使用情境 |