mcpField
P
playwright

playwright

github.com/mengto生産性7.1k64 回インストール5 日前に更新
リポジトリ

playwright について

`playwright-cli`で実ブラウザーをターミナルから操作する、コマンドライン中心のスキルです。Playwrightのテスト仕様ファイルを既定とせず、ページ確認や操作、成果物の取得を案内します。

主な機能

  1. 01ページの表示とスナップショット確認
  2. 02スナップショットの要素参照による操作
  3. 03フォーム入力と送信
  4. 04スクリーンショット、PDF、トレースの取得
  5. 05複数のブラウザータブの管理

活用シーン

  1. 01ブラウザーUIフローの自動化
  2. 02Webフォームの入力と送信
  3. 03デバッグ用のUIフロー記録

インストール

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

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

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

同梱ファイルassets/playwright-small.svgscripts/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 PWCLI="<skill-root>/playwright/scripts/playwright_cli.sh"

ユーザースコープのスキルは <skill-root> にインストールされます（デフォルト：<skill-root>）。

クイックスタート

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

"$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 "user at example dot com"
"$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 対応