Playwright CLI on KnightLi的博客

Playwright CLI 視訊錄製：錄屏、章節標記、Overlay 與除錯取捨

Wed, 15 Apr 2026 08:22:45 +0800

如果你想把瀏覽器自動化過程錄成影片，用來做除錯、文件示範，或作為執行結果留存，Playwright CLI 已經提供了相當直接的做法。它輸出的是 WebM 影片，編碼為 VP8/VP9。

這篇按照官方 video-recording 參考文件整理，重點包括基礎錄製流程、章節標記、完整 hero script 錄製、Overlay API，以及 video 與 tracing 的差異。文中的命令列、程式碼片段與參數說明均按參考內容保留。

01 基礎錄製流程

最基本的流程就是：先打開瀏覽器，再開始錄製，執行操作，最後停止並保存。

# Open browser first
playwright-cli open

# Start recording
playwright-cli video-start demo.webm

# Add a chapter marker for section transitions
playwright-cli video-chapter "Getting Started" --description="Opening the homepage" --duration=2000

# Navigate and perform actions
playwright-cli goto https://example.com
playwright-cli snapshot
playwright-cli click e1
# Add another chapter
playwright-cli video-chapter "Filling Form" --description="Entering test data" --duration=2000
playwright-cli fill e2 "test input"

# Stop and save
playwright-cli video-stop

這組命令已經涵蓋了最常見的錄製流程。video-chapter 很適合在不同階段之間插入章節卡片，讓錄出來的影片更容易理解。

02 最佳實務

1. 使用描述性檔名

如果影片是要給別人看，或之後還要回頭查找，檔名最好直接帶上場景和上下文。

1
2
3

# Include context in filename
playwright-cli video-start recordings/login-flow-2024-01-15.webm
playwright-cli video-start recordings/checkout-test-run-42.webm

2. 錄製完整 hero script

官方建議：如果影片是要交付給使用者，或作為 proof of work，最好把場景整理成一段程式碼，再用 run-code 執行。這樣比較容易控制動作節奏、停頓時機，以及影片中的標註效果。參考文件也提到，Playwright 新增了一些特別適合這類錄製流程的 API。

建議流程如下：

先用 CLI 走一遍場景，並記下所有 locator 和 action。之後如果要做高亮，會需要用這些 locator 取得對應的 bounding box。
為影片另外建立一個腳本檔案，並依照下面的方式撰寫。輸入內容時用 pressSequentially 搭配 delay，停頓時間也盡量安排得自然。
使用 playwright-cli run-code --filename your-script.js 執行。

Important: Overlays are pointer-events: none — they do not interfere with page interactions. You can safely keep sticky overlays visible while clicking, filling, or performing any actions on the page.

async page => {
  await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
  await page.goto('https://demo.playwright.dev/todomvc');
  // Show a chapter card — blurs the page and shows a dialog.
  // Blocks until duration expires, then auto-removes.
  // Use this for simple use cases, but always feel free to hand-craft your own beautiful
  // overlay via await page.screencast.showOverlay().
  await page.screencast.showChapter('Adding Todo Items', {
    description: 'We will add several items to the todo list.',
    duration: 2000,
  });
  // Perform action
  await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 });
  await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
  await page.waitForTimeout(1000);

  // Show next chapter
  await page.screencast.showChapter('Verifying Results', {
    description: 'Checking the item appeared in the list.',
    duration: 2000,
  });
  // Add a sticky annotation that stays while you perform actions.
  // Overlays are pointer-events: none, so they won't block clicks.
  const annotation = await page.screencast.showOverlay(`
    <div style="position: absolute; top: 8px; right: 8px;
      padding: 6px 12px; background: rgba(0,0,0,0.7);
      border-radius: 8px; font-size: 13px; color: white;">
      ✓ Item added successfully
    </div>
  `);
  // Perform more actions while the annotation is visible
  await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 });
  await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
  await page.waitForTimeout(1500);

  // Remove the annotation when done
  await annotation.dispose();
  // You can also highlight relevant locators and provide contextual annotations.
  const bounds = await page.getByText('Walk the dog').boundingBox();
  await page.screencast.showOverlay(`
    <div style="position: absolute;
      top: ${bounds.y}px;
      left: ${bounds.x}px;
      width: ${bounds.width}px;
      height: ${bounds.height}px;
      border: 1px solid red;">
    </div>
    <div style="position: absolute;
      top: ${bounds.y + bounds.height + 5}px;
      left: ${bounds.x + bounds.width / 2}px;
      transform: translateX(-50%);
      padding: 6px;
      background: #808080;
      border-radius: 10px;
      font-size: 14px;
      color: white;">Check it out, it is right above this text
    </div>
  `, { duration: 2000 });
  await page.screencast.stop();
}

這段程式碼的價值不只是「錄下來」，而是把影片做得更清楚：章節卡片負責分段，pressSequentially 讓輸入更自然，showOverlay 則能提供提示、高亮與說明。

文件最後也補了一句：Embrace creativity, overlays are powerful.

03 Overlay API 速覽

錄製影片時，Overlay API 很適合拿來做章節切換、局部提示與持續註解。官方給出的摘要如下：

Method	Use Case
`page.screencast.showChapter(title, { description?, duration?, styleSheet? })`	Full-screen chapter card with blurred backdrop — ideal for section transitions
`page.screencast.showOverlay(html, { duration? })`	Custom HTML overlay — use for callouts, labels, highlights
`disposable.dispose()`	Remove a sticky overlay added without duration
`page.screencast.hideOverlays()` / `page.screencast.showOverlays()`	Temporarily hide/show all overlays

如果你的目標是把自動化過程做成「可觀看的影片」，這組 API 基本就是最值得優先掌握的部分。

04 Tracing 和 Video 的差異

官方文件把兩者的定位區分得很清楚：

Feature	Video	Tracing
Output	WebM file	Trace file (viewable in Trace Viewer)
Shows	Visual recording	DOM snapshots, network, console, actions
Use case	Demos, documentation	Debugging, analysis
Size	Larger	Smaller

可以簡單這樣理解：

video 更適合示範、交付與回看「使用者看到的過程」
tracing 更適合排查問題、檢查動作細節，以及分析執行上下文

兩者不是互相取代，而是各自對應不同目標。

05 使用限制

文件裡也提醒了兩個很實際的限制：

Recording adds slight overhead to automation
Large recordings can consume significant disk space

也就是說，錄製功能雖然很好用，但會替自動化流程增加一些額外開銷；如果影片很長，磁碟占用也會明顯上升。

06 快速總結

如果只抓重點，可以記住下面幾件事：

video-start / video-stop 對應最基本的影片錄製流程
video-chapter 可以替影片加上章節過渡，讓示範更清楚
更進階的錄製場景，適合寫成腳本後用 run-code 執行
showOverlay 和 showChapter 可以明顯提升影片可讀性
video 適合示範，tracing 適合除錯，最好依目標選擇

如果你已經在用 Playwright CLI 做自動化示範、驗收留存或 proof of work，那麼 video recording 會是一塊很值得補上的能力。

參考連結

Playwright CLI video-recording 參考文件：https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/video-recording.md
Playwright CLI 專案首頁：https://github.com/microsoft/playwright-cli

Playwright CLI 會話管理：多瀏覽器會話、隔離、持久化與清理

Wed, 15 Apr 2026 08:15:12 +0800

如果你在用 Playwright CLI 做自動化，很快就會碰到一個實際問題：同一時間裡，能不能開多個互不干擾的瀏覽器會話？答案是可以，而且 Playwright CLI 已經把這套機制做得很直接。

這篇就按照官方 session-management 參考文件，整理它最實用的幾個部分：命名會話、會話隔離、持久化 profile、並發模式，以及常見清理命令。文中的命令列與命令區塊說明均按參考內容保留。

01 命名瀏覽器會話

官方建議用 -s 參數隔離不同瀏覽器上下文：

# Browser 1: Authentication flow
playwright-cli -s=auth open https://app.example.com/login

# Browser 2: Public browsing (separate cookies, storage)
playwright-cli -s=public open https://example.com

# Commands are isolated by browser session
playwright-cli -s=auth fill e1 "user@example.com"
playwright-cli -s=public snapshot

這裡的重點是：不同 session 名稱對應不同瀏覽器上下文。你可以把 auth 用在登入流程，把 public 用在匿名存取，它們之間不會共用 cookies 或本地狀態。

02 瀏覽器會話隔離了什麼

每個瀏覽器會話都會獨立維護下面這些內容：

Cookies
LocalStorage / SessionStorage
IndexedDB
Cache
Browsing history
Open tabs

這意味著如果你在 auth 會話裡登入了某個網站，並不會自動影響 public 會話。做多帳號測試、登入態驗證、匿名對比時，這一點尤其重要。

03 瀏覽器會話相關命令

官方文件把會話管理裡最常用的一組命令放在了一起：

# List all browser sessions
playwright-cli list

# Stop a browser session (close the browser)
playwright-cli close                 # stop the default browser
playwright-cli -s=mysession close   # stop a named browser

# Stop all browser sessions
playwright-cli close-all

# Forcefully kill all daemon processes (for stale/zombie processes)
playwright-cli kill-all

# Delete browser session user data (profile directory)
playwright-cli delete-data              # delete default browser data
playwright-cli -s=mysession delete-data # delete named browser data

可以把它們理解成三類操作：

list：看目前有哪些會話
close / close-all / kill-all：結束會話或清理卡住的瀏覽器程序
delete-data：刪除某個會話對應的使用者資料目錄

如果你只是結束瀏覽器，通常先用 close；如果已經出現殘留程序或殭屍程序，再用 kill-all 會更合適。

04 用環境變數設定預設會話

如果你不想每條命令都重複寫 -s=mysession，官方還提供了環境變數方式：

1
2

export PLAYWRIGHT_CLI_SESSION="mysession"
playwright-cli open example.com  # Uses "mysession" automatically

這樣之後不顯式指定 -s 時，命令就會預設使用 mysession 這個瀏覽器會話。

05 常見模式：並發抓取

參考文件給了一個很典型的並發抓取例子：

#!/bin/bash
# Scrape multiple sites concurrently

# Start all browsers
playwright-cli -s=site1 open https://site1.com &
playwright-cli -s=site2 open https://site2.com &
playwright-cli -s=site3 open https://site3.com &
wait

# Take snapshots from each
playwright-cli -s=site1 snapshot
playwright-cli -s=site2 snapshot
playwright-cli -s=site3 snapshot

# Cleanup
playwright-cli close-all

這個模式適合同時打開多個站點，各自抓取頁面狀態，再統一清理。因為每個站點都跑在獨立會話裡，所以不會互相污染本地狀態。

06 常見模式：A/B 測試會話

另一個常見場景，是同時對比不同實驗版本：

# Test different user experiences
playwright-cli -s=variant-a open "https://app.com?variant=a"
playwright-cli -s=variant-b open "https://app.com?variant=b"

# Compare
playwright-cli -s=variant-a screenshot
playwright-cli -s=variant-b screenshot

這種寫法很適合做 A/B 頁面差異對比，因為兩個版本在獨立會話裡運行，截圖和狀態檢查也更容易分開管理。

07 持久化瀏覽器 profile

官方文件特別說明：預設情況下，瀏覽器 profile 只保存在記憶體裡。

如果你希望把瀏覽器 profile 持久化到磁碟，需要在 open 時加上 --persistent：

# Use persistent profile (auto-generated location)
playwright-cli open https://example.com --persistent

# Use persistent profile with custom directory
playwright-cli open https://example.com --profile=/path/to/profile

這個能力適合需要長期複用登入態、本地快取或擴充除錯環境的場景。尤其在反覆除錯同一站點時，持久化 profile 往往會比每次從零開始更高效。

08 預設瀏覽器會話

如果沒有顯式傳入 -s，那麼命令會使用預設瀏覽器會話：

# These use the same default browser session
playwright-cli open https://example.com
playwright-cli snapshot
playwright-cli close  # Stops default browser

也就是說，不帶 -s 的幾條命令預設是在同一個預設會話裡連續執行的。

09 打開時附帶會話配置

除了會話名，官方也給出了幾種常見的啟動配置方式：

# Open with config file
playwright-cli open https://example.com --config=.playwright/my-cli.json

# Open with specific browser
playwright-cli open https://example.com --browser=firefox

# Open in headed mode
playwright-cli open https://example.com --headed

# Open with persistent profile
playwright-cli open https://example.com --persistent

這些參數可以和會話管理一起搭配使用。比如你可以讓某個命名會話固定跑在 firefox，或者讓某個會話始終以 headed 模式啟動，方便人工觀察。

10 官方給出的最佳實務

參考文件列了三條很實用的最佳實務。

1. 用有語義的會話名

# GOOD: Clear purpose
playwright-cli -s=github-auth open https://github.com
playwright-cli -s=docs-scrape open https://docs.example.com

# AVOID: Generic names
playwright-cli -s=s1 open https://github.com

會話名最好能直接表達用途。像 github-auth、docs-scrape 這種名字，後面維護腳本時會清楚很多。

2. 用完及時清理

# Stop browsers when done
playwright-cli -s=auth close
playwright-cli -s=scrape close

# Or stop all at once
playwright-cli close-all

# If browsers become unresponsive or zombie processes remain
playwright-cli kill-all

如果任務結束後不關瀏覽器，會話和背景程序會一直留著。短期看問題不大，但任務一多，很容易把環境弄亂。

3. 刪除陳舊瀏覽器資料

1
2

# Remove old browser data to free disk space
playwright-cli -s=oldsession delete-data

當某些舊會話已經不用時，刪除對應資料目錄可以節省磁碟空間，也能避免後面誤用過期狀態。

11 快速總結

如果只抓重點，可以記住下面這幾件事：

-s=<name> 用來建立並使用獨立瀏覽器會話
不同會話之間會隔離 cookies、各種儲存、快取、歷史紀錄和分頁
close-all 適合統一關閉，kill-all 適合處理異常殘留程序
--persistent 用來把 profile 落盤，適合長期複用狀態
會話名盡量語義化，舊資料定期清理

如果你的工作流裡已經有登入態複用、多帳號並行、A/B 對比或批次抓取需求，那麼 session management 基本就是 Playwright CLI 裡最值得先掌握的一塊能力。

參考連結

Playwright CLI session-management 參考文件：https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/session-management.md
Playwright CLI 專案首頁：https://github.com/microsoft/playwright-cli

Playwright CLI storage state 用法：保存登入狀態、讀取 Cookies 與本地儲存

Tue, 14 Apr 2026 22:19:55 +0800

如果你用 Playwright CLI 做瀏覽器自動化，storage state 幾乎就是最常用的能力之一。它的作用很直接：把目前瀏覽器裡的登入狀態和本地狀態保存下來，後面繼續重用，避免每次都重新登入。

01 保存目前的 storage state

最常見的情境，就是先登入一次，再把目前狀態匯出到檔案。

`1`	`playwright-cli storage-state save auth.json`

這條命令會把目前瀏覽器 context 中的狀態保存到 auth.json。之後如果想重用登入狀態，通常就是從這一步開始。

02 載入既有的 storage state

已有狀態檔後，可以在啟動時直接載入。

`1`	`playwright-cli --storage-state auth.json`

它會用 auth.json 裡的狀態啟動瀏覽器 context。最常見的用途，就是跳過重複登入，直接進入已登入環境。

03 查看目前 cookies

如果你只是想確認目前 session 裡到底有哪些 cookies，可以直接查看。

`1`	`playwright-cli cookies`

這條命令會列出目前 context 中的 cookies，適合用來排查登入狀態是否存在、cookie 是否寫入成功。

04 設定 cookies

如果你已經有 cookie 資料，也可以直接寫入。

`1`	`playwright-cli cookies set '[{"name":"session","value":"abc","domain":"example.com","path":"/"}]'`

這個用法適合調試驗證流程、重現特定 session，或在腳本執行前手動注入 cookie 條件。

05 讀取 localStorage

有些網站的登入狀態或前端狀態不只存在 cookies 裡，也會放在 localStorage。

`1`	`playwright-cli local-storage`

這條命令用來查看目前頁面的 localStorage 內容。排查「明明像是登入了，但頁面行為還是不對」時，這一步很有用。

06 寫入 localStorage

如果需要模擬某些前端狀態，也可以直接設定。

`1`	`playwright-cli local-storage set token abc123`

它會把指定鍵值寫入 localStorage。常見用途是注入 token、偏好設定或某些前端開關。

07 讀取 sessionStorage

sessionStorage 適合查看目前 session 裡的暫時狀態。

`1`	`playwright-cli session-storage`

這條命令會輸出目前頁面的 sessionStorage。如果某個頁面流程依賴一次性的 session 資料，可以從這裡檢查。

08 寫入 sessionStorage

需要時，也可以手動設定 sessionStorage。

`1`	`playwright-cli session-storage set key value`

它適合重現依賴暫時狀態的頁面行為，或補齊初始化步驟所需的欄位。

09 查看 IndexedDB

對較重的 Web 應用來說，真正關鍵的本地資料可能在 IndexedDB 裡。

`1`	`playwright-cli indexed-db`

這條命令用來查看目前頁面的 IndexedDB 資料。遇到複雜單頁應用、離線快取或本地資料庫式狀態時，可以優先檢查這裡。

10 一個最實用的工作流

如果你只是想穩定重用登入狀態，最簡單的流程通常是這樣：

先打開站點並手動完成登入。
執行下面這條命令保存狀態：

`1`	`playwright-cli storage-state save auth.json`

後續執行時直接載入：

`1`	`playwright-cli --storage-state auth.json`

如果載入後頁面還是異常，再繼續檢查：

playwright-cli cookies
playwright-cli local-storage
playwright-cli session-storage
playwright-cli indexed-db

這個順序已經能覆蓋大部分「狀態沒有完整恢復」的問題。

11 使用時要注意什麼

有三點最值得注意：

storage state 檔案本質上是敏感資料，裡面可能包含登入 cookie 或 token，不要隨便提交到倉庫。
只恢復 cookies 不一定夠，很多現代網站還依賴 localStorage、sessionStorage 或 IndexedDB。
狀態檔不是永久有效，cookie 過期、帳號變更或環境切換後，通常都要重新生成。

12 快速總結

如果只記一句話：

Playwright CLI 的 storage state，就是把瀏覽器目前狀態保存下來，再在後續任務裡繼續使用。

而在實際排查裡，最常用的一組命令就是這些：

playwright-cli storage-state save auth.json
playwright-cli --storage-state auth.json
playwright-cli cookies
playwright-cli local-storage
playwright-cli session-storage
playwright-cli indexed-db

先保存，再載入；如果還是不對，再分層檢查 cookies 和各類本地儲存，基本就是這份參考文件最實用的部分。

參考連結

Playwright CLI storage-state 參考文件：https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/references/storage-state.md
Playwright CLI 專案首頁：https://github.com/microsoft/playwright-cli

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 很可能會比傳統的人類手動除錯方式更順手。

Playwright CLI on KnightLi的博客

Playwright CLI 視訊錄製：錄屏、章節標記、Overlay 與除錯取捨

01 基礎錄製流程

02 最佳實務

1. 使用描述性檔名

2. 錄製完整 hero script

03 Overlay API 速覽

04 Tracing 和 Video 的差異

05 使用限制

06 快速總結

參考連結

Playwright CLI 會話管理：多瀏覽器會話、隔離、持久化與清理

01 命名瀏覽器會話

02 瀏覽器會話隔離了什麼

03 瀏覽器會話相關命令

04 用環境變數設定預設會話

05 常見模式：並發抓取

06 常見模式：A/B 測試會話

07 持久化瀏覽器 profile

08 預設瀏覽器會話

09 打開時附帶會話配置

10 官方給出的最佳實務

1. 用有語義的會話名

2. 用完及時清理

3. 刪除陳舊瀏覽器資料

11 快速總結

參考連結

Playwright CLI storage state 用法：保存登入狀態、讀取 Cookies 與本地儲存

01 保存目前的 storage state

02 載入既有的 storage state

03 查看目前 cookies

04 設定 cookies

05 讀取 localStorage

06 寫入 localStorage

07 讀取 sessionStorage

08 寫入 sessionStorage

09 查看 IndexedDB

10 一個最實用的工作流

11 使用時要注意什麼

12 快速總結

參考連結

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`