mcpField
O
openai-playwright

openai-playwright

github.com/trailofbitsエージェントワークフロー52278 回インストール15 週間前に更新
リポジトリ

openai-playwright について

openai-playwrightは、Playwright CLIで実ブラウザーを操作するターミナル中心のエージェントスキルです。スナップショットと要素参照を使った操作手順に加え、フォーム、タブ、トレースの扱い方を示します。

主な機能

  1. 01ターミナルからのブラウザー操作
  2. 02スナップショットによる要素参照
  3. 03フォーム入力と送信
  4. 04複数タブの操作
  5. 05トレースと成果物の取得

活用シーン

  1. 01エージェントによるブラウザー操作の自動化
  2. 02ウェブフォームの入力と送信
  3. 03トレースを使ったUIフローのデバッグ

インストール

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

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

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

同梱ファイル

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

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 のグローバルインストールは任意です。

スクリプトとリファレンスは {baseDir}/ の下にあります。

クイックスタート

ラッパースクリプトを使ってください。

"$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. スナップショットを取得して、安定した要素参照を得ます。
  3. 最新のスナップショットに含まれる参照を使って操作します。
  4. ページ遷移後や DOM に大きな変更があった後は、スナップショットを再取得します。
  5. 必要に応じて成果物（スクリーンショット、PDF、トレース）を保存します。

最小限のループ：

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

スナップショットを再取得するタイミング

次の操作の後は、スナップショットを再取得してください。

  • ページ遷移
  • UI が大きく変わる要素のクリック
  • モーダルやメニューの開閉
  • タブの切り替え

参照が古くなる場合があります。参照が見つからずコマンドが失敗した場合は、スナップショットを再取得してください。

推奨パターン

フォームへの入力と送信
"$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 を参照する前に、必ずスナップショットを取得してください。
  • 参照が古いように見える場合は、スナップショットを再取得してください。
  • 必要な場合を除き、eval や run-code より明示的なコマンドを優先してください。
  • 最新のスナップショットがない場合は、eX のようなプレースホルダー参照を使い、その理由を説明してください。run-code で参照を回避しないでください。
  • 画面を見て確認すると役立つ場合は、--headed を使ってください。
  • このリポジトリで成果物を保存する場合は output/playwright/ を使い、最上位に新しい成果物用フォルダーを追加しないでください。
  • Playwright のテスト仕様ではなく、CLI コマンドとワークフローを標準としてください。

使用する場合

使用しない場合

コメント

Markdown 対応