playwright-mcp-dev について
Playwright のコントリビューター向けリポジトリスキルです。MCP ツールと CLI の拡張に必要な実装、登録、設定、テスト、lint の手順を説明します。
主な機能
- 01MCP ツールの実装手順
- 02CLI コマンド開発のガイド
- 03設定更新の手順
- 04テストと lint のコマンド
活用シーン
- 01Playwright MCP ツールの追加
- 02Playwright CLI の拡張
- 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" を実行すると、最新の利用可能なコマンドを確認でき、スキルファイルの更新に利用できます。
コメント
Markdown 対応