Playwright MCPサーバーの導入方法

MCPサーバーはサービスごとに用意されています。導入する方法は主に2つあります。

• Googleで「Playwright MCPサーバー」と検索して設定情報を探す
• Claude CodeのCLIコマンドで直接追加する

Playwright MCPサーバーはAPIキーなどが不要なため、CLIコマンドで導入するのが簡単です。

CLIでの導入手順

Claude Codeを立ち上げた状態で、MicrosoftのPlaywright MCPのCLIコマンドを実行します。ビックリマーク（!）を使えば、Claude Code内からターミナルコマンドを実行できます。

追加後、/mcp コマンドでPlaywrightが接続されていることを確認します。表示されない場合は、一度Claude Codeを再起動してください。

サブエージェントにMCPを紐付ける

メインコンテキストでMCPを呼び出すこともできますが、レビューに関してはサブエージェント側で分けた方がコンテキストを綺麗に保てます。

サブエージェントの設定ファイル（フロントマター）に mcpServers プロパティを追加することで、特定のMCPサーバーをサブエージェントに紐付けることができます。設定方法はClaude Codeの公式ドキュメントに記載されています。

UIレビュー用サブエージェントの実演

Playwright MCPサーバーを使ったUIレビュー用のサブエージェントを起動すると、以下のような動作を自動で行います。

• シークレットブラウザが自動で立ち上がる
• ページ遷移やフォーム入力、ボタンクリックなどを自動実行
• UIの表示や動作をチェックする

バイパスパーミッションを使えば、一々許可を出さなくて済むのもポイントです。

Playwrightとエンドツーエンドテスト

Playwrightはもともとエンドツーエンド（E2E）テスト用のライブラリです。テストの種類には以下の3段階があります。

• 単体テスト（ユニットテスト）: 個々の関数やコンポーネントのテスト
• 統合テスト: 複数の機能を組み合わせたテスト
• エンドツーエンドテスト: ブラウザを操作して最終的な動作確認を行うテスト

Playwrightは最後のエンドツーエンドテストを担当します。個人開発の場合は開発速度が重要になるため、Playwright MCPによるE2Eテストだけでも十分な効果があります。

コンテキストの流れ

サブエージェントが起動してPlaywright MCPサーバーを呼び出すと、メインのコンテキストは汚されません。サブエージェントのコンテキスト内でレビュー・調査を行い、終了後に要約をメインコンテキストに返します。

UIレビューの結果例

今回の実演では約8分30秒ほどでUIレビューが完了し、以下のような指摘がありました。

• 表示が英語になっている
• ページ固有のタイトルが設定されていない
• ヘッダーレイアウトが崩れている

これらの指摘に対して「直してください」と指示すれば修正してもらえます。レビューを含めることで、より品質の高いアプリケーションを作ることができます。

MCPサーバーの設定ファイルによる管理

CLIコマンド以外にも、.mcp.json ファイルを用意してMCPサーバーの設定を記述し、Claude Codeに読み込ませる方法もあります。複数のMCPサーバーをまとめて管理する場合に便利です。