🖥️

Playwright MCPをClaude CodeとClaude Desktopから使う

2025/06/05に公開

Playwright

E2E

Model Context Protocol

Claude

Claude Code

tech

はじめに

Claude CodeとClaude DesktopでPlaywright MCPサーバーを使用して、ブラウザ操作を自然言語で自動化する方法を詳しく解説します。

Playwright MCPサーバーとは

Playwright MCPサーバーは、Microsoft Playwright（ブラウザ自動化ツール）をModel Context Protocol（MCP）経由で利用できるサーバーです。これにより、Claude CodeやClaude Desktopで自然言語の指示だけでブラウザ操作が可能になります。

主な機能

Webページナビゲーション: 任意のURLへの移動
要素操作: クリック、入力、選択
スクリーンショット: 画面キャプチャ
フォーム操作: 自動入力・送信
データ抽出: Webスクレイピング
E2Eテスト: 自動化されたテストシナリオ

事前準備

Node.jsとnpmのインストール

Playwright MCPサーバーの利用には、Node.jsとnpmが必要です。

# Node.jsバージョン確認
node --version

# npmバージョン確認
npm --version

利用可能なPlaywright MCPサーバー

複数の実装が公開されています：

Microsoft公式版 (推奨)
- パッケージ名: @playwright/mcp
- 最も安定しており、継続的にメンテナンスされている
ExecuteAutomation版
- パッケージ名: @executeautomation/playwright-mcp-server
- 豊富な機能とドキュメント
Automata Labs版
- パッケージ名: @automatalabs/mcp-server-playwright
- シンプルな実装

Claude Codeでの設定

1. Playwrightブラウザのインストール

# Playwrightブラウザをインストール
npx playwright install

# システム依存関係のインストール（Linuxの場合）
sudo npx playwright install-deps

2. Claude Codeの設定ファイル編集

Claude Codeの設定ファイル（~/.config/claude/claude_desktop_config.json）を編集：

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

3. 動作確認

Claude Codeで以下のようなコマンドを実行：

claude "Take a screenshot of https://example.com"
claude "https://google.com にアクセスして 'Playwright' を検索して"

Claude Desktopでの設定

1. 設定ファイルの場所

Claude Desktopの設定ファイルは以下の場所にあります：

Windows:

%APPDATA%\Claude\claude_desktop_config.json

macOS:

~/Library/Application Support/Claude/claude_desktop_config.json

Linux:

~/.config/claude/claude_desktop_config.json

2. 設定ファイルの作成・編集

設定ファイルが存在しない場合は新規作成します：

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

3. 他のMCPサーバーと併用する場合

既存のMCPサーバーがある場合の設定例：

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

4. Claude Desktopの再起動

設定ファイルを保存した後、Claude Desktopを完全に終了してから再起動してください。

5. 動作確認

Claude Desktopで以下のようなメッセージを送信してテスト：

「https://example.com のスクリーンショットを撮ってください」

基本的な使用方法

Webページのスクリーンショット

「https://github.com のスクリーンショットを撮って」

ページ要素の操作

「https://google.com にアクセスして検索ボックスに 'Claude AI' と入力して検索して」

フォームの自動入力

「https://example.com の問い合わせフォームに以下の内容で入力して：
- 名前: 山田太郎
- メール: yamada@example.com
- 件名: お問い合わせ」

複数ページの操作

「https://news.example.com にアクセスして、最新記事のタイトルを5つ抽出して」

E2Eテストの実行

「以下の手順でログインテストを実行して：
1. https://app.example.com にアクセス
2. ユーザー名に 'testuser' を入力
3. パスワードに 'password123' を入力
4. ログインボタンをクリック
5. 各ステップでスクリーンショットを撮影」

実践例：TODOアプリの自動操作

実際のWebアプリケーションを操作する具体例を紹介します。

シナリオ

TODOアプリにアクセス
新しいTODOを登録
登録後の一覧画面をキャプチャ
結果をLINEで通知

実行手順

Claude DesktopまたはClaude Codeで以下のように指示：

「http://localhost/todo-asp/PL/default.asp を開いて新しいTODOを登録して、登録後のTODO一覧画面をキャプチャして、TODO一覧情報をLINEで送って」

実際の動作

Webサイトアクセス: 指定されたURLを開く
フォーム操作:
- 「Add New TODO」ボタンをクリック
- タイトル、説明、優先度、期限を入力
- 「Add」ボタンをクリック
スクリーンショット: 更新された一覧画面を撮影
データ抽出: TODO一覧の内容を解析
外部連携: LINE MCPサーバーを使用してメッセージ送信

結果

TODOが正常に登録される
一覧画面のスクリーンショットが取得される
LINEに詳細な報告メッセージが送信される

結果画面

設定オプション

ブラウザの選択

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

対応ブラウザ：chromium, firefox, webkit

ヘッドレスモード

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

ビューポートサイズ指定

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--viewport-size=1920,1080"
      ]
    }
  }
}

Vision Mode（スクリーンショットベース）

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

トラブルシューティング

1. MCPサーバーが認識されない

症状: Playwright機能が利用できない

解決方法:

Claude Desktop/Codeを完全に再起動
設定ファイルのJSONの構文を確認
パッケージの動作確認：
```
npx @playwright/mcp@latest --help
```

2. ブラウザが起動しない

症状: ブラウザ関連のエラーが発生

解決方法:

# ブラウザの再インストール
npx playwright install

# システム依存関係のインストール（Linux）
sudo npx playwright install-deps

3. WSL環境でのエラー

症状: Linux環境で依存関係エラー

解決方法:

# 必要なライブラリをインストール
sudo apt update
sudo apt install -y \
    libnss3 \
    libnspr4 \
    libatk-bridge2.0-0 \
    libdrm2 \
    libxkbcommon0 \
    libgtk-3-0 \
    libatspi2.0-0

# または自動インストール
sudo npx playwright install-deps

ヘッドレスモードを有効にする：

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

4. 設定ファイルが見つからない

解決方法:

Windows:

mkdir "%APPDATA%\Claude"
echo {"mcpServers":{"playwright":{"command":"npx","args":["@playwright/mcp@latest","--headless"]}}} > "%APPDATA%\Claude\claude_desktop_config.json"

macOS/Linux:

mkdir -p ~/.config/claude
echo '{"mcpServers":{"playwright":{"command":"npx","args":["@playwright/mcp@latest","--headless"]}}}' > ~/.config/claude/claude_desktop_config.json

5. 要素が見つからないエラー

症状: ページ要素の操作に失敗

解決方法:

より具体的なセレクタを指定
待機時間を追加
要素の表示を待つ指示を追加

まとめ

Playwright MCPサーバーを使用することで、Claude CodeとClaude Desktopで強力なブラウザ自動化が可能になります。自然言語での指示だけで複雑なWeb操作が実行できるため、テスト自動化、データ収集、定期的なWeb作業の効率化に大いに役立ちます。

主な利点

自然言語での操作: プログラミング知識不要
複雑な操作の自動化: フォーム入力からE2Eテストまで
外部システム連携: LINE、Slack等との組み合わせ
クロスプラットフォーム: Windows、macOS、Linux対応

設定は一度行うだけで、その後は様々なブラウザ自動化タスクを簡単に実行できるようになります。ぜひ活用してみてください！

はじめに

目次

Playwright MCPサーバーとは

主な機能

事前準備

Node.jsとnpmのインストール

利用可能なPlaywright MCPサーバー

Claude Codeでの設定

1. Playwrightブラウザのインストール

2. Claude Codeの設定ファイル編集

3. 動作確認

Claude Desktopでの設定

1. 設定ファイルの場所

2. 設定ファイルの作成・編集

3. 他のMCPサーバーと併用する場合

4. Claude Desktopの再起動

5. 動作確認

基本的な使用方法

Webページのスクリーンショット

ページ要素の操作

フォームの自動入力

複数ページの操作

E2Eテストの実行

実践例：TODOアプリの自動操作

シナリオ

実行手順

実際の動作

結果

結果画面

設定オプション

ブラウザの選択

ヘッドレスモード

ビューポートサイズ指定

Vision Mode（スクリーンショットベース）

トラブルシューティング

1. MCPサーバーが認識されない

2. ブラウザが起動しない

3. WSL環境でのエラー

4. 設定ファイルが見つからない

5. 要素が見つからないエラー

まとめ

主な利点

Discussion