mcpField
P
playwright

playwright

github.com/letta-aiテスト・品質152115 回インストール4 週間前に更新
リポジトリ

playwright について

playwright は、playwright-cli で実際のブラウザーをコマンドラインから操作するスキルです。ページのスナップショットと要素参照を使った操作を案内し、フォーム、タブ、トレースのワークフローを含みます。

主な機能

  1. 01コマンドラインからのブラウザー起動と操作
  2. 02ページのスナップショットと要素参照による操作
  3. 03フォーム入力と複数タブの移動
  4. 04トレース記録とスクリーンショット・PDFの取得

活用シーン

  1. 01ブラウザー上のフォーム操作の自動化
  2. 02操作前のページ要素の確認
  3. 03トレースを使った複数段階のUIフローのデバッグ
  4. 04ブラウザーのスクリーンショットやPDFの取得

インストール

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

$npx skills add https://github.com/letta-ai/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 のグローバルインストールは任意です。

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

# Set SKILL_DIR to the directory containing this SKILL.md
export PWCLI="<path-to-skill>/scripts/playwright_cli.sh"

<path-to-skill> を実際のスキルのインストールディレクトリ（例：.skills/playwright または ~/.letta/skills/playwright）に置き換えてください。

クイックスタート

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

"$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 対応