mcpField
P
playwright-mcp-dev

playwright-mcp-dev

github.com/microsoft開発98.8k313 回インストール今日更新
リポジトリ

playwright-mcp-dev について

Playwright のコントリビューター向けリポジトリスキルです。MCP ツールと CLI の拡張に必要な実装、登録、設定、テスト、lint の手順を説明します。

主な機能

  1. 01MCP ツールの実装手順
  2. 02CLI コマンド開発のガイド
  3. 03設定更新の手順
  4. 04テストと lint のコマンド

活用シーン

  1. 01Playwright MCP ツールの追加
  2. 02Playwright CLI の拡張
  3. 03MCP または CLI オプションの変更

MCP 対応

Playwright で MCP ツールを追加・登録する方法を、機能設定やテストを含めて説明します。

インストール

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

$npx skills add https://github.com/microsoft/playwright --skill playwright-mcp-dev

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

詳細

MCP

MCP ツールの追加

  • packages/playwright/src/mcp/browser/tools/your-tool.ts に新しいツールを作成します
  • packages/playwright/src/mcp/browser/tools.ts にツールを登録します
  • packages/playwright/src/mcp/config.d.ts に ToolCapability を追加します
  • 新しいテストは tests/mcp/mcp-<category>.spec.ts に配置します

ビルド

  • 常に watch が実行されていることを前提とし、型エラーを確認するには lint を実行します

テスト

  • npm run ctest-mcp <category> でテストを実行します
  • test --debug は実行しないでください

CLI

コマンドの追加

  • CLI コマンドは MCP ツールに基づいています。必要に応じて、上記の「MCP ツールの追加」の手順に従って対応する MCP ツールを実装します。
  • 必要に応じて、ツールの新しい CLI カテゴリを追加します:
    • packages/playwright/src/mcp/terminal/command.ts に Category を追加します
    • ドキュメント生成ツール packages/playwright/src/mcp/terminal/helpGenerator.ts を更新します
  • packages/playwright/src/mcp/terminal/commands.ts にコマンドを登録します
  • packages/playwright/src/skill/SKILL.md のスキルファイルと、必要に応じて packages/playwright/src/skill/references/ 内の参照ファイルを更新します
  • 新しいテストは tests/mcp/cli-<category>.spec.ts に配置します

CLI オプションまたは設定オプションの追加

設定に何かを追加する必要がある場合は、次の手順に従います。

  • packages/playwright/src/mcp/program.ts
    • CLI オプションとドキュメントを追加します
  • packages/playwright/src/mcp/config.d.ts
    • オプションを追加し、説明を記載します
  • packages/playwright/src/mcp/config.ts
    • 必要に応じて FullConfig を変更します
    • 必要に応じて CLIOptions を変更します
    • configFromEnv に追加します

ビルド

  • 常に watch が実行されていることを前提とし、型エラーを確認するには lint を実行します

テスト

  • npm run ctest-mcp cli-<category> でテストを実行します
  • test --debug は実行しないでください

Lint

  • コミット前にすべてを lint するには npm run flint を実行します

SKILL ファイル

スキルファイルは packages/playwright/src/skill/SKILL.md にあります。利用可能なすべての CLI コマンドと MCP ツールのドキュメントが含まれています。新しいコマンドまたはツールを追加したら、必ず更新してください。 いつでも "npm run playwright-cli -- --help" を実行すると、最新の利用可能なコマンドを確認でき、スキルファイルの更新に利用できます。

コメント