註冊
Claude

Claude Code 配 Playwright MCP 做瀏覽器測試：一條命令安裝，讓它打開頁面、點按鈕、讀控制檯，再把流程寫成測試

想讓 Claude Code 自己打開瀏覽器測試你的網頁。本文按微軟 Playwright MCP 官方倉庫和 Claude Code 官方 MCP 文檔講：安裝命令、怎麼確認連上、有頭無頭與隔離參數、一次測試的提示詞，以及它不是安全邊界這件事。

NNathaniel bigo··原創首發·AI 輔助撰寫
10 分鐘讀完
資料核對於 2026-11-05 · 依據官方文檔與公開資料整理 Pro 帳號
本文根據 Playwright MCP 官方倉庫 README、Claude Code 官方《Connect Claude Code to tools via MCP》、Playwright 官方《Installation》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是介面截圖。本站（bigolab.com）不是 Anthropic 或微軟官方網站。

適用於誰

  • 寫前端或全棧項目，想讓 Claude Code 自己打開頁面點一點、看有沒有報錯的人；
  • 想把「手動點一遍」的流程變成自動化測試的人；
  • 搞不清 Playwright MCP、Claude 的 Chrome 集成、Playwright 測試框架有什麼區別的人。

結論先說

  1. 安裝只要一條命令：claude mcp add playwright npx @playwright/mcp@latest，這是 Playwright MCP 官方倉庫給 Claude Code 的寫法。要求 Node.js 18 或更新版本。
  2. 它靠網頁的「無障礙樹」快照工作，不是靠截圖。官方倉庫的說法是結構化數據、不需要視覺模型，所以點哪個元素是明確的。
  3. 預設是有介面的瀏覽器，加 --headless 才是無介面；預設會儲存登入狀態到持久化配置裏，要乾淨的環境用 --isolated。
  4. 官方倉庫明確寫了：Playwright MCP 不是安全邊界。 不要讓它在登入了重要帳號的瀏覽器裏亂點，也不要拿它訪問你不信任的網站。
  5. 同一份倉庫說明裏也提到，面向編碼智能體，Playwright CLI 加 Skills 更省 token；MCP 更適合需要持續瀏覽器狀態的探索式場景。選哪個看你的任務。

Playwright MCP 從安裝到測試

圖：本站根據 Playwright MCP 官方倉庫 整理的示意圖

三個容易混的東西

  • Playwright MCP：給 Claude Code 一套「操作瀏覽器」的工具，本文主角。
  • Playwright 測試框架（@playwright/test）：你的項目裏跑的自動化測試，用 npx playwright test 執行。MCP 可以幫你寫這類測試，但它們是兩個東西。
  • Claude 的 Chrome 集成：Claude Code 官方文檔裏的另一個功能，通過 Claude in Chrome 擴展連接你自己的 Chrome，共用你的登入狀態，用 claude --chrome 啟動，且需要 Pro、Max 等官方套餐並用 /login 登入。詳見 /guides/claude-in-chrome。

如果你要測的是自己本機的開發站點，不需要登入狀態，Playwright MCP 加隔離模式更乾淨。

第一步：安裝並確認連上

在終端（不是在 Claude Code 裏面）執行官方倉庫給 Claude Code 的命令：

bash
claude mcp add playwright npx @playwright/mcp@latest

然後啟動 claude，輸入 /mcp，看 playwright 一行是否顯示已連接。Claude Code 官方文檔也給了命令行檢查辦法：claude mcp list 列出全部伺服器及狀態，claude mcp get playwright 看單個詳情。MCP 的基礎概念見 /guides/claude-code-mcp-setup。

想要無介面且不留登入狀態，可以把參數寫在 -- 後面。下面這條是本站按 Claude Code 官方「-- 之後原樣傳給伺服器」的規則自己拼的，不是倉庫原文：

bash
claude mcp add playwright -- npx @playwright/mcp@latest --headless --isolated

官方倉庫列出的相關參數：--headless 無介面；--isolated 把瀏覽器配置放內存裏不落盤；--browser 可選 chrome、firefox、webkit、msedge；--user-data-dir 指定持久化目錄；--storage-state 為隔離會話加載儲存好的 cookie 和本地存儲。

常用參數怎麼選

圖：本站根據 Playwright MCP 官方倉庫 整理的示意圖

第二步：先在本機站點上試一次

先讓開發伺服器跑起來，比如 npm run dev。

提示詞 1：只讀式冒煙檢查

text
我的站點跑在 http://localhost:3000。請用 playwright 工具打開首頁，並依次：
1）讀取頁面快照，列出導航欄裏的所有連結；
2）逐個點擊，確認每個頁面都能打開，記錄標題和 HTTP 狀態；
3）每個頁面都讀取瀏覽器控制檯消息，彙總其中的錯誤和警告；
4）全程不要提交任何表單，不要訪問 localhost 以外的網址。
最後給我一張表：頁面、是否正常、控制檯錯誤。

官方倉庫列出的工具裏，browser_navigate 打開地址，browser_snapshot 取頁面結構，browser_click 點擊，browser_console_messages 讀控制檯，browser_network_requests 看網絡請求，browser_take_screenshot 截圖。你不需要在提示詞裏點工具名，Claude 會自己選，寫需求即可。

第三步：測一條真實流程

提示詞 2：走一遍註冊或下單流程

text
請在 http://localhost:3000 測試「註冊 → 登入 → 修改暱稱」流程，使用測試帳號 [email protected]（不要使用任何真實電郵和密碼）。
每一步都要：說明你點了什麼、頁面出現了什麼；遇到報錯時讀取控制檯和網絡請求，找出失敗的接口和狀態碼。
流程結束後，告訴我：哪一步不符合預期、你懷疑的原因在哪個源碼文件。先不要改代碼。

Claude Code 官方最佳實踐反覆強調：給它一個能判斷對錯的檢查，它就能自己閉環。瀏覽器測試正好是這樣的檢查：頁面出現了什麼，一目了然。

第四步：把流程固化成測試

瀏覽器裏點通了，不等於項目裏有了測試。如果項目已經用 Playwright 測試框架（官方入門文檔裏創建項目是 npm init playwright@latest，運行是 npx playwright test），可以讓 Claude 把剛才走通的流程寫成測試文件。

提示詞 3：把走通的流程寫成測試

text
請把剛才「註冊 → 登入 → 修改暱稱」的流程寫成 Playwright 測試，放進項目現有的測試目錄，風格參考 @tests/example.spec.ts。
要求：不依賴固定等待時間；測試數據用測試帳號；每個關鍵步驟有斷言。
寫完用 npx playwright test 運行，失敗就讀報錯並修復，直到全部通過，最後把命令輸出貼給我。

測試框架的更多用法見 /guides/ai-write-unit-tests-workflow。

安全：官方倉庫怎麼說，你要怎麼做

官方倉庫的 Security 一節只有一句核心話：它不是安全邊界。結合 Claude Code 官方對 MCP 的提醒（連接任何伺服器前要確認你信任它），建議：

  • 預設只讓它訪問 localhost 的開發站；參數 --allowed-origins 可以限定允許的來源，但倉庫自己寫明它不能當安全邊界，也管不了重定向；
  • 持久化配置會儲存登入狀態，位置在 Windows 的 %USERPROFILE%\AppData\Local\ms-playwright\ 下，不再需要時可以手動刪除；
  • 同一個持久化配置同一時間只能被一個瀏覽器實例使用，多個客戶端並行要加 --isolated 或指定不同的 --user-data-dir；
  • 網頁內容本身可能含有誘導 AI 的文字，瀏覽真實第三方網站時，不要讓它順手執行頁面上的「指令」。這條是常識性提醒，不是倉庫原文。

常見問題

Q：/mcp 裏沒有顯示 playwright？

先在終端運行 claude mcp list 看有沒有；添加後需要在新會話裏生效。Node.js 版本低於 18 也會失敗。

Q：占上下文嗎？

Claude Code 官方說明已連接的 MCP 伺服器會把工具資訊放進上下文。官方倉庫自己也提示 MCP 比 CLI 更佔 token。不用時可以在 /mcp 裏關掉。

Q：能測手機端頁面嗎？

倉庫的參數表裏有 --device（例如模擬 iPhone 15）和 --mobile（模擬通用手機）。具體效果本文沒有實際核實，以 README 為準。

訂閱和額度

瀏覽器測試會產生大量頁面快照，上下文消耗比普通改代碼高，複雜流程建議分段做。訂閱選擇見 /chongzhi/claude-code，價格和額度以官方頁面當前顯示為準。

相關教學

參考資料

  • Playwright MCP 官方倉庫 — https://github.com/microsoft/playwright-mcp
  • Claude Code 文檔：Connect Claude Code to tools via MCP — https://code.claude.com/docs/en/mcp
  • Claude Code 文檔：Use Claude Code with Chrome — https://code.claude.com/docs/en/chrome
  • Playwright 文檔：Installation — https://playwright.dev/docs/intro

Nathaniel 的更多內容

  1. 01

    Claude Code 在 Windows 上的常見坑：Git Bash 還是 PowerShell、路徑反斜槓、假報錯、WSL 怎麼選

    Windows 上用 Claude Code，裝好之後最容易踩的是：用哪個 shell、路徑寫法不一致、grep 沒匹配就報錯、鉤子沒生效、WSL 和原生怎麼選。本文逐條按官方文檔整理原因和處理辦法，附三段提示詞和一張對照表。

    Claude0
  2. 02

    Claude Code Hooks 實戰「提交前自動跑測試」：PreToolUse 攔住 git commit，測試不過就退出碼 2，附 Windows 注意點

    只寫一個完整例子：讓 Claude Code 每次要執行 git commit 之前，先自動跑項目測試，沒通過就攔下並把輸出交給它修。本文按官方 Hooks 文檔給出腳本、settings.json 配置、測試方法、排錯和 Windows 的兩處坑。

    Claude0
  3. 03

    Claude Code 自定義斜槓命令與 Skill 實戰：從零寫一個「生成更新日誌」的 /release-notes，含傳參、預執行命令和調試

    概念看過了，還是不知道從哪下手？本文按 Claude Code 官方「Extend Claude with skills」寫一個完整可用的例子：用 /release-notes 根據 git 記錄生成更新日誌，覆蓋目錄、frontmatter、傳參、預執行命令、預授權和調試。

    Claude0
  4. 04

    Claude Code 部署網站：先寫 Dockerfile 和 compose 在本機跑通，再按清單上雲伺服器，別讓它直接改線上

    想讓 Claude Code 幫你把網站部署到雲伺服器。本文只寫通用做法，按 Docker 官方文檔講：讓它寫 Dockerfile、.dockerignore 和 compose，在本機跑通，端口和數據卷怎麼設，再給出上線清單，並說明為什麼不要讓它直接動線上機器。

    Claude0
  5. 05

    Claude Code 寫爬蟲與數據清洗：先查 robots.txt 和網站條款，控制頻率，原始數據留一份再清洗

    想讓 Claude Code 寫爬蟲抓數據再清洗。本文先講合規：robots.txt 不是授權也不是安全措施、網站條款要自己讀；再講怎麼用 Python 標準庫檢查規則、小樣本先試、儲存原始數據，以及用 pandas 清洗，附四段提示詞。

    Claude0
  6. 06

    Claude Code 寫 Chrome 擴展：按 Manifest V3 起步，加載未打包的擴展，改了哪些文件要重新加載

    想讓 Claude Code 幫你寫一個 Chrome 擴展。本文按 Chrome 官方擴展文檔講：manifest.json 的最小寫法、在 chrome://extensions 加載未打包的擴展、哪些改動要刷新、怎麼看控制檯和報錯，再給四段提示詞，以及權限要盡量少。

    Claude0

同產品的其他教學

  1. 01

    Claude Code 寫安卓 App：Android Studio 建項目、讓它用 gradlew 編譯安裝，報錯和日誌怎麼餵給它

    想讓 Claude Code 幫你寫安卓 App。官方文檔沒有專門的安卓教學，本文把 Claude Code 官方工作流和安卓官方命令行文檔拼在一起：Android Studio 建項目、gradlew 編譯安裝、模擬器和真機、測試與日誌，附四段提示詞。

    Claude0
  2. 02

    Claude Code 用數據庫 MCP 查數據、出報表：只讀帳號、先看口徑再看數字，結果別一次拉太多行

    想用自然語言讓 Claude Code 查數據庫、出統計報表，而不是寫後端接口。本文按官方 MCP 頁面和 DBHub 說明講：怎麼連 PostgreSQL、MySQL、SQLite、輸出太大怎麼辦、怎麼讓它先說明口徑、怎麼核對數字，附三段提示詞。

    Claude0
  3. 03

    Claude Code 配 Figma MCP 還原設計稿：插件或一條命令安裝，複製圖層連結，小塊小塊地讓它出代碼

    想讓 Claude Code 照 Figma 設計稿寫前端代碼。本文按 Figma 官方開發者文檔講：遠程伺服器地址、插件和手動兩種安裝、怎麼複製圖層連結、為什麼要選小塊、座位類型與調用次數限制，並給三段還原設計稿的提示詞。

    Claude0
  4. 04

    Claude Code 管理 GitHub issue：用 gh 命令還是 GitHub MCP，怎麼裝、怎麼限權、怎麼讓它分揀和回覆 issue

    讓 Claude Code 讀 issue、分揀標籤、起草回覆、關聯 PR，有兩條路：裝好 gh 命令行直接用，或連 GitHub 官方 MCP 伺服器。本文按兩邊官方文檔講安裝命令、令牌權限、只讀模式，並給出三段分揀提示詞和限權設定。

    Claude0
  5. 05

    Claude Code 寫文檔、README 和代碼註釋：先讓它讀代碼再動筆，指定風格，寫完逐條核對命令能不能跑

    想讓 Claude Code 給項目補 README、接口文檔和註釋，又怕它編造不存在的命令和參數。本文按官方「Handle documentation」工作流講：先找沒有文檔的代碼、指定風格、寫完核對，附四段可複製提示詞和驗證辦法。

    Claude0
  6. 06

    用 Claude Code 整理電腦文件、批量重命名、處理表格：先出清單再執行，副本操作和權限設定

    Claude Code 不只能寫代碼，官方說它能在任何文件夾裏搜尋、編輯和整理內容。本文講非程式員怎麼用它整理下載文件夾、批量重命名、處理表格：先出整理清單、用副本操作、權限怎麼設，附四段提示詞和撤銷辦法。

    Claude0

0 條評論

登入 後參與評論

還沒有評論，來搶沙發～