Carl 的說人話研究室

Playwright MCP 教學：讓 AI 自己開瀏覽器，安裝、接 Claude Code、實測它看到的頁面

部分實測2026.10.14

Playwright MCP 是微軟做的 MCP 伺服器，讓 Claude Code、Cursor 這類 AI 工具自己開瀏覽器、點連結、填表單、截圖。這篇講它怎麼裝、Claude Code 怎麼加、有哪些常用的設定；我在測試機上實際跑 0.0.83 版：第一次開網頁說瀏覽器沒裝、照它的指令補上，AI 看到的其實是一份標了編號的頁面結構，點一下連結它會寫出對應的程式碼；最後讓 Claude Code 連上去數我網站上的文章，11 秒答對。2026 年 10 月 14 日實測。

更新 2026/10/14・約 9 分鐘讀完・查證環境：Playwright MCP 0.0.83，跑在雲端測試機上（Ubuntu、2 核心 4 GB、Node.js 22），用無畫面的模式和 Chrome for Testing 155。工具是我直接用 MCP 協定呼叫的（不經過 AI），操作的都是這個網站自己的頁面；最後一段從我的 Mac 用 Claude Code（Opus 5.5）透過測試機的公開網址連上去問了一題。Mac 和 Windows 上用真的 Chrome、有畫面的模式、接自己瀏覽器的擴充功能都沒有測，依官方 README

先講結論

  • Playwright MCP 讓 AI 用一個真的瀏覽器開網頁、點東西、填表單、截圖。它給 AI 看的主要不是截圖，而是一份頁面結構，每個按鈕和連結都有編號，AI 說要點幾號就點幾號。Claude Code 用一行 claude mcp add playwright npx @playwright/mcp@latest 就能加，要有 Node.js 18 以上。
  • 我實測 0.0.83 版：25 個工具。第一次開網頁時它說瀏覽器還沒裝，照它給的指令裝，7 秒、占 674 MB；精簡版的 Linux 還要加 --with-deps 補系統套件。之後開一頁約 1 秒，首頁的頁面結構約兩萬字。
  • 讓 Claude Code 連上去問「n8n 主題有幾篇文章」，它開頁、讀頁面結構，11 秒答出 7 篇和每篇的標題。官方特別說它不是安全邊界；限制網域的設定實測擋得住外站，但官方說不擋轉址。
目錄
  1. Playwright MCP 是什麼
  2. 怎麼裝
  3. 第一次跑：瀏覽器要另外裝
  4. AI 看到的頁面長什麼樣子
  5. 點連結、找文字、截圖
  6. 讓 Claude Code 用它
  7. 安全和要注意的地方
  8. 這篇沒有測的

想請 AI 幫你上網做事：打開一個頁面看裡面寫什麼、點進某個連結、把表單填好、確認自己的網站改版之後有沒有跑版。聊天介面裡的 AI 多半只能讀網頁的文字，沒辦法真的去點。

Playwright MCP 補的就是這一塊。它是微軟做的 MCP 伺服器，接上之後，Claude Code、Cursor 這類工具就多了一組「操作瀏覽器」的工具：開網址、點連結、打字、選選項、截圖。

這篇講它怎麼裝、Claude Code 怎麼加，然後在測試機上實際跑一次，看 AI 到底「看到」什麼。MCP 本身是什麼，在 MCP 是什麼；Claude Code 加 MCP 伺服器的基本做法，在 Claude Code MCP。

Playwright MCP 是什麼

Playwright 是微軟做的瀏覽器自動化工具，原本是寫程式測網頁用的。Playwright MCP 把它包成 MCP 伺服器，讓 AI 可以直接呼叫。

它跟「截圖給 AI 看」最大的差別，官方 README 寫得很清楚：它給 AI 的是瀏覽器的無障礙樹（accessibility tree），也就是頁面上每個連結、按鈕、標題的結構，而且每個元素都有編號。AI 要點哪個連結，就說「點 e13」，不用看圖、也不用猜座標。官方說這樣比較快、不需要能看圖的模型，動作也比較精準。

需要的話它也能截圖，下面會看到。

怎麼裝

需要 Node.js 18 以上。Claude Code 只要一行：

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

其他工具（Cursor、VS Code、Claude Desktop 等）用的是同一段設定，加到各自的 MCP 設定裡：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

常會用到的幾個選項，加在 args 裡：

  • --headless：不開視窗，在背景跑。預設是會開出視窗的。
  • --isolated：瀏覽器的資料只放在記憶體，關掉就沒了，不保留登入狀態。
  • --browser：用哪個瀏覽器，可以填 chrome、firefox、webkit、msedge。
  • --allowed-origins：只准瀏覽器連這些網域，用分號隔開。
  • --port：改用網址連線（HTTP），伺服器可以跑在另一台機器上。

第一次跑：瀏覽器要另外裝

我在雲端測試機上跑的是 0.0.83 版（Linux、沒有螢幕），用 --port 把它開成網址，再直接用 MCP 協定呼叫它的工具，不經過 AI。這樣可以看清楚每一步它回了什麼。

它一共提供 25 個工具，像 browser_navigate（開網址）、browser_snapshot（讀頁面結構）、browser_click（點）、browser_type（打字）、browser_fill_form（填表單）、browser_take_screenshot（截圖）。

第一次叫它開網頁，回的是一個錯誤：瀏覽器還沒裝。錯誤訊息裡直接給了要跑的指令：

npx @playwright/mcp install-browser \
  chrome-for-testing

照跑，7 秒下載完，但占了 674 MB，因為一次裝了一般版和無畫面版的 Chrome，還有一個影片用的元件。

我這台是最精簡的 Linux，還缺了 25 個系統函式庫，瀏覽器開不起來。這個指令有一個 --with-deps 的選項會順便補，它會切換成管理員身分去裝，12 秒就好了。一般的 Mac 和 Windows 應該不會遇到這一步，這段我沒有測。

AI 看到的頁面長什麼樣子

瀏覽器裝好之後，我讓它開這個網站的首頁，1.2 秒。

0.83 版的回應裡，沒有直接附上頁面結構，只有它執行的程式碼（page.goto）、網址、標題，以及一個存在伺服器上的檔案位置。要看結構，再呼叫一次 browser_snapshot。首頁的結構是 310 行、兩萬多個字元，開頭長這樣：

- generic [active] [ref=e1]:
  - link "跳到內容" [ref=e2]:
    - /url: "#main"
  - banner [ref=e3]:
    - generic [ref=e4]:
      - link "Carl 的說人話研究室 首頁" [ref=e5]
      - navigation "主選單" [ref=e8]:
        - link "OpenClaw 龍蝦" [ref=e9]
        - link "Hermes Agent" [ref=e10]

（我省略了一些細節。）每一行是頁面上的一個東西：連結（link）、橫幅（banner）、選單（navigation），後面的 ref=e9 就是它的編號。AI 讀的就是這份清單，不是圖片。

這也說明了一件事：網頁寫得清楚，AI 才看得清楚。連結和按鈕有寫好名稱，結構裡就是一行看得懂的字；只有圖示、沒有文字的按鈕，在這份清單裡就只剩一個編號。

點連結、找文字、截圖

接著我開 n8n 主題頁，在結構裡找到「n8n MCP 教學」那個連結的編號，叫它點。

這裡踩到一個小地方：0.83 版的點擊工具，編號要放在 target 這個參數，不是 ref。放錯的話，它回「target 收到 undefined」。這種細節 AI 會自己看工具說明處理，但自己寫程式呼叫的人要注意。

點下去 1 秒，回應裡寫著它實際跑的程式碼：

await page.getByRole('link', {
  name: 'n8n MCP 教學：把流程開成 MCP 伺服器給'
}).click();

也就是說，它不是去點畫面上的某個座標，而是用「名稱叫這個的連結」去找。這也是 Playwright 寫自動化測試的標準寫法，所以 AI 操作過的步驟，可以直接拿來當測試程式的參考。

在那篇文章裡，我再叫它找「10151」這串數字，它找到 2 筆，並列出每一筆在頁面結構裡的位置。截圖也試了，0.5 秒，回一張 PNG，大約 120 KB。

讓 Claude Code 用它

最後我從自己的 Mac，用 Claude Code 透過測試機的公開網址連上這個 Playwright MCP，只開放開網址、讀結構、找文字三個工具，問：

用 playwright 打開 https://yuntech.idv.tw/n8n/ ，告訴我 n8n 主題現在有幾篇文章，列出標題就好。

它先開網址，看到回應裡沒有頁面結構，就自己再呼叫一次讀結構（拿到七千多字元），然後回答：7 篇，七個標題一字不差。它還多說了一句：頁面下面「相關小工具」裡的 n8n 費用試算器是工具不是文章，所以沒算進去。

整個過程 10.8 秒。這一次 Claude Code 主對話的輸出是 554 個 token，大部分的用量是讀取快取的說明和頁面結構。

安全和要注意的地方

官方 README 寫得很直接：Playwright MCP 不是安全邊界。幾件事要知道：

  • 預設會保留瀏覽器的資料，包括登入狀態。不想留，加 --isolated。
  • --allowed-origins 可以限制瀏覽器能連的網域。我實測叫它開 example.com，回的是 ERR_BLOCKED_BY_CLIENT，被擋了。但官方說這個設定也不是安全邊界，而且不擋轉址。
  • 這個限制連網頁裡的其他資源也會擋。我們網站有一個 Cloudflare 自動加的流量統計腳本，因為不在允許的網域裡，每一頁都多了一個錯誤訊息。設了這個選項，網頁看起來怪怪的時候，先想到這一點。
  • 不要讓它登入你重要的帳號，也不要叫它去不信任的網站「照著頁面上的說明做」。網頁上的文字也可能是寫給 AI 看的陷阱。

另外是用量。每開一頁、讀一次結構，都是一大段文字進到 AI 的對話裡。我們首頁就兩萬多個字元，複雜的網站更多。官方 README 也提到，如果你用的是 Claude Code 這類寫程式的 AI，可以考慮他們另外做的 Playwright CLI 搭配 Skills，因為比較省 token；MCP 比較適合要一直開著瀏覽器、反覆探索頁面的工作。Skills 是什麼，在 Claude Skills 教學。

這篇沒有測的

Mac 和 Windows 上用真的 Chrome、有視窗的模式。我只在沒有螢幕的 Linux 測試機上跑。

--extension：接上你自己已經開著的 Chrome 或 Edge（要裝 Playwright 的擴充功能）。

填表單、登入、上傳檔案這類會改東西的操作。我只做了開網頁、讀結構、點連結、找文字、截圖。

Cursor、VS Code 的設定，以及 Playwright CLI 加 Skills 的做法。

要找網頁為什麼慢、哪裡在報錯，Chrome 團隊做的 Chrome DevTools MCP 比較合適，它能錄效能、跑 Lighthouse，我拿這個網站實測過，在 Chrome DevTools MCP 教學。除了 Playwright，另一台很多人裝的是讓 AI 先查最新官方文件的 Context7，我也實測過，在 Context7 是什麼；做前端、要照設計稿刻畫面的，可以看 Figma MCP 教學。別的 MCP 伺服器怎麼挑，可以先看 MCP 是什麼；想自己做一個 MCP 伺服器，在 n8n MCP 教學有一個不用寫程式的做法。

常見問題

Playwright MCP 要錢嗎？

它本身是微軟開源的，免費。花錢的是用它的 AI：每開一頁、讀一次頁面結構，都會用掉 AI 的 token。我實測我們網站首頁的頁面結構約兩萬個字元，頁面越複雜越多。

Playwright MCP 跟一般截圖給 AI 看差在哪？

官方的說法是，它用的是瀏覽器的無障礙樹（accessibility tree），也就是頁面上每個連結、按鈕、文字的結構和編號，不需要能看圖的模型，動作也比較精準：AI 說點哪個編號就是哪個元素，不用猜座標。需要的時候它也能截圖。

用 Claude Code 寫程式的話，Playwright MCP 是最好的選擇嗎？

不一定。官方 README 自己寫，用 coding agent（像 Claude Code）的人，可能更適合他們另外做的 Playwright CLI 搭配 Skills，因為比較省 token，不用把大量的工具說明和頁面結構塞進對話。MCP 比較適合要一直開著瀏覽器、反覆探索頁面的工作。

讓 AI 開瀏覽器安全嗎？

要小心。官方明白寫 Playwright MCP 不是安全邊界。預設會保留瀏覽器的登入資料，可以加 --isolated 讓它不存；限制可以連的網域用 --allowed-origins，但官方說這也不是安全邊界、不擋轉址。不要讓它登入你重要的帳號，也不要叫它去不信任的網站照著網頁上的指示做事。

這篇怎麼查證的

這篇只有一部分實際跑過，其餘依官方文件整理，查證日期 2026/10/14（Playwright MCP 0.0.83，跑在雲端測試機上（Ubuntu、2 核心 4 GB、Node.js 22），用無畫面的模式和 Chrome for Testing 155。工具是我直接用 MCP 協定呼叫的（不經過 AI），操作的都是這個網站自己的頁面；最後一段從我的 Mac 用 Claude Code（Opus 5.5）透過測試機的公開網址連上去問了一題。Mac 和 Windows 上用真的 Chrome、有畫面的模式、接自己瀏覽器的擴充功能都沒有測，依官方 README）。哪些有跑、哪些沒跑，文中各段有寫。價格與方案以官方頁面為準，工具改版後內容可能過期。