mcpField
P
playwright

playwright

github.com/openaiテスト・品質28.4k8.7k 回インストール18 週間前に更新
リポジトリ

playwright について

playwright は、playwright-cli でターミナルから実ブラウザーを操作するための CLI 優先スキルです。ブラウザー操作と成果物の取得を案内し、Playwright のテスト仕様作成を標準にはしません。

主な機能

  1. 01ターミナルから実ブラウザーを操作
  2. 02スナップショットで要素参照を取得
  3. 03フォームや複数タブを操作
  4. 04スクリーンショット、PDF、トレースを取得

活用シーン

  1. 01Webフォームの入力と送信
  2. 02ページ操作フローの確認
  3. 03デバッグ用のUIフロー記録

インストール

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

$npx skills add https://github.com/openai/skills --skill playwright

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

同梱ファイル

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

LICENSE.txt
NOTICE.txt
agents/
openai.yaml
assets/
playwright-small.svg
references/
cli.md
workflows.md
scripts/
playwright_cli.sh

詳細

Playwright CLI スキル

playwright-cli を使って、ターミナルから実際のブラウザーを操作します。グローバルにインストールされていない場合でも CLI が動作するように、同梱のラッパースクリプトを優先して使用してください。 このスキルは CLI 優先の自動化として扱ってください。ユーザーが明示的にテストファイルを求めた場合を除き、@playwright/test に切り替えないでください。

前提条件の確認（必須）

コマンドを提案する前に、npx が利用可能かどうかを確認してください（ラッパーは npx に依存しています）。

command -v npx >/dev/null 2>&1

利用できない場合は作業を一時停止し、Node.js/npm（npx を提供します）のインストールをユーザーに依頼してください。以下の手順をそのまま提示してください。

# Verify Node/npm are installed
node --version
npm --version

# If missing, install Node.js/npm, then:
npm install -g @playwright/cli@latest
playwright-cli --help

npx が存在することを確認できたら、ラッパースクリプトを使って作業を進めます。playwright-cli のグローバルインストールは任意です。

スキルのパス（一度だけ設定）

export CODEX_HOME="${CODEX_HOME:-$HOME/.codex}"
export PWCLI="$CODEX_HOME/skills/playwright/scripts/playwright_cli.sh"

ユーザースコープのスキルは $CODEX_HOME/skills（デフォルト: ~/.codex/skills）にインストールされます。

クイックスタート

ラッパースクリプトを使用します。

"$PWCLI" open https://playwright.dev --headed
"$PWCLI" snapshot
"$PWCLI" click e15
"$PWCLI" type "Playwright"
"$PWCLI" press Enter
"$PWCLI" screenshot

ユーザーがグローバルインストールを希望する場合は、こちらも有効です。

npm install -g @playwright/cli@latest
playwright-cli --help

基本的なワークフロー

  1. ページを開く。
  2. スナップショットを取得して、安定した要素の参照（ref）を得る。
  3. 最新のスナップショットの ref を使って操作する。
  4. ナビゲーションや大きな DOM の変化の後に、再度スナップショットを取得する。
  5. 必要に応じて成果物（スクリーンショット、PDF、トレース）を取得する。

最小限の流れ:

"$PWCLI" open https://example.com
"$PWCLI" snapshot
"$PWCLI" click e3
"$PWCLI" snapshot

スナップショットを取り直すタイミング

次の場合には、スナップショットを取り直してください。

  • ナビゲーションを行った後
  • UI が大きく変わる要素をクリックした後
  • モーダルやメニューを開いたり閉じたりした後
  • タブを切り替えた後

ref は古くなることがあります。ref が見つからないためにコマンドが失敗した場合は、スナップショットを取り直してください。

推奨パターン

フォームの入力と送信
"$PWCLI" open https://example.com/form
"$PWCLI" snapshot
"$PWCLI" fill e1 "[email protected]"
"$PWCLI" fill e2 "password123"
"$PWCLI" click e3
"$PWCLI" snapshot
トレースを使った UI フローのデバッグ
"$PWCLI" open https://example.com --headed
"$PWCLI" tracing-start
# ...interactions...
"$PWCLI" tracing-stop
複数タブでの作業
"$PWCLI" tab-new https://example.com
"$PWCLI" tab-list
"$PWCLI" tab-select 0
"$PWCLI" snapshot

ラッパースクリプト

ラッパースクリプトは npx --package @playwright/cli playwright-cli を使用するため、グローバルインストールなしで CLI を実行できます。

"$PWCLI" --help

リポジトリが既にグローバルインストールに標準化している場合を除き、ラッパーの使用を優先してください。

参考資料

必要なものだけを開いてください。

  • CLI コマンドリファレンス: references/cli.md
  • 実践的なワークフローとトラブルシューティング: references/workflows.md

ガードレール

  • e12 のような要素 ID を参照する前に、必ずスナップショットを取得してください。
  • ref が古くなっていると思われる場合は、スナップショットを取り直してください。
  • 必要な場合を除き、eval と run-code よりも明示的なコマンドを優先してください。
  • 新しいスナップショットがない場合は、eX のようなプレースホルダーの ref を使用し、その理由を説明してください。run-code で ref を迂回しないでください。
  • 視覚的な確認が役立つ場合は --headed を使用してください。
  • このリポジトリで成果物を取得する場合は output/playwright/ を使用し、新しいトップレベルの成果物フォルダーを作成しないでください。
  • 既定では、Playwright のテスト仕様ではなく CLI コマンドとワークフローを使用してください。

コメント

Markdown 対応