mcpField
P
playwright

playwright

github.com/netease-youdao開発6.2k55 回インストール今日更新
リポジトリ

playwright について

playwright は、コマンドラインから実ブラウザーを操作するスキルです。Web UI の操作や確認に使え、snapshot による要素参照やスクリーンショット、PDF、トレースの取得に対応します。

主な機能

  1. 01コマンドラインから実ブラウザーを操作
  2. 02snapshot による要素参照の取得
  3. 03クリック、入力、キーボード操作
  4. 04複数タブの管理
  5. 05スクリーンショット、PDF、トレースの取得

活用シーン

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

MCP 対応

ラッパースクリプトから playwright-cli を実行し、npx 経由で @playwright/mcp を呼び出します。

インストール

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

$npx skills add https://github.com/netease-youdao/lobsterai --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 が利用可能か確認してください。

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/mcp@latest
playwright-cli --help

npx が利用可能になったら、ラッパースクリプトを使って進めてください。playwright-cli のグローバルインストールは任意です。

スキルのパス（1 回だけ設定）

export SKILLS_ROOT="${LOBSTERAI_SKILLS_ROOT:-${SKILLS_ROOT:-$HOME/Library/Application Support/LobsterAI/SKILLs}}"
export PWCLI="$SKILLS_ROOT/playwright/scripts/playwright_cli.sh"

インストール済みのスキルは、$LOBSTERAI_SKILLS_ROOT / $SKILLS_ROOT から解決されます（本番環境のデフォルト：アプリの userData/SKILLs。macOS では通常 ~/Library/Application Support/LobsterAI/SKILLs）。

クイックスタート

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

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

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

npm install -g @playwright/mcp@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/mcp 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 対応