Playwright CLI 使用入門：安裝、Skills、Session 管理與常用命令

Sun, 12 Apr 2026 14:36:58 +0800

如果你最近在用 Claude Code、GitHub Copilot 或其他 coding agent 做瀏覽器自動化，microsoft/playwright-cli 是一個很值得關注的新工具。它不是傳統意義上那種「給人手動敲命令用」的瀏覽器小工具，而是一個面向 coding agent 的 Playwright CLI，強調的是更低的 token 開銷、更輕量的命令介面，以及和 Skills 工作流的結合。

從官方 README 來看，Playwright CLI 的核心思路很明確：相比 MCP 把大量工具 schema 和頁面結構塞進模型上下文，CLI 命令方式更緊湊，也更適合在大程式碼庫、測試任務與瀏覽器自動化之間來回切換的 agent 工作流。

01 Playwright CLI 是什麼

playwright-cli 是微軟開源的一個 Playwright 命令列工具，官方描述是「CLI for common Playwright actions」。它主要用來完成這些事情：

開啟頁面並驅動瀏覽器
錄製與生成 Playwright 程式碼
抓取頁面快照，取得元素引用
截圖、匯出 PDF
搭配 coding agent 進行自動化測試與網頁操作

目前 GitHub README 對它的定位說得非常清楚：如果你正在使用 coding agents，CLI 往往比 Playwright MCP 更合適；如果你更需要持久狀態、豐富的 introspection 與長時間的 agentic loop，MCP 仍然有它的價值。

換句話說，Playwright CLI 更像是「替 AI 編碼助手準備的瀏覽器自動化介面」，而不只是給人類工程師手動點網頁的工具。

02 它的優點在哪裡

1. 更適合 agent 工作流

官方 README 把第一個優點直接寫成 Token-efficient。它不會強制把整頁資料都塞進 LLM 上下文，而是透過更短、更專用的命令讓 agent 操作瀏覽器。

這對 coding agent 很重要。因為在真實專案裡，agent 不只是跑瀏覽器，還要讀程式碼、改檔案、跑測試、看日誌。如果瀏覽器工具本身就很「吃上下文」，整體效率會明顯下降。

2. 能和 Skills 一起工作

README 裡特別強調了 playwright-cli install --skills。這代表官方不是把它當成單純的 shell 工具，而是設計成可以被 Claude Code、GitHub Copilot 等 agent 直接使用的技能入口。

如果你的工作流本來就建立在 Skills 之上，那 Playwright CLI 的接入會更自然。

3. Session 管理做得比較完整

Playwright CLI 支援 session。預設情況下，瀏覽器 profile 保存在記憶體裡，同一個 session 內的 cookies 和 storage 會在多次 CLI 呼叫之間保留；如果加上 --persistent，還可以把 profile 落到磁碟，跨瀏覽器重啟繼續使用。

這讓它比「一條命令開瀏覽器，跑完就丟掉」的玩具型工具更實用，也更適合持續除錯與 agent 長流程執行。

4. 自帶可視化監控面板

README 裡提供了 playwright-cli show，用來打開一個 dashboard，觀察和控制所有執行中的瀏覽器 session。對於 agent 在背景跑自動化任務的場景，這一點很有價值，因為你可以隨時接手、觀察、排錯，而不是只能盲跑。

03 安裝與環境要求

根據目前 GitHub README，Playwright CLI 的基本要求是：

Node.js 18 或更高版本
Claude Code、GitHub Copilot 或其他 coding agent

安裝命令如下：

1
2

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

這裡有一個很容易踩坑的點要特別注意：

官方目前推薦安裝的是 @playwright/cli
不要把它和 npm 上歷史遺留、已廢棄的舊包 playwright-cli 混為一談

也就是說，真正該安裝的是 scoped package，而不是舊時代的同名歷史包。

04 如何開始用

1. 安裝 skills

如果你希望讓 coding agent 直接使用 Playwright CLI，官方建議先安裝 skills：

`1`	`playwright-cli install --skills`

README 裡明確寫到，Claude Code、GitHub Copilot 等工具會使用本地安裝的 skills。

2. 直接讓 agent 呼叫 CLI

如果你不想先處理 skills，也可以直接讓 agent 讀取 CLI 的說明資訊：

1
2

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

官方把這種方式叫做「Skills-less operation」。意思是即使沒有預先安裝 skill，也可以透過 CLI 的自描述能力來驅動 agent。

3. 手動體驗一遍最小流程

README 裡給了一組很適合入門的 TodoMVC 範例：

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

這組命令的價值在於，它能讓你很快理解 Playwright CLI 的互動方式：

open 負責開頁面
type 和 press 負責輸入
check 用元素引用操作核取方塊
screenshot 保存結果

05 `--headed`、session 與監控面板

`--headed`

Playwright CLI 預設是 headless 的。如果你想直接看到瀏覽器視窗，需要在 open 時明確加上 --headed：

`1`	`playwright-cli open https://playwright.dev --headed`

這對除錯選擇器、登入流程，或觀察互動細節都會更方便。

session

官方 README 很強調 session 的用法。你可以用不同 session 把不同專案或網站隔離開來：

1
2
3

playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list

如果你是讓 agent 長時間工作，也可以直接透過環境變數指定 session：

`1`	`PLAYWRIGHT_CLI_SESSION=todo-app claude .`

常用的 session 管理命令包括：

1
2
3

playwright-cli list
playwright-cli close-all
playwright-cli kill-all

其中：

list 用來列出所有 session
close-all 用來正常關閉所有瀏覽器
kill-all 用來強制結束所有瀏覽器程序

監控面板

如果你想看 agent 現在到底在瀏覽器裡做了什麼，可以執行：

`1`	`playwright-cli show`

根據 README 的說明，這個 dashboard 主要有兩種視圖：

Session grid：依 workspace 查看所有活動 session，附即時畫面、URL 和頁面標題
Session detail：查看單個 session 的即時介面，還能接管滑鼠與鍵盤

這讓 Playwright CLI 不只是「命令列可用」，而是具備了比較成熟的可觀測性。

06 常用命令先記住哪些

如果你是第一次接觸 Playwright CLI，不需要一開始就把所有命令背下來。先記住下面這些最核心的就夠了：

頁面與互動

playwright-cli open [url]
playwright-cli goto <url>
playwright-cli click <ref>
playwright-cli fill <ref> <text>
playwright-cli type <text>
playwright-cli hover <ref>
playwright-cli press <key>

取得頁面結構

playwright-cli snapshot
playwright-cli snapshot <ref>
playwright-cli snapshot --depth=N
playwright-cli eval <func> [ref]

snapshot 很關鍵，因為很多後續操作都依賴元素引用 ref。通常你會先抓一次快照，再用回傳的元素編號去點擊、填寫、勾選或截圖。

輸出結果

1
2

playwright-cli screenshot
playwright-cli pdf

分頁

playwright-cli tab-list
playwright-cli tab-new [url]
playwright-cli tab-close [index]
playwright-cli tab-select <index>

07 它適合誰

如果你屬於下面這些場景，Playwright CLI 很值得試：

你在用 Claude Code、Copilot 或其他 coding agent 做 E2E 測試
你希望瀏覽器自動化介面更輕量，不想把大量頁面結構塞進上下文
你希望同一個瀏覽器 session 能跨多次命令持續存在
你想在 agent 自動跑網頁任務時，隨時打開監控面板觀察進度

如果你的重點是「瀏覽器自動化如何和 coding agent 高效配合」，Playwright CLI 很可能會比傳統的人類手動除錯方式更順手。

Testing on KnightLi的博客

Playwright CLI 使用入門：安裝、Skills、Session 管理與常用命令

01 Playwright CLI 是什麼

02 它的優點在哪裡

1. 更適合 agent 工作流

2. 能和 Skills 一起工作

3. Session 管理做得比較完整

4. 自帶可視化監控面板

03 安裝與環境要求

04 如何開始用

1. 安裝 skills

2. 直接讓 agent 呼叫 CLI

3. 手動體驗一遍最小流程

05 `--headed`、session 與監控面板

`--headed`

session

監控面板

06 常用命令先記住哪些

頁面與互動

取得頁面結構

輸出結果

分頁

07 它適合誰

參考連結

Testing on KnightLi的博客

Playwright CLI 使用入門：安裝、Skills、Session 管理與常用命令

01 Playwright CLI 是什麼

02 它的優點在哪裡

1. 更適合 agent 工作流

2. 能和 Skills 一起工作

3. Session 管理做得比較完整

4. 自帶可視化監控面板

03 安裝與環境要求

04 如何開始用

1. 安裝 skills

2. 直接讓 agent 呼叫 CLI

3. 手動體驗一遍最小流程

05 --headed、session 與監控面板

--headed

session

監控面板

06 常用命令先記住哪些

頁面與互動

取得頁面結構

輸出結果

分頁

07 它適合誰

參考連結

05 `--headed`、session 與監控面板

`--headed`