ブラウザ自動化のためのClaude Codeの使い方

ブラウザの自動化は、これまで複雑なスクリプトの作成、セレクターの管理、予測不可能なページ状態への対応が必要でした。Claude Codeは、自然言語でやりたいことを記述するだけで、AIがそれを正確なブラウザアクションに変換することで、このプロセスを変革します。

Claude Codeのブラウザ自動化が強力である理由：

自然言語による制御：セレクターコードを書く代わりに、Claudeに「ログインボタンをクリックして」と指示します
インテリジェントな適応：AIがコンテキストを理解し、ページ変更に適応します
視覚的理解：アクセシビリティツリーとスナップショットモードにより、信頼性の高い要素ターゲティングを提供します
クロスブラウザ対応：Chromium、Firefox、WebKitに対応しています
シームレスな統合：開発ワークフローに直接統合して実行できます

💡

ブラウザのワークフローと並行してAPIをテストしていますか？ Apidogは、視覚的なAPIテストとモックサーバーを提供することで、Claude Codeのブラウザ自動化を補完します。ブラウザテストがAPIコールをトリガーする際、Apidogはリクエスト・レスポンスサイクル全体を検証するのに役立ちます。Apidogを無料で試して、包括的なエンドツーエンドテストワークフローを構築しましょう。

アプリをダウンロード

このガイドでは、基本的なセットアップから、MCP (Model Context Protocol) サーバーを使用した高度な自動化パターンまで、すべてを網羅しています。

ブラウザ自動化オプションの理解

Claude Codeは、ブラウザ自動化に複数のアプローチを提供しており、それぞれ異なるユースケースに適しています。

オプション1: Playwright MCP (推奨)

MicrosoftのPlaywright MCPは、Claude Codeでのブラウザ自動化に推奨されるアプローチです。以下を提供します。

公式サポート：Microsoftによってメンテナンスされています
クロスブラウザ：Chromium、Firefox、WebKitに対応しています
アクセシビリティツリーモード：壊れやすいセレクターなしで信頼性の高い要素ターゲティングを実現します
活発な開発：定期的な更新と改善が行われています

オプション2: Puppeteer MCP (コミュニティ)

公式のPuppeteer MCPパッケージは非推奨となりましたが、コミュニティがメンテナンスしている代替手段が存在します。

使い慣れたAPI：すでにPuppeteerを知っている場合
Chromeに特化：Chrome/Chromiumに最適化されています
レガシーサポート：既存のPuppeteerベースのワークフロー向け

オプション3: Claude Computer Use API

ブラウザだけでなく、完全なデスクトップ制御が必要なシナリオの場合：

完全なデスクトップアクセス：任意のアプリケーションを制御できます
スクリーンショットベース：画面コンテンツの視覚的理解
API統合：カスタム自動化ソリューションを構築できます

比較表

機能	Playwright MCP	Puppeteer MCP	Computer Use API
ブラウザサポート	Chromium, Firefox, WebKit	Chromiumのみ	任意のブラウザ
メンテナンス	Microsoft (公式)	コミュニティ	Anthropic
要素のターゲティング	アクセシビリティツリー	CSSセレクター	ビジュアル/座標
ヘッドレスモード	はい	はい	いいえ（ディスプレイが必要）
最適用途	ウェブテスト、スクレイピング	レガシープロジェクト	デスクトップ自動化

Playwright MCPのセットアップ

Playwright MCPは、Claude Codeにブラウザ自動化を追加する推奨方法です。セットアップ方法は以下の通りです。

前提条件

Node.js 18以降
Claude Code CLIがインストールされていること
npmまたはnpxが利用可能であること

ステップ1: MCPサーバーの設定

Claude Codeの設定にPlaywright MCPを追加します。.claude/settings.jsonを作成または編集してください。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

ステップ2: インストールの確認

Claude Codeを起動し、MCPサーバーが実行されていることを確認します。

claude

Playwright MCPが利用可能なツールとしてリストされているはずです。簡単なコマンドでテストしてください。

https://example.com に移動し、ページタイトルを教えてください

ステップ3: ブラウザオプションの設定

より詳細な制御のために、MCPサーバー設定をカスタマイズします。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

利用可能なオプション：

--browser：`chromium`、`firefox`、または`webkit`を選択
--headless：ブラウザウィンドウを表示せずに実行
--port：カスタムポートを指定（デフォルト：自動割り当て）
--host：特定のホストにバインド（デフォルト：localhost）

ステップ4: CI/CDでの実行

自動化されたパイプラインでは、ヘッドレスモードを使用します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser", "chromium"
      ]
    }
  }
}

代替手段: Puppeteer MCP

Puppeteerを好む場合、または既存のPuppeteerベースのワークフローがある場合は、コミュニティがメンテナンスしているMCPサーバーを使用できます。

インストール

コミュニティのPuppeteer MCPサーバーを使用します。

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"]
    }
  }
}

代替手段: puppeteer-mcp-claude

包括的なブラウザ自動化を備えた別のコミュニティオプションです。

# リポジトリをクローン
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

.claude/settings.jsonで設定します。

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/puppeteer-mcp-claude/index.js"]
    }
  }
}

Playwrightとの主な違い

側面	Playwright MCP	Puppeteer MCP
セットアップ	npx (インストール不要)	npmインストールが必要な場合あり
ブラウザ	複数	Chrome/Chromium
セレクター戦略	アクセシビリティツリー	CSS/XPath
メンテナンス	Microsoft	コミュニティ

基本的なブラウザ自動化コマンド

MCPサーバーを設定すると、自然言語を使用してブラウザを制御できます。

要素との対話

「サインイン」ボタンをクリック

メールフィールドに「my-username」と入力

国ドロップダウンから「United States」を選択

「記憶する」チェックボックスをチェック

ページコンテンツの読み取り

メイン見出しのテキストコンテンツを取得

現在のページ上のすべてのリンクをリストアップ

このページから製品価格を抽出

スクリーンショットの撮影

現在のページのスクリーンショットを撮る

ナビゲーションメニューのみのスクリーンショットをキャプチャ

待機とタイミング

ロードスピナーが消えるまで待機

3秒待ってから送信ボタンをクリック

「成功」メッセージが表示されるまで待機

フォーム処理

お問い合わせフォームに記入します：
- 名前：John Doe
- メール：john@example.com
- メッセージ：Testing automation
その後、フォームを送信します

複雑なインタラクション

フッターまでスクロールし、「プライバシーポリシー」リンクをクリック

「製品」メニューにホバーし、「エンタープライズ」をクリック

スライダーを75%の位置にドラッグ

高度な自動化パターン

パターン1: マルチステップワークフロー

複雑な自動化シーケンスを作成します。

以下のチェックアウトフローを自動化します：
1. https://shop.example.com に移動
2. 「ワイヤレスヘッドホン」を検索
3. 最初の製品結果をクリック
4. 利用可能であればサイズ「Medium」を選択
5. 「カートに追加」をクリック
6. カートに進み、アイテムがあることを確認
7. カートのスクリーンショットを撮る

パターン2: データ抽出

ウェブページから構造化データを抽出します。

https://news.ycombinator.com にアクセスし、以下の情報を含む上位10件のストーリーを抽出します：
- タイトル
- URL
- ポイント
- コメント数
- 投稿からの時間

JSON形式で出力

パターン3: 認証フロー

ログインシーケンスを処理します。

アプリケーションにログインします：
1. https://app.example.com/login に移動
2. ユーザー名：test@example.com を入力
3. 環境変数 LOGIN_PASSWORD からパスワードを入力
4. 「サインイン」をクリック
5. ダッシュボードがロードされるまで待機
6. 「ようこそ」のテキストを確認してログインが成功したことを検証

パターン4: ビジュアルリグレッションテスト

ページの状態を比較します。

1. https://staging.example.com に移動
2. 「staging-homepage」という名前で全画面スクリーンショットを撮る
3. https://production.example.com に移動
4. 「production-homepage」という名前で全画面スクリーンショットを撮る
5. 2つのスクリーンショットを比較し、相違点を報告

パターン5: 監視とアラート

監視ワークフローを作成します。

サービスが正常であるか確認します：
1. https://status.example.com に移動
2. 「All Systems Operational」というテキストを探す
3. 見つからない場合は、現在のステータスメッセージを抽出
4. ドキュメント用にスクリーンショットを撮る
5. 結果を報告

パターン6: API検証を伴うE2Eテスト

ブラウザテストとAPIテストを組み合わせます。

ユーザー登録フローをテストします：
1. https://app.example.com/register に移動
2. テストデータで登録フォームに記入
3. フォームを送信
4. 確認ページが表示されるまで待機
5. APIレスポンスを確認してユーザーが作成されたことを検証
6. 成功ページのスクリーンショットを撮る

APIを含むフローをテストする場合、Apidogを使用してバックエンドのレスポンスを検証します。ブラウザアクションが正しいAPIコールをトリガーし、期待されるレスポンスを受け取っていることを確認できます。

実際のユースケース

ユースケース1: 自動化されたコードレビューのスクリーンショット

コードレビュー用の視覚的なドキュメントをキャプチャします。

PRレビューのために、以下のスクリーンショットをキャプチャします：
1. 変更前のログインページ
2. 変更後のログインページ
3. 無効な資格情報が入力されたときのエラー状態
4. 有効なログイン後の成功リダイレクト

すべてのスクリーンショットを ./review-screenshots/ に保存します

ユースケース2: 競合分析

競合他社のウェブサイトを監視します。

競合の価格を分析します：
1. https://competitor.com/pricing に移動
2. すべてのプラン名と価格を抽出
3. 価格ページのスクリーンショットを撮る
4. 現在の価格データと比較
5. 要約レポートを生成

ユースケース3: 自動化されたフォームテスト

さまざまなシナリオでフォームのバリデーションをテストします。

お問い合わせフォームのバリデーションをテストします：

テスト1: 空の送信
- 空のフォームを送信
- すべての必須フィールドエラーが表示されることを検証
- スクリーンショット: empty-form-errors.png

テスト2: 無効なメールアドレス
- 名前に「John」と入力
- メールに「invalid-email」と入力
- 送信
- メールバリデーションエラーを検証
- スクリーンショット: invalid-email-error.png

テスト3: 有効な送信
- すべてのフィールドを正しく記入
- 送信
- 成功メッセージを検証
- スクリーンショット: form-success.png

ユースケース4: SEO監査

SEOチェックを自動化します。

https://mysite.com でSEO監査を実行します：
1. ページタイトルの長さ（50-60文字であるべき）を確認
2. メタディスクリプションの存在と長さを確認
3. H1タグが存在し、ユニークであることを検証
4. すべての画像にalt属性があることを確認
5. カノニカルURLが設定されていることを検証
6. ページ上の壊れたリンクを確認
7. 監査レポートを生成

ユースケース5: アクセシビリティテスト

アクセシビリティチェックを自動化します。

https://app.example.com でアクセシビリティ監査を実行します：
1. ホームページに移動
2. 色のコントラスト比を確認
3. すべてのインタラクティブ要素がキーボードでアクセス可能であることを検証
4. ARIAラベルが存在することを確認
5. フォーカスインジケーターが表示されていることを検証
6. スクリーンリーダーシミュレーションでテスト
7. アクセシビリティレポートを生成

ユースケース6: パフォーマンス監視

ページロードパフォーマンスを追跡します。

ページロードパフォーマンスを監視します：
1. ブラウザキャッシュをクリア
2. https://app.example.com に移動
3. 最初のコンテンツ表示までの時間を記録
4. インタラクティブになるまでの時間を記録
5. ネットワークウォーターフォールをキャプチャ
6. 完全にロードされたときにスクリーンショットを撮る
7. ベースラインメトリクスと比較

CI/CDパイプラインとの統合

GitHub Actionsとの統合

CIパイプラインにブラウザ自動化を追加します。

# .github/workflows/e2e-tests.yml
name: E2Eブラウザテスト

on:
  pull_request:
    branches: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Node.jsのセットアップ
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Playwrightブラウザのインストール
        run: npx playwright install --with-deps chromium

      - name: Claude Codeのインストール
        run: npm install -g @anthropic-ai/claude-code

      - name: ブラウザテストの実行
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            以下のブラウザテストを実行します：
            1. ${{ env.STAGING_URL }} に移動
            2. テスト資格情報でログインフローをテスト
            3. ダッシュボードが正しくロードされることを検証
            4. 各ステップのスクリーンショットを撮る
            5. 失敗を報告
          "

      - name: スクリーンショットのアップロード
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: screenshots/

ブラウザテストスキルの作成

ブラウザテスト用の再利用可能なスキルを作成します。

---
name: browser-test-runner
version: "1.0.0"
description: Playwright MCPを使用してブラウザベースのE2Eテストを実行します
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# ブラウザテストランナー

Playwright MCPを使用した自動ブラウザテストスキル。

## 使用方法

```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full

Claude Computer Use API

完全なデスクトップ制御が必要なシナリオの場合、ClaudeのComputer Use APIは包括的な自動化機能を提供します。

概要

Computer Useは、Claudeが以下のことを可能にするベータ機能です。

画面のスクリーンショットを撮る
マウスを移動してクリックする
テキストを入力する
スクロールしてナビゲートする

基本的なセットアップ

import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20250124",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1
        }
    ],
    messages=[
        {
            "role": "user",
            "content": "Open Chrome and navigate to github.com"
        }
    ],
    betas=["computer-use-2025-01-24"]
)

Computer UseとMCPの使い分け

シナリオ	推奨されるアプローチ
ウェブスクレイピング	Playwright MCP
E2Eテスト	Playwright MCP
デスクトップアプリの自動化	Computer Use API
クロスアプリケーションワークフロー	Computer Use API
CI/CDパイプライン	Playwright MCP (ヘッドレス)
ビジュアルテスト	どちらでも

Computer Useのベストプラクティス

クリックする前に必ずアクションを確認する
可能な場合は特定の座標を使用する
連続するアクションの間に遅延を追加する
クリックミスに対するエラー回復を実装する
スコープを必要な権限に制限する

セキュリティに関する考慮事項

認証処理

すべきこと：

資格情報には環境変数を使用する
テスト後に資格情報をクリアする
本番環境の資格情報ではなく、テストアカウントを使用する

すべきでないこと：

コマンドにパスワードをハードコードしない
スクリーンショットに資格情報を保存しない
認証状態ファイルを共有しない

# 環境変数を使用
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="secure-test-password"

環境変数 TEST_USERNAME と TEST_PASSWORD の資格情報を使用してログインします

データプライバシー

すべきこと：

スクリーンショット内の機密データをマスクする
テスト後にブラウザデータをクリアする
ステージング/テスト環境を使用する

すべきでないこと：

実際のユーザーデータを含むページのスクリーンショットを撮らない
個人情報を保存しない
実際のデータで本番環境に対して実行しない

ネットワークセキュリティ

すべきこと：

ブラウザのネットワークアクセスを制限する
許可されたドメインには許可リストを使用する
ネットワークリクエストを監視する

すべきでないこと：

無制限のインターネットアクセスを許可しない
本番環境でSSL証明書のエラーを無視しない
信頼できないコンテンツをダウンロードしない

MCPサーバーのセキュリティ

可能な場合はローカルで実行する
使用前にMCPサーバーコードを監査する
ツールの権限を最小限に制限する
MCPサーバーのログを監視して異常がないか確認する

まとめ

Claude Codeによるブラウザ自動化は、開発者がウェブテスト、スクレイピング、自動化に取り組む方法を変革します。自然言語の指示とPlaywrightのような強力なMCPサーバーを組み合わせることで、複雑なスクリプトを書くことなく、洗練された自動化ワークフローを構築できます。

包括的なテストのために、Claude Codeのブラウザ自動化をAPI検証と組み合わせましょう。Apidogを無料でダウンロードして、フロントエンドとバックエンドの両方をカバーする完全なテストワークフローを構築してください。

アプリをダウンロード