Claude Code 設定 Playwright MCP 並驗證網頁

用 claude mcp add 註冊 Playwright MCP 前，先確定它應該在哪些專案生效。只想在目前專案自己用，選 local。希望隊友審核後共用，選 project。只為自己設定但要跨專案使用，選 user。註冊後分別核對連線狀態和瀏覽器返回的結果。

有位 Claude Code 使用者把 --isolated 放在 Claude 的選項區，收到未知選項錯誤。這個參數要放在分隔符號後面，交給 Playwright。後文用 Tabbit Browser 說明任務需要已登入分頁時怎麼選擇連線方式。原始討論

先記住這幾件事

• 從專案根目錄開始。local 和 project 都和專案綁定，但儲存位置和分享對象不同。

• --scope、--transport 寫在 -- 之前。--headless、--isolated 寫在服務啟動命令後。

• 有設定項目不代表啟動成功。看 claude mcp list 的連線狀態，再核對新工作階段的工具。

• 用公開測試頁做一次可核對的讀取。看到工具的 URL 和標題比只看聊天答案更可靠。

• 按任務選範圍和工作階段。首次驗證用臨時隔離瀏覽器就夠了。

先選設定範圍

預設範圍是 local。它不會在你切換到另一個專案後繼續生效。Anthropic 說明，同名伺服器按 local、project、user 的順序匹配。改了設定卻發現目前項目仍用另一條命令時，先檢查是否存在更高優先級的同名項目。Claude Code MCP 範圍說明

同一個 Playwright 瀏覽器自動化服務 可以接到不同編碼助手。客戶端的外層設定要分別寫。Codex 使用 TOML，可以參照 Codex 的 Playwright MCP 設定。Claude Code 的專案設定是 JSON。

先註冊一套個人測試設定

確認 Claude Code 和 npx 可以在同一終端執行。Playwright 入門檔案要求 Node.js 20 或更新版本。以下命令固定本文驗證過的包版本，打開一個無視窗、臨時狀態的瀏覽器工作階段。Playwright MCP 安裝說明

claude --version
node --version
claude mcp add --scope local --transport stdio playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated
claude mcp list

分隔符號左邊由 Claude 處理。右邊是實際服務命令及參數。如果報 unknown option '--headless'，先核對參數放在了哪一邊。--headless 管視窗是否顯示，--isolated 管本次工作階段用什麼狀態。Anthropic stdio 語法

團隊共用時寫進專案設定

團隊要共用同一個啟動命令，可以在專案根目錄放 .mcp.json，或註冊時選擇 --scope project。隊友能看到會啟動哪個程式、傳哪些參數，並按 Claude Code 的專案核准流程決定是否啓用。令牌和私人路徑不要寫進共用檔案。Claude Code MCP 快速上手

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--headless", "--isolated"]
    }
  }
}

這份設定只規定怎麼啟動工具，帳號和訪問權限仍由瀏覽器工作階段和組織策略決定。如果測試環境需要登入，另外準備獲准的測試帳號和瀏覽器設定。瀏覽器設定和工作區指南 說明瞭瀏覽器設定與分頁各自儲存哪些狀態。

用公開網頁驗證連線

在目前專案新開 Claude Code 工作階段，用 /mcp 找到 Playwright。接著發一個能核對結果的任務，點名 Playwright MCP，避免助手用 shell 或 網路搜尋 代替本次要驗證的連線。

使用 Playwright MCP 打開
https://www.selenium.dev/selenium/web/web-form.html。
從瀏覽器工具結果報告最終 URL 和第一個可見標題。
不填寫或提交內容，讀完就停止。

練習頁面應顯示 Web form。如果導航工具只給出快照檔案路徑，可以再呼叫 browser_snapshot，查看結構化結果中的標題。確認工具執行紀錄、最終 URL 和標題一致，再讓 Agent 點控件。瀏覽器代理原理 解釋了為什麼執行前後都需要觀察頁面狀態。

本次使用 Claude Code 2.1.318、Node.js 22 和 Playwright MCP 0.0.84。在臨時專案中，用 Claude Code 註冊並檢查設定範圍和連線。然後用協議測試程式啟動專案項目裡的同一條命令，發現 browser_navigate 和 browser_snapshot，在 Selenium 練習頁讀取 Web form 一級標題。沒有提交表單，也沒有呼叫 Claude 模型回合。

在專案目錄，local 項目顯示已連線，project 項目等待核准。切換到另一個目錄後，只看到 user 項目。

根據失敗現象排除問題

本機重現還註冊了一個指向不存在執行檔的服務。設定裡可以看到它，連線檢查卻失敗。把 --headless 移到 -- 左邊，CLI 則會在任何瀏覽器啟動前顯示未知選項。一個是啟動失敗，一個是命令解析失敗，處理辦法不同。

另一位使用者遇到過 claude mcp list 有時顯示已連線，目前工作階段的 /mcp 卻沒有服務。重新編輯設定前，先核對這兩處的狀態。原始討論

伺服器公佈的工具不一定都立即出現在模型上下文。Anthropic 說明，工具搜尋可以在需要時再載入工具定義。新開工作階段後，點名要求一次唯讀操作，並從執行紀錄中確認工具名稱。權限政策拒絕時，先核對原因。確定任務確實需要不同能力後，再比較 其他瀏覽器自動化工具。Anthropic 工具搜尋檔案

哪些任務需要現有分頁？

這套隔離啟動適合重現公開頁的操作。如果任務從已登入的後台開始，先決定需要共用哪個分頁、帳號和工作區。打開預期頁面，讓工具先唯讀標題和帳號標識。連線現有瀏覽器的指南 列出了寫入前的核對項。

Tabbit Browser 有另一種接入方式，支持包括 Claude Code 在內的編碼助手。想讓助手操作現有 Tabbit 分頁時，可以按產品檔案設定。有贊賣家表單錄屏 展示了在真實帳號環境填寫後，回列表讀回結果的過程。原錄屏用的是另一個編碼助手，用來說明瀏覽器端的核對步驟。Tabbit 快速上手

新專案先用 local 範圍跑一張公開測試頁。團隊確實要共用時再審核 project 設定，多專案都需要時再考慮 user。遇到已登入任務，選擇明確授權的 瀏覽器連線方式。無論哪種方式，都讓 瀏覽器自動化 交付一個可以獨立核驗的結果。

Secholar.L

Tabbit 成長與內容

Secholar.L 專注 AI 瀏覽器與 Agent 工作流的實測寫作,基於真實調研比較工具,引用可查證的一手來源。