mcpField
P
playwright-cli

playwright-cli

github.com/nickcrewテスト・品質6264 回インストール18 週間前に更新
リポジトリ

playwright-cli について

playwright-cliコマンドラインツールを基盤とするブラウザー自動化スキルです。ブラウザー操作、複数タブのワークフロー、セッションとストレージの管理、リクエストのモック、デバッグを扱います。

主な機能

  1. 01ブラウザーの移動とページ操作
  2. 02タブと名前付きセッションの管理
  3. 03スクリーンショットとPDF出力
  4. 04Cookieとストレージ状態の管理
  5. 05ネットワークリクエストのモック
  6. 06コンソール・トレース・動画によるデバッグ

活用シーン

  1. 01ブラウザー上のフォーム送信の自動化
  2. 02複数タブにまたがるワークフローのテスト
  3. 03保存したCookieとストレージ状態の再利用
  4. 04コンソールとネットワーク動作の調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nickcrew/claude-cortex --skill playwright-cli

インストール後、Claude Code で/playwright-cliを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
request-mocking.md
running-code.md
session-management.md
storage-state.md
test-generation.md
tracing.md
video-recording.md

詳細

playwright-cli によるブラウザー自動化

クイックスタート

playwright-cli open https://playwright.dev
playwright-cli click e15
playwright-cli type "page.click"
playwright-cli press Enter

基本的なワークフロー

  1. 移動:playwright-cli open https://example.com
  2. スナップショット内の参照を使って操作します
  3. 重要な変更の後にスナップショットを再取得します

コマンド

基本
playwright-cli open https://example.com/
playwright-cli close
playwright-cli type "search query"
playwright-cli click e3
playwright-cli dblclick e7
playwright-cli fill e5 "[email protected]"
playwright-cli drag e2 e8
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 snapshot --filename=after-click.yaml
playwright-cli eval "document.title"
playwright-cli eval "el => el.textContent" e5
playwright-cli dialog-accept
playwright-cli dialog-accept "confirmation text"
playwright-cli dialog-dismiss
playwright-cli resize 1920 1080
ナビゲーション
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
DevTools
playwright-cli console
playwright-cli console warning
playwright-cli network
playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
playwright-cli tracing-start
playwright-cli tracing-stop
playwright-cli video-start
playwright-cli video-stop video.webm
インストール
playwright-cli install-browser
playwright-cli install-skills
設定
# Use specific browser when creating session
playwright-cli open --browser=chrome
playwright-cli open --browser=firefox
playwright-cli open --browser=webkit
playwright-cli open --browser=msedge
# Connect to browser via extension
playwright-cli open --extension

# Configure the session
playwright-cli config --config my-config.json
playwright-cli config --headed --in-memory --browser=firefox
# Configure named session
playwright-cli --session=mysession config my-config.json
# Start with configured session
playwright-cli open --config=my-config.json
セッション
playwright-cli --session=mysession open example.com
playwright-cli --session=mysession click e6
playwright-cli session-list
playwright-cli session-stop mysession
playwright-cli session-restart mysession
playwright-cli session-stop-all
playwright-cli session-delete
playwright-cli session-delete mysession

例:フォームの送信

playwright-cli open https://example.com/form
playwright-cli snapshot

playwright-cli fill e1 "[email protected]"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot

例:複数タブのワークフロー

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

例:DevTools を使ったデバッグ

playwright-cli open https://example.com
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli console
playwright-cli network
playwright-cli open https://example.com
playwright-cli tracing-start
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli tracing-stop

特定のタスク

コメント