SKILL.md
readonlyread-only
name
playwright-cli
description
自動化瀏覽器操作、測試網頁，並處理 Playwright 測試。
使用 playwright-cli 進行瀏覽器自動化
快速開始
# 開啟新瀏覽器
playwright-cli open
# 導航到頁面
playwright-cli goto https://playwright.dev
# 使用快照中的參考與頁面互動
playwright-cli click e15
playwright-cli type "page.click"
playwright-cli press Enter
# 截圖（較少使用，快照更常見）
playwright-cli screenshot
# 關閉瀏覽器
playwright-cli close
指令
核心
playwright-cli open
# 開啟並立即導航
playwright-cli open https://example.com/
playwright-cli goto https://playwright.dev
playwright-cli type "搜尋關鍵字"
playwright-cli click e3
playwright-cli dblclick e7
# --submit 在填寫元素後按下 Enter
playwright-cli fill e5 "user@example.com" --submit
playwright-cli drag e2 e8
# 將檔案或資料拖放到元素上（從頁面外部）
playwright-cli drop e4 --path=./image.png
playwright-cli drop e4 --data="text/plain=hello world"
playwright-cli hover e4
playwright-cli select e9 "option-value"
playwright-cli upload ./document.pdf
playwright-cli check e12
playwright-cli uncheck e12
playwright-cli snapshot
playwright-cli eval "document.title"
playwright-cli eval "el => el.textContent" e5
# 取得元素 id、class 或快照中未顯示的任何屬性
playwright-cli eval "el => el.id" e5
playwright-cli eval "el => el.getAttribute('data-testid')" e5
playwright-cli dialog-accept
playwright-cli dialog-accept "確認文字"
playwright-cli dialog-dismiss
playwright-cli resize 1920 1080
playwright-cli close
導航
playwright-cli go-back
playwright-cli go-forward
playwright-cli reload
鍵盤
playwright-cli press Enter
playwright-cli press ArrowDown
playwright-cli keydown Shift
playwright-cli keyup Shift
滑鼠
playwright-cli mousemove 150 300
playwright-cli mousedown
playwright-cli mousedown right
playwright-cli mouseup
playwright-cli mouseup right
playwright-cli mousewheel 0 100
另存為
playwright-cli screenshot
playwright-cli screenshot e5
playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf
分頁
playwright-cli tab-list
playwright-cli tab-new
playwright-cli tab-new https://example.com/page
playwright-cli tab-close
playwright-cli tab-close 2
playwright-cli tab-select 0
儲存
playwright-cli state-save
playwright-cli state-save auth.json
playwright-cli state-load auth.json
# Cookies
playwright-cli cookie-list
playwright-cli cookie-list --domain=example.com
playwright-cli cookie-get session_id
playwright-cli cookie-set session_id abc123
playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure
playwright-cli cookie-delete session_id
playwright-cli cookie-clear
# LocalStorage
playwright-cli localstorage-list
playwright-cli localstorage-get theme
playwright-cli localstorage-set theme dark
playwright-cli localstorage-delete theme
playwright-cli localstorage-clear
# SessionStorage
playwright-cli sessionstorage-list
playwright-cli sessionstorage-get step
playwright-cli sessionstorage-set step 3
playwright-cli sessionstorage-delete step
playwright-cli sessionstorage-clear
網路
playwright-cli route "**/*.jpg" --status=404
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
playwright-cli route-list
playwright-cli unroute "**/*.jpg"
playwright-cli unroute
開發者工具
playwright-cli console
playwright-cli console warning
playwright-cli requests
playwright-cli request 5
playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
playwright-cli run-code --filename=script.js
playwright-cli tracing-start
playwright-cli tracing-stop
playwright-cli video-start video.webm
playwright-cli video-chapter "章節標題" --description="詳細說明" --duration=2000
playwright-cli video-stop
# 為後續每個動作（點擊、輸入等）加上標註，顯示動作名稱並高亮目標
playwright-cli video-show-actions --duration=600 --position=top-right
playwright-cli video-hide-actions
# 啟動儀表板進行 UI 審查/設計回饋 — 使用者在頁面上標註，您收到標註後的截圖、快照和筆記
playwright-cli show --annotate
# 從元素的參考或選擇器生成 Playwright 定位器
playwright-cli generate-locator e5 --raw
# 顯示元素的持續高亮疊加層，可選自訂樣式
playwright-cli highlight e5
playwright-cli highlight e5 --style="outline: 3px dashed red"
# 隱藏單一元素高亮，若未指定目標則隱藏所有頁面高亮
playwright-cli highlight e5 --hide
playwright-cli highlight --hide
原始輸出
全域 --raw 選項會從輸出中移除頁面狀態、生成的程式碼和快照部分，僅回傳結果值。用於將指令輸出傳遞給其他工具。不產生輸出的指令則不回傳任何內容。
playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart'
playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json
playwright-cli --raw snapshot > before.yml
playwright-cli click e5
playwright-cli --raw snapshot > after.yml
diff before.yml after.yml
TOKEN=$(playwright-cli --raw cookie-get session_id)
playwright-cli --raw localstorage-get theme
若要讓結構化輸出將每個回覆包裝為 JSON，請加上 --json
playwright-cli list --json
開啟參數
# 建立工作階段時使用特定瀏覽器
playwright-cli open --browser=chrome
playwright-cli open --browser=firefox
playwright-cli open --browser=webkit
playwright-cli open --browser=msedge
# 使用持久性設定檔（預設設定檔在記憶體中）
playwright-cli open --persistent
# 使用自訂目錄的持久性設定檔
playwright-cli open --profile=/path/to/profile
# 透過 Playwright 擴充功能連接到瀏覽器
playwright-cli attach --extension=chrome
# 透過頻道名稱連接到執行中的 Chrome 或 Edge
playwright-cli attach --cdp=chrome
playwright-cli attach --cdp=msedge
# 透過 CDP 端點連接到執行中的瀏覽器
playwright-cli attach --cdp=http://localhost:9222
# 使用設定檔啟動
playwright-cli open --config=my-config.json
# 關閉瀏覽器
playwright-cli close
# 從已附加的瀏覽器中分離（讓外部瀏覽器繼續執行）
playwright-cli -s=msedge detach
# 刪除預設工作階段的用戶資料
playwright-cli delete-data
在 Windows 上包含 & 的 URL
在 Windows 上，cmd.exe 和 PowerShell 將 & 視為指令分隔符，因此包含多個查詢參數的 URL 會在 playwright-cli 執行前被截斷。在 cmd.exe 中使用 ^& 跳脫 &，或在 PowerShell 中使用 --%：
playwright-cli goto "https://example.com/?a=1^&b=2"
playwright-cli --% goto "https://example.com/?a=1&b=2"
快照
每個指令執行後，playwright-cli 會提供當前瀏覽器狀態的快照。
> playwright-cli goto https://example.com
### Page
- Page URL: https://example.com/
- Page Title: Example Domain
### Snapshot
[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
您也可以使用 playwright-cli snapshot 指令隨時手動擷取快照。以下所有選項可依需求組合使用。
# 預設 - 儲存為以時間戳命名的檔案
playwright-cli snapshot
# 儲存為檔案，當快照是工作流程結果的一部分時使用
playwright-cli snapshot --filename=after-click.yaml
# 僅對元素而非整個頁面進行快照
playwright-cli snapshot "#main"
# 限制快照深度以提高效率，之後再擷取部分快照
playwright-cli snapshot --depth=4
playwright-cli snapshot e34
# 包含每個元素的邊界框，格式為 [box=x,y,width,height]
playwright-cli snapshot --boxes
定位元素
預設情況下，使用快照中的參考來與頁面元素互動。
# 取得包含參考的快照
playwright-cli snapshot
# 使用參考進行互動
playwright-cli click e15
您也可以使用 CSS 選擇器或 Playwright 定位器。
# css 選擇器
playwright-cli click "#main > button.submit"
# role 定位器
playwright-cli click "getByRole('button', { name: 'Submit' })"
# test id
playwright-cli click "getByTestId('submit-button')"
瀏覽器工作階段
# 建立名為 "mysession" 的新瀏覽器工作階段，並使用持久性設定檔
playwright-cli -s=mysession open example.com --persistent
# 使用手動指定的設定檔目錄（當明確要求時使用）
playwright-cli -s=mysession open example.com --profile=/path/to/profile
playwright-cli -s=mysession click e6
playwright-cli -s=mysession close # 停止指定的瀏覽器
playwright-cli -s=mysession delete-data # 刪除持久性工作階段的用戶資料
playwright-cli list
# 關閉所有瀏覽器
playwright-cli close-all
# 強制終止所有瀏覽器程序
playwright-cli kill-all
安裝
如果全域 playwright-cli 指令不可用，請嘗試透過 npx playwright-cli 使用本機版本：
npx --no-install playwright-cli --version
當本機版本可用時，在所有指令中使用 npx playwright-cli。否則，將 playwright-cli 安裝為全域指令：
npm install -g @playwright/cli@latest
範例：表單提交
playwright-cli open https://example.com/form
playwright-cli snapshot
playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot
playwright-cli close
範例：多分頁工作流程
playwright-cli open https://example.com
playwright-cli tab-new https://example.com/other
playwright-cli tab-list
playwright-cli tab-select 0
playwright-cli snapshot
playwright-cli close
範例：使用開發者工具除錯
playwright-cli open https://example.com
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli console
playwright-cli requests
playwright-cli close
playwright-cli open https://example.com
playwright-cli tracing-start
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli tracing-stop
playwright-cli close
範例：互動式工作階段
請使用者進行 UI 審查或設計回饋。使用者在即時頁面上繪製方框並輸入評論；您會收到標註後的截圖、標記區域的快照以及使用者的筆記。每當使用者要求「UI 審查」、「設計回饋」或「詢問使用者想法/需求/意思」時使用：
playwright-cli open https://example.com
playwright-cli show --annotate
特定任務
- 執行與除錯 Playwright 測試 references/playwright-tests.md
- 請求模擬 references/request-mocking.md
- 執行 Playwright 程式碼 references/running-code.md
- 瀏覽器工作階段管理 references/session-management.md
- 規格驅動測試（規劃/生成/修復） references/spec-driven-testing.md
- 儲存狀態（cookies、localStorage） references/storage-state.md
- 測試生成 references/test-generation.md
- 追蹤 references/tracing.md
- 影片錄製 references/video-recording.md
- 檢查元素屬性 references/element-attributes.md
