/ 目錄 / 演練場 / Playwright
● 官方 microsoft ⚡ 即開即用

Playwright

作者 microsoft · microsoft/playwright-mcp

透過無障礙樹狀結構驅動真實瀏覽器 — Claude 看到的是結構化頁面內容,不是像素,所以比截圖型代理更快且更可靠。

Microsoft 官方 Playwright MCP。開啟瀏覽器(Chromium、Firefox、WebKit),瀏覽、點擊、輸入、填寫表單、攔截網路。基於無障礙樹狀結構構建,所以 Claude 可以直接讀取語義內容 — 無需 OCR。

為什麼要用

核心特性

即時演示

實際使用效果

playwright.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "playwright",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add playwright -- npx -y @playwright/mcp@latest

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Playwright

在 60 秒內煙霧測試生產部署

👤 DevOps 工程師、發布經理 ⏱ ~5 min intermediate

何時使用: 你剛發布了部署,想在宣告成功前快速檢查核心使用者流程是否仍然正常。

前置條件
  • 測試帳號認證(使用專用 QA 帳號,不要用真實使用者帳號) — 存放在環境變數或直接放在提示詞裡
步驟
  1. 開啟首頁並驗證其載入
    開啟 https://app.example.com。驗證頁面返回 200、H1 顯示 'Welcome',且登入按鈕可見。✓ 已複製
    → 通過/失敗,失敗時附帶截圖
  2. 執行登入 → 核心動作 → 登出流程
    [email protected] / [密碼] 登入。建立名為 'smoke-test-<timestamp>' 的新專案。然後刪除它。然後登出。✓ 已複製
    → 每個步驟都成功;如果任何步驟失敗,附帶截圖 + DOM 轉儲
  3. 診斷任何失敗
    如果某個步驟失敗,擷取頁面快照並告訴我與工作中基準版本的差異。✓ 已複製
    → 導致故障的特定元素或網路請求

結果: 在一分鐘內對你的部署充滿信心(或快速警覺),無需完整的 E2E 套件。

注意事項
  • 硬編碼的測試資料累積並污染生產環境 — 始終在測試資料中使用唯一的時間戳記,並在流程結束時清理
  • 瀏覽器工作階段在運行之間持續存在,隱藏需要乾淨狀態的錯誤 — 使用 --browser-context: incognito 執行或在運行之間清除 Cookie
搭配使用: sentry

在 5 個視窗寬度審計你的網站並報告損壞

👤 前端工程師、設計師 ⏱ ~15 min intermediate

何時使用: 在發布行銷網站或產品頁面前,你想驗證它在常見寬度下不會損壞。

步驟
  1. 在 5 個視窗寬度(320、375、768、1024、1440)開啟頁面
    在視窗 320×568、375×812、768×1024、1024×768、1440×900 開啟 https://example.com。擷取每一個的全頁截圖。✓ 已複製
    → 已保存 5 張截圖
  2. 在每個寬度偵測水平溢出
    對於每個視窗,列出任何 scrollWidth > viewportWidth 的元素。這些會導致水平滾動且感覺損壞。✓ 已複製
    → 每個視窗的違規 CSS 選擇器清單
  3. 建議修正
    對於每個溢出元素,取得其計算的 CSS 並建議最小的修正(可能是 max-width、overflow-wrap 或斷點調整)。✓ 已複製
    → 每個元素的可執行差異

結果: 一個優先級排序的修正清單,具有特定選擇器,適合作為單一 PR 提交。

注意事項
  • 真實使用者有滾動條(Windows 上為 15px),無界面瀏覽器預設不模擬 — 使用 --browser=chromium 和 --browser=webkit 兩者測試;寬度比你想的更重要
搭配使用: chrome-devtools · filesystem

爬取需要認證的資料

👤 資料分析師、研究人員 ⏱ ~20 min advanced

何時使用: 你需要的資料位於登入後面(你自己的管理儀表板、內部報告等),基本爬蟲無法到達。

前置條件
  • 目標的有效認證 — 使用服務帳號,永遠不要用個人帳號
步驟
  1. 登入
    開啟 https://target.example.com/login。將電子郵件欄位填入 [email],密碼欄位填入 [password]。提交。✓ 已複製
    → 確認工作階段 — 登陸到儀表板 URL
  2. 瀏覽至資料頁面
    點擊進入報告部分。等待資料表呈現。✓ 已複製
    → 表格在 DOM 中可見
  3. 提取資料
    讀取報告表的每一行。以 JSON 格式返回,每列作為一個鍵。✓ 已複製
    → 完整資料集為 JSON

結果: 你用簡單 HTTP 爬蟲無法獲得的結構化資料,準備好放入試算表或資料庫。

注意事項
  • 多因素認證已啟用並中斷流程 — 如果服務支援,設定應用程式專用密碼,或改用長期有效的 API 權杖
  • 多次登入後出現驗證碼 — 使用持續的瀏覽器環境(--user-data-dir),以便 Cookie 被重複使用,你不會觸發驗證碼閘道
搭配使用: postgres · filesystem

組合

與其他 MCP 搭配,撬動十倍槓桿

playwright + filesystem

爬取網站,將每個頁面的內容保存到磁碟以進行離線 RAG

從 /api 開始爬取 docs.stripe.com,將每個頁面另存為 ./knowledge/stripe/{path}.md 下的 Markdown 檔案。✓ 已複製
playwright + chrome-devtools

在一個流程中進行性能 + 功能測試 — 驗證頁面載入正確且快速

開啟我的登陸頁面。驗證 H1,然後擷取 Lighthouse 追蹤並告訴我 LCP 是否低於 2 秒。✓ 已複製
playwright + sentry

透過重放使用者麵包屑在 Sentry 中再現報告的生產錯誤

Sentry 問題 WEB-3a91 說使用者點擊了 X 然後 Y 然後崩潰。在 Playwright 中重現該確切序列並確認。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
browser_navigate url: str 瀏覽至 URL — 任何流程的第一個動作 1 page load
browser_snapshot 取得所有互動元素(連結、按鈕、輸入框)的結構化視圖 free
browser_click ref: str (from snapshot) | selector: str 點擊由快照參考或 CSS 選擇器識別的元素 free
browser_type ref, text, submit?: bool 填寫輸入欄位;使用 submit:true 也會按 Enter free
browser_screenshot fullPage?: bool, path?: str 擷取視覺證據 — 偵錯或審計 disk space
browser_evaluate script: str 在頁面環境中執行任意 JS — 謹慎使用,優先使用特定工具 free
browser_network_requests 檢視頁面載入的內容;用於尋找隱藏 API 端點很有用 free

成本與限制

運行它的成本

API 配額
免費 — 在本機執行,只佔用你的機器資源
每次呼叫 Token 數
快照根據頁面複雜性而定為 500-3000 個權杖
費用
免費。瀏覽器二進制檔案下載一次(~300MB Chromium)。
提示
使用 browser_snapshot 而不是截圖 — 權杖便宜 100 倍,Claude 更易於執行。

安全

權限、密鑰、影響範圍

憑證儲存: 透過環境變數傳遞;永遠不要在提示詞中放入真實生產認證
資料出站: 瀏覽器連線到你瀏覽的任何 URL。無向 Microsoft 發送遙測。

故障排查

常見錯誤與修復

找不到元素 / 逾時錯誤

頁面尚未完成呈現。在動作前新增明確的等待:browser_wait_for(selector)browser_wait_for(text='...')

驗證: 先擷取快照以查看頁面上實際的內容
瀏覽器在 Linux 上啟動失敗

安裝 OS 相依性:npx playwright install-deps。Docker 中常見 — 使用官方 Playwright 映像作為基礎。

驗證: playwright --version
所有瀏覽都以 net::ERR_* 失敗

網路沙箱問題。如果在 Docker 中,使用 --no-sandbox 執行,或檢查你的防火牆 / Proxy。

網站偵測自動化並顯示驗證碼

使用 --browser-type=firefox(比無界面 Chromium 更難被偵測),或在適當時執行有界面模式。某些網站刻意抵抗機器人 — 尊重這一點。

替代方案

Playwright 對比其他方案

替代方案何時用它替代權衡
puppeteer MCP你只需要 Chromium 且想要稍微簡單的 API僅 Chromium;沒有 Firefox/WebKit;現在社群較小
Firecrawl MCP你只需要提取內容,不需要與頁面互動託管(消耗點數)但零基礎設施;無法點擊流程
Browserbase MCP你需要從無伺服器環境(無本機瀏覽器)執行瀏覽器自動化託管服務,按分鐘計價;非常適合生產代理

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills