上一篇裝了 Playwright MCP,讓 Claude Code 可以自己開瀏覽器。用幾天之後,你大概會遇到同一件事:聊到第十五步左右,它開始怪怪的,點一顆早就不在畫面上的按鈕。

這一篇要介紹另一條路 Playwright CLI,也是微軟出的,做的事一樣,方法不同。順便把「什麼時候該用哪一個」講清楚。

先說結論,兩個都是官方的,不是誰取代誰。差別在一件很單純的事:AI 讀完畫面之後,那份內容放到哪裡去。

這件事聽起來很小,但它決定了你的對話會不會爆、AI 撐不撐得到第五十步、以及一個月的帳單數字。

先把兩個同名的東西分開

「Playwright CLI」現在指兩個不同的東西
一個是 npx playwright test——你本來就在用的那個測試執行器,跑測試檔用的。
另一個是 playwright-cli(套件叫 @playwright/cli)——2026 年初微軟新出的,專門給 AI 工具用的瀏覽器操作指令。

這一篇講的是後者。網路上很多比較文章沒把這兩個分開,看的時候要注意。

差別:讀完的畫面放到哪裡

上一篇說過,AI 讀一次畫面會拿到一份清單:這一頁有哪些按鈕、輸入框,各自叫什麼名字。複雜的頁面,這份清單可能好幾千字。

兩邊處理這份清單的方式完全相反。

MCP 的做法是把整份清單直接放進對話。好處是 AI 隨時看得到,壞處是這份清單就永遠留在那裡了。跑到第二頁、第三頁,舊的那幾份還在,而且已經過期。

CLI 的做法是把清單存成一個檔案,對話裡只留下一行檔案路徑。AI 真的需要細看的時候,才去打開那個檔案。

後果:對話長度的累積方式差很多

MCP 還有一筆隱形開銷:連上的時候,它得先把所有工具的說明書送進對話。Playwright MCP 大約二十幾個工具,AI 還沒做任何事,就先佔掉一截空間了。

CLI 沒有這筆。指令的用法寫在一份很短的技能說明裡,AI 讀過一次就會用了。

數字怎麼看
有獨立測試量過同一個任務:走 MCP 大約 11.4 萬 token,走 CLI 大約 2.7 萬,差四倍多。微軟自己的文件也是同樣的說法,說 CLI 避免了把大量工具定義和頁面內容塞進對話。
這個數字要當方向看,不要當保證。實際差多少,看你的頁面多複雜、AI 讀了幾次畫面。
比省錢更有感的是另一件事:對話不會被過期的畫面塞滿,AI 撐得比較久。上一篇那種「跑到第十五步開始亂點」的情況,在 CLI 這條路上明顯少很多。

動手裝一次

比 MCP 還簡單,不用寫設定檔。

第一步:安裝

npm install -g @playwright/cli@latest
playwright-cli --help

第二行會列出所有可用的指令。裝好了就會看到一長串。

第二步:安裝技能說明

playwright-cli install --skills

這一步是把「怎麼用這些指令」的說明裝到你的 AI 工具裡。Claude Code、GitHub Copilot 會自動讀到。
不裝也能用,AI 會自己去跑 playwright-cli --help 摸索。但裝了之後它比較不會亂猜指令名稱。

第三步:自己手動走一次

這一步很值得做。你會親眼看到 AI 等一下會下的是什麼指令:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "買菜"
playwright-cli press Enter
playwright-cli type "繳水電費"
playwright-cli press Enter
playwright-cli snapshot
playwright-cli check e21
playwright-cli screenshot

--headed 是把瀏覽器叫出來給你看,不加的話它在背景默默跑。

每下一個指令,它會回你這樣一段:

### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
 
### Snapshot
[Snapshot](.playwright-cli/page-2026-08-21T09-22-42-679Z.yml)

注意最後一行。它沒有把整份頁面清單倒出來,只給你一個檔案路徑。這就是整篇文章在講的那件事。
想看清單就自己去開那個檔案。AI 也是這樣,需要的時候才開。

第四步:換 AI 來做

用 playwright skills 測 https://demo.playwright.dev/todomvc/。
 
流程:新增兩筆待辦、勾選第一筆完成、切到 Completed 篩選確認只剩一筆。
 
每個成功和失敗的情境都截圖。最後把觀察到的元素寫成一支 Playwright 測試檔。

然後你會看到它一行一行下指令,中間穿插 snapshot。整個過程比 MCP 那條路清爽很多——因為每一步的回報都很短。

常用指令速查

不用背,知道有這些東西存在就好。真正用的時候是 AI 在下,你在旁邊看。

操作頁面

看畫面、留證據

這幾類是 CLI 才有的,對測試人員特別有用

還有一個好東西:視覺化面板

playwright-cli show

這會開一個網頁儀表板,列出目前所有開著的瀏覽器,每一個都有即時畫面預覽。點進去可以看到那個瀏覽器現在在哪一頁,而且你可以直接接手滑鼠鍵盤操作。

AI 在跑的時候開著這個,你就不是瞎信它的回報了——它做什麼,你在旁邊看得一清二楚。按 Escape 把控制權還給它。

兩個放在一起比

三個問題就決定用哪一個

第一個問題最硬:你的 AI 工具能不能讀寫檔案、能不能跑指令。

如果你是在網頁版或桌面版的聊天介面用 AI,那沒得選,只能 MCP——CLI 需要有終端機可以跑指令。Claude Code、GitHub Copilot 這類跟程式碼待在一起的工具就兩個都可以。

第二個問題是這一趟的性質。要邊看邊想的,MCP 比較順;步驟已經清楚、只是要照著做完的,CLI 比較划算。

第三個問題是步數。超過十幾步,往 CLI 靠。

實際場景,該找誰

用久了你會發現規律很單純:AI 需要「想」的時候用 MCP,只需要「做」的時候用 CLI。

探索一個沒看過的系統、追一個測試為什麼紅——這些要它持續盯著頁面的變化去推理,MCP 的即時性有價值。

跑一輪冒煙測試、把手上二十個測試案例做完、模擬各種 API 錯誤——這些步驟你心裡有數,它只要照著做完並且留下證據,CLI 省得多。

效果:你實際會感受到什麼

換過去之後,體感上有四個變化。

一、它不會做到一半開始亂點

這是最明顯的。MCP 那條路上,對話裡累積了一堆過期畫面,AI 有時候會拿八步前的畫面在猜按鈕在哪——明明頁面早就跳走了,它還很有自信地要去點那顆按鈕。

CLI 每一步的畫面都是獨立的檔案,有時間戳。它要看哪一版就開哪一版,不會混。

二、一次可以做完更長的流程

原本二十步就得重開一段對話,現在五十步還好好的。整趟結帳流程、整個註冊到下單的路徑,可以一口氣跑完。

三、證據自動留下來了

截圖、trace、錄影、網路請求記錄,全部在 .playwright-cli 這個資料夾裡,有時間戳。

這件事的價值超過省 token。你要跟開發吵「這個 bug 真的重現得出來」的時候,有影片、有 trace、有那一刻的網路請求,對話會短很多。

四、AI 有時候會亂編指令

也有壞的。如果沒裝技能說明,它可能會編出一個不存在的指令名稱,然後卡住。

所以 playwright-cli install --skills 那一步不要跳過。

務實的做法:兩個都用

這是目前比較成熟的團隊在做的事。

面對一個沒看過的頁面,先用 MCP 探索,讓它邊看邊摸清楚有哪些功能。這個階段值得多花一點,因為你要的是它的觀察。

觀察轉成測試檔之後,這支測試就是普通的 Playwright 測試了。之後的執行、回歸、留證,全部走 CLI。
MCP 用在「一次性的理解」,CLI 用在「重複的執行」。

界線:省的是打字,不是把關

上一篇那些規矩,一條都不變。

• 只准連測試環境。CLI 這邊沒有 --allowed-origins,所以更要靠 CLAUDE.md 的規則和測試帳號的權限來擋。
• e21 這種臨時編號一樣不能寫進測試檔。CLI 的編號也是每次讀畫面重新給的。
• 每個動作後面要有一句檢查。CLI 沒有內建的檢查指令,這件事更要在指令裡明講。
• 產出的測試一樣要跑突變驗證(第 26 篇)。

還有一件 CLI 特有的:它把畫面、截圖、trace 全部寫到磁碟上。這些檔案裡可能有測試資料,甚至有登入 token。.playwright-cli 這個資料夾記得加進 .gitignore。