playwright-cli

Playwright CLI

npx playwright を使用したターミナルベースのブラウザー自動化です。このスキルでは、テストの実行、codegen によるテストコードの生成、スクリーンショット／PDF の作成、CI のシャーディングフラグといった CLI の機能を扱います。

対象範囲

やりたいこと	使用するもの
E2E テストの実行	npx playwright test（このスキル）
ブラウザーセッションを記録 → テストコードを生成	npx playwright codegen（このスキル）
URL からスクリーンショット／PDF を一度だけ作成	npx playwright screenshot / pdf（このスキル）
Playwright テストスイートの作成／レビュー／調整	playwright-test スキル
エージェント主導のリアルタイムなブラウザー操作（移動 → クリック → 読み取り → アサーション）	mcp__claude-in-chrome__* ツール（このスキルの対象外）
インタラクティブなデータスクレイピング／SPA の調査	claude-in-chrome MCP ツール、または npx playwright test で実行する Playwright スクリプト

プログラムからページを移動し、「Load More」をクリックして DOM を抽出し、JSON を保存する必要があるデータスクレイピング／SPA のフローでは、tests/*.spec.ts を作成して npx playwright test を実行してください。テスト作成のパターンについては、playwright-test スキルを参照してください。

クイックリファレンス

# Interactive codegen (generates test code from browser actions)
npx playwright codegen https://example.com

# Run all tests
npx playwright test

# Run specific file
npx playwright test tests/login.spec.ts

# Run specific test by title
npx playwright test -g "should login"

# Debug mode (opens Playwright Inspector)
npx playwright test --debug

# UI mode (visual test runner with time-travel)
npx playwright test --ui

# Headed mode (see the browser)
npx playwright test --headed

# Specific browser
npx playwright test --project=chromium

# Generate trace
npx playwright test --trace on

# View report
npx playwright show-report

# Install browsers
npx playwright install
npx playwright install chromium --with-deps  # CI-optimized

CI でのシャーディング

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

スクリーンショット／PDF

# Screenshot from CLI
npx playwright screenshot --browser=chromium https://example.com screenshot.png

# PDF (Chromium only)
npx playwright pdf https://example.com page.pdf