playwright-cli によるブラウザオートメーション

クイックスタート

# 新しいブラウザを開く
playwright-cli open
# ページに移動
playwright-cli goto https://playwright.dev
# スナップショットの ref を使ってページと対話
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 "search query"
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 "confirmation text"
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

# クッキー
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

DevTools

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 "Chapter Title" --description="Details" --duration=2000
playwright-cli video-stop

# UI レビュー / デザイン フィードバック用ダッシュボードを起動 — ユーザーがページに注釈を付けると、注釈付きスクリーンショット、スナップショット、メモを受け取ります
playwright-cli show --annotate

# ref またはセレクタから要素の 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

Open パラメータ

# セッション作成時に特定のブラウザを使用
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 Extension 経由でブラウザに接続
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

スナップショット

各コマンド後、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

要素のターゲット指定

デフォルトでは、スナップショットの ref を使用してページ要素と対話します。

# ref を含むスナップショットを取得
playwright-cli snapshot

# ref を使用して対話
playwright-cli click e15

CSS セレクタまたは Playwright ロケータを使用することもできます。

# CSS セレクタ
playwright-cli click "#main > button.submit"

# role ロケータ
playwright-cli click "getByRole('button', { name: 'Submit' })"

# テスト 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

例：DevTools によるデバッグ

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
• 仕様駆動テスト（plan / generate / heal） references/spec-driven-testing.md
• ストレージ状態（クッキー、localStorage） references/storage-state.md
• テスト生成 references/test-generation.md
• トレーシング references/tracing.md
• ビデオ記録 references/video-recording.md
• 要素属性の検査 references/element-attributes.md