Claude Code向けブラウザ自動化MCP

問題: 回帰テストのクリック操作、ページのスクレイピング、QAフローの手動管理は毎日の作業時間を大幅に消費します。MCPブラウザサーバーを使えば、これらすべてをClaudeに任せることができます。

すぐに試せること: Puppeteer MCPサーバーをClaude Codeの設定に追加すれば、最初の自動化を数分で実現できます。以下の設定ファイルに貼り付けるだけです。

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Claudeにこう伝えてください。「ブラウザを開いて、example.comに移動し、スクリーンショットを撮ってください」。ブラウザの起動、ナビゲーション、スクリーンショットのすべてが、あなたのキー操作なしに実行されます。

従来のブラウザ操作といえば、セレクターの配線、状態管理、フォームを1つ送信するだけで50行のコードが必要でした。MCPブラウザサーバーはそれを根本から変えます。結果を言葉で説明すれば、Claudeが操作します。

Puppeteerのコードを50行書く代わりに、こう言うだけです。「このお問い合わせフォームにテストデータを入力して送信してください」。これがスクリプトの全体です。

ブラウザMCPサーバーのインストール

Puppeteer MCPサーバーの設定

Puppeteerの設定はMCPファイルに記述します。CLIでは ~/.claude.json を、Desktopでは claude_desktop_config.json を使用します。

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

保存してClaude Codeを再起動すると、サーバーが登録されます。確認するには、Claudeにブラウザを起動して任意のURLを開くよう依頼してください。

Playwright MCPサーバーのセットアップ

PlaywrightはChrome、Firefox、Safariを1つのパッケージで提供します。本格的なテストスイートにチームがこれを選ぶのはそのためです。まず @modelcontextprotocol/server-playwright をインストールします。

npm install -g @modelcontextprotocol/server-playwright

次に、MCPの設定ファイルに登録します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Playwright MCPの代替: コミュニティ版の @executeautomation/playwright-mcp-server も同等の基本機能を提供します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

クロスブラウザ対応が必要な場合、Claude Codeを使った本格的な自動化では多くのフルテストスイートがPlaywright MCPを選択する理由はここにあります。

できること

シンプルなウェブスクレイピング

スクレイピングしたいデータを普通の言葉で依頼できます。「example.comを開いて、すべての商品リストを見つけ、タイトルと価格をCSVファイルに抽出してください」というリクエストで、ブラウザの起動から要素の検索、データの取得、CSV出力まで全工程が実行されます。

フォームテストの自動化

試してみてください。「localhost:3000のローカル開発サイトを開いて、テストデータでサインアップフォームを入力し、送信して、成功メッセージが表示されることを確認してください」。1文で手動QAのループ全体が置き換わります。ClaudeはURLにアクセスし、適切な入力内容を考え、すべてのフィールドを入力し、成功状態を確認します。

ビジュアルリグレッションテスト

3つのブレークポイントでのスナップショット取得はこう言うだけです。「ホームページを異なる画面サイズ（モバイル、タブレット、デスクトップ）でスクリーンショットを撮り、./screenshots/に保存してください」。

マルチステップのユーザージャーニー

より複雑なフローにも対応しています。「ECサイトの完全な購入フローをシミュレートしてください。商品の閲覧、カートへの追加、テスト情報でのチェックアウト、注文確認ページの確認まで行ってください」。

認証フロー

ログイン状態も1行で完結します。「ステージング環境にログインして、管理ダッシュボードに移動し、すべてのナビゲーションリンクが正しく機能することを確認してください」。

パフォーマンス監視

タイミングの計測も依頼できます。「アプリを開いて、ダッシュボードのページ読み込み時間を計測し、3秒以上かかるページを報告してください」。

ブラウザ自動化のトラブルシューティング

ブラウザの起動に失敗する: ChromeまたはChromiumがシステムに存在する必要があります。Linuxの場合:

sudo apt-get install -y chromium-browser

要素が見つからない: 動的なページには待機処理が必要です。Claudeに伝えてください。「ログインボタンが表示されるのを待ってからクリックしてください」。

タイムアウト: 読み込みが遅いページにはより多くの待機時間が必要です。「ページに移動して、完全に読み込まれるまで最大30秒待ってください」と伝えましょう。

ワークフローへの組み込み

ブラウザ自動化は開発ループの他の部分にもシームレスに組み込めます。

• テスト: ビルド中の回帰テスト実行
• デバッグ: バグを証明するスクリーンショット
• 監視: 本番ページの静かなポーリング
• 開発: すべてのブラウザでの機能確認

MCPツール検索によるコンテキスト最適化

これらのサーバーはMCPツール検索と組み合わせることで効果を発揮します。ツール検索は実際にブラウザが必要なときだけPlaywrightやPuppeteerの定義をコンテキストに読み込むため、コンテキストウィンドウを他の用途のために空けておくことができます。

小さなことから始めてください。まずスクリーンショットのリクエストから。次にフォーム操作へ。そして自然言語のフローに慣れてきたら、完全なエンドツーエンドのユーザージャーニーへと積み上げていきましょう。