Playwright MCP Server のセットアップ方法 (2026年版)

Playwright MCP サーバーのセットアップ方法 (2026年版)

Playwright MCP サーバーを使用すると、AI アシスタントが実際のブラウザを制御できるようになります。ページの移動、要素のクリック、フォームの入力、スクリーンショットの撮影、エンドツーエンドテストの実行などが可能です。画面に見えるものを説明する代わりに、Model Context Protocol を通じて AI が直接ウェブページを操作できるようになります。

このガイドでは、Playwright MCP サーバーをセットアップし、Claude Desktop、Cursor、VS Code、および Claude Code に接続する手順を解説します。

Playwright MCP サーバーとは？

Playwright MCP サーバーは、Microsoft の Playwright ブラウザ自動化ライブラリを MCP 互換インターフェースでラップしたものです。AI アシスタントに接続すると、以下のことが可能になるツールが公開されます。

URL への移動とページ要素とのインタラクション
ボタンのクリック、入力フィールドの入力、オプションの選択
ページ全体または特定要素のスクリーンショット撮影
テキストコンテンツとページ構造の抽出
ブラウザコンテキストでの JavaScript 実行
認証フローや複数ページにわたるワークフローの処理

なぜ手動テストの代わりに Playwright MCP を使うのか？

アプローチ	速度	正確性	AI 統合	セットアップ
Playwright MCP + AI	高速	高	ネイティブ	中
手動ブラウザテスト	低速	高	なし	なし
スクリーンショット + AI	高速	低〜中	間接的	なし
Selenium スクリプト	中速	高	なし	高
Cypress	中速	高	なし	中

事前準備

要件	詳細
Node.js	v18 以上
npm または yarn	MCP サーバーのインストール用
MCP 対応クライアント	Claude Desktop、Cursor、Cline、または Claude Code
Chromium	Playwright が専用のブラウザを自動インストールします

ステップ 1: Playwright MCP サーバーのインストール

公式の Playwright MCP サーバーは Microsoft によってメンテナンスされています。グローバルにインストールするか、npx を使用して直接実行します。

# オプション 1: npx で直接実行（推奨）
npx @playwright/mcp@latest

# オプション 2: グローバルにインストール
npm install -g @playwright/mcp

初回実行時に、Playwright はブラウザのバイナリ（Chromium、Firefox、WebKit）をダウンロードします。これには数分かかる場合があります。

ブラウザを手動でインストールする場合：

npx playwright install

ステップ 2: Claude Desktop の設定

Playwright MCP サーバーを Claude Desktop の設定ファイルに追加します。

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop を再起動します。MCP ツールが利用可能であることを示すハンマーアイコンが表示されるはずです。

ヘッドレスモード以外での実行（ブラウザの表示）

デフォルトでは、Playwright はヘッドレスモード（ブラウザウィンドウを表示しない）で動作します。デバッグのためにブラウザを表示するには：

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

ブラウザの指定

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

サポートされている値: chromium (デフォルト), firefox, webkit

ステップ 3: Cursor の設定

Cursor の設定で Playwright MCP サーバーを追加するか、プロジェクトのルートに .cursor/mcp.json ファイルを作成します。

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

Cursor の「Settings > MCP」を開き、サーバーが接続されていることを確認します。

ステップ 4: Cline (VS Code) の設定

Cline 拡張機能の設定で、「MCP Servers」セクションに以下を追加します。

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

Cline は、新しい会話を開始したときに利用可能なツールを自動的に検出します。

ステップ 5: Claude Code (CLI) の設定

Claude Code の場合、グローバル MCP 設定に Playwright MCP サーバーを追加するか、コマンドラインから渡します。

# MCP 設定を直接渡す
claude --mcp-config playwright-mcp.json

playwright-mcp.json ファイルを作成します：

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

または、永続的にアクセスできるように ~/.claude/mcp_servers.json に追加します。

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

利用可能な MCP ツール

Playwright MCP サーバーは、AI アシスタントに対して以下のツールを公開します。

ツール	説明
`browser_navigate`	指定した URL に移動する
`browser_click`	ページ上の要素をクリックする
`browser_fill`	入力フィールドにテキストを入力する
`browser_screenshot`	ページのスクリーンショットを撮る
`browser_select`	ドロップダウンのオプションを選択する
`browser_hover`	要素の上にホバーする
`browser_press_key`	キーボードのキーを押す
`browser_get_text`	要素からテキストコンテンツを抽出する
`browser_evaluate`	ページ内で JavaScript を実行する
`browser_wait`	要素が表示されるのを待機する
`browser_close`	ブラウザを閉じる

実用的なユースケース

ウェブアプリケーションのテスト

http://localhost:3000/login に移動してログインフローをテストしてください：
1. メールアドレス欄に "test@example.com" を入力
2. パスワード欄に "password123" を入力
3. "Sign In" ボタンをクリック
4. スクリーンショットを撮ってダッシュボードが読み込まれたか確認
5. 歓迎メッセージに "Welcome, Test User" と表示されているかチェック

AI は Playwright MCP ツールを使用して各ステップを実行し、結果を報告します。

ドキュメントのスクレイピング

https://platform.openai.com/docs/api-reference/chat/create に移動して、
すべてのリクエストパラメータ、その型、および説明を抽出してください。
それらを TypeScript のインターフェースとしてフォーマットしてください。

Visual Regression Testing (視覚回帰テスト)

http://localhost:3000 に移動して、以下のスクリーンショットを撮ってください：
1. ホームページのヒーローセクション
2. 料金ページ
3. ログインページ
4. ダッシュボード（テスト用認証情報でログイン後）

各スクリーンショットをデザイン仕様と比較し、視覚的な違いがあれば報告してください。

フォームの自動テスト

http://localhost:3000/signup に移動してフォームのバリデーションをテストしてください：
1. フォームを空のまま送信し、エラーメッセージのスクリーンショットを撮る
2. 無効なメールアドレスを入力してバリデーションを確認
3. 8文字未満のパスワードを入力して確認
4. すべて正しく入力し、送信が成功することを確認

高度な設定

カスタムユーザーデータディレクトリの使用

セッション間でクッキーやセッションを維持します：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--user-data-dir", "/tmp/playwright-mcp-data"
      ]
    }
  }
}

カスタムビューポートの設定

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

Playwright テストコードの生成

強力なワークフローの一つは、AI にアプリを操作させた後、再利用可能な Playwright テストスクリプトを生成させることです。

http://localhost:3000/shop でチェックアウトフローを実行してください：
1. 商品をカートに追加
2. チェックアウトに進む
3. 配送先情報を入力
4. 購入を完了する

その後、CI/CD でこのフロー全体を自動化する Playwright テストファイル (checkout.spec.ts) を生成してください。

AI は MCP ツールを使用してアプリを操作し、得られた知見に基づいて適切な Playwright テストを作成します。

トラブルシューティング

「Browser failed to launch（ブラウザの起動に失敗しました）」: npx playwright install を実行して、ブラウザのバイナリがダウンロードされていることを確認してください。Linux の場合は、システム依存関係が必要になることがあります (npx playwright install-deps)。

「Element not found（要素が見つかりません）」エラー: ウェブページの読み込みには時間がかかる場合があります。要素を操作する前に browser_wait を使用するよう AI に依頼してください。動的な SPA では、明示的な待機が必要になることが多いです。

スクリーンショットが真っ白または真っ黒: 一部のシステムでは、ヘッドレスモードでこれが発生することがあります。--headed を付けて実行してデバッグするか、GPU ドライバが最新であることを確認してください。

メモリ使用量が高い: Playwright のブラウザインスタンスはメモリを消費します。セッションが終わるごとに browser_close を使用してブラウザを閉じてください。また、一度に多くのタブを開かないようにしてください。

タイムアウト後に MCP サーバーが切断される: 一部の MCP クライアントにはアイドルタイムアウトがあります。ブラウザが長時間アイドル状態になると、サーバーが切断される可能性があります。再接続するには会話を再開してください。

まとめ

Playwright MCP サーバーは、AI アシスタントと実際のブラウザ操作の間のギャップを埋めます。スクリーンショットの内容を説明したり手動でテストを実行したりする代わりに、AI が直接ウェブアプリケーションをナビゲートし、操作し、検証できるようになります。AI 生成のテストスクリプトと組み合わせることで、開発と QA の両方において強力なワークフローとなります。

もしプロジェクトで画像、ビデオ、AI アバターなどの AI 生成メディアを扱う場合は、従量課金制ですべてのメディア生成を処理する統合 API Hypereal AI をチェックしてみてください。

Hypereal AI を無料で試す -- 35 クレジット付与、クレジットカード不要。

Playwright MCP サーバーのセットアップ方法 (2026年版)

このガイドでは、Playwright MCP サーバーをセットアップし、Claude Desktop、Cursor、VS Code、および Claude Code に接続する手順を解説します。

Playwright MCP サーバーとは？

URL への移動とページ要素とのインタラクション
ボタンのクリック、入力フィールドの入力、オプションの選択
ページ全体または特定要素のスクリーンショット撮影
テキストコンテンツとページ構造の抽出
ブラウザコンテキストでの JavaScript 実行
認証フローや複数ページにわたるワークフローの処理

なぜ手動テストの代わりに Playwright MCP を使うのか？

アプローチ	速度	正確性	AI 統合	セットアップ
Playwright MCP + AI	高速	高	ネイティブ	中
手動ブラウザテスト	低速	高	なし	なし
スクリーンショット + AI	高速	低〜中	間接的	なし
Selenium スクリプト	中速	高	なし	高
Cypress	中速	高	なし	中

事前準備

要件	詳細
Node.js	v18 以上
npm または yarn	MCP サーバーのインストール用
MCP 対応クライアント	Claude Desktop、Cursor、Cline、または Claude Code
Chromium	Playwright が専用のブラウザを自動インストールします

ステップ 1: Playwright MCP サーバーのインストール

公式の Playwright MCP サーバーは Microsoft によってメンテナンスされています。グローバルにインストールするか、npx を使用して直接実行します。

# オプション 1: npx で直接実行（推奨）
npx @playwright/mcp@latest

# オプション 2: グローバルにインストール
npm install -g @playwright/mcp

初回実行時に、Playwright はブラウザのバイナリ（Chromium、Firefox、WebKit）をダウンロードします。これには数分かかる場合があります。

ブラウザを手動でインストールする場合：

npx playwright install

ステップ 2: Claude Desktop の設定

Playwright MCP サーバーを Claude Desktop の設定ファイルに追加します。

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop を再起動します。MCP ツールが利用可能であることを示すハンマーアイコンが表示されるはずです。

ヘッドレスモード以外での実行（ブラウザの表示）

デフォルトでは、Playwright はヘッドレスモード（ブラウザウィンドウを表示しない）で動作します。デバッグのためにブラウザを表示するには：

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

ブラウザの指定

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

サポートされている値: chromium (デフォルト), firefox, webkit

ステップ 3: Cursor の設定

Cursor の設定で Playwright MCP サーバーを追加するか、プロジェクトのルートに .cursor/mcp.json ファイルを作成します。

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

Cursor の「Settings > MCP」を開き、サーバーが接続されていることを確認します。

ステップ 4: Cline (VS Code) の設定

Cline 拡張機能の設定で、「MCP Servers」セクションに以下を追加します。

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

Cline は、新しい会話を開始したときに利用可能なツールを自動的に検出します。

ステップ 5: Claude Code (CLI) の設定

Claude Code の場合、グローバル MCP 設定に Playwright MCP サーバーを追加するか、コマンドラインから渡します。

# MCP 設定を直接渡す
claude --mcp-config playwright-mcp.json

playwright-mcp.json ファイルを作成します：

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

または、永続的にアクセスできるように ~/.claude/mcp_servers.json に追加します。

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

利用可能な MCP ツール

Playwright MCP サーバーは、AI アシスタントに対して以下のツールを公開します。

ツール	説明
`browser_navigate`	指定した URL に移動する
`browser_click`	ページ上の要素をクリックする
`browser_fill`	入力フィールドにテキストを入力する
`browser_screenshot`	ページのスクリーンショットを撮る
`browser_select`	ドロップダウンのオプションを選択する
`browser_hover`	要素の上にホバーする
`browser_press_key`	キーボードのキーを押す
`browser_get_text`	要素からテキストコンテンツを抽出する
`browser_evaluate`	ページ内で JavaScript を実行する
`browser_wait`	要素が表示されるのを待機する
`browser_close`	ブラウザを閉じる

実用的なユースケース

ウェブアプリケーションのテスト

http://localhost:3000/login に移動してログインフローをテストしてください：
1. メールアドレス欄に "test@example.com" を入力
2. パスワード欄に "password123" を入力
3. "Sign In" ボタンをクリック
4. スクリーンショットを撮ってダッシュボードが読み込まれたか確認
5. 歓迎メッセージに "Welcome, Test User" と表示されているかチェック

AI は Playwright MCP ツールを使用して各ステップを実行し、結果を報告します。

ドキュメントのスクレイピング

https://platform.openai.com/docs/api-reference/chat/create に移動して、
すべてのリクエストパラメータ、その型、および説明を抽出してください。
それらを TypeScript のインターフェースとしてフォーマットしてください。

Visual Regression Testing (視覚回帰テスト)

http://localhost:3000 に移動して、以下のスクリーンショットを撮ってください：
1. ホームページのヒーローセクション
2. 料金ページ
3. ログインページ
4. ダッシュボード（テスト用認証情報でログイン後）

各スクリーンショットをデザイン仕様と比較し、視覚的な違いがあれば報告してください。

フォームの自動テスト

http://localhost:3000/signup に移動してフォームのバリデーションをテストしてください：
1. フォームを空のまま送信し、エラーメッセージのスクリーンショットを撮る
2. 無効なメールアドレスを入力してバリデーションを確認
3. 8文字未満のパスワードを入力して確認
4. すべて正しく入力し、送信が成功することを確認

高度な設定

カスタムユーザーデータディレクトリの使用

セッション間でクッキーやセッションを維持します：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--user-data-dir", "/tmp/playwright-mcp-data"
      ]
    }
  }
}

カスタムビューポートの設定

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

Playwright テストコードの生成

強力なワークフローの一つは、AI にアプリを操作させた後、再利用可能な Playwright テストスクリプトを生成させることです。

http://localhost:3000/shop でチェックアウトフローを実行してください：
1. 商品をカートに追加
2. チェックアウトに進む
3. 配送先情報を入力
4. 購入を完了する

その後、CI/CD でこのフロー全体を自動化する Playwright テストファイル (checkout.spec.ts) を生成してください。

AI は MCP ツールを使用してアプリを操作し、得られた知見に基づいて適切な Playwright テストを作成します。

トラブルシューティング

まとめ

Hypereal AI を無料で試す -- 35 クレジット付与、クレジットカード不要。

Hyperealで構築を始めよう

Playwright MCP サーバーのセットアップ方法 (2026年版)

Playwright MCP サーバーとは？

なぜ手動テストの代わりに Playwright MCP を使うのか？

事前準備

ステップ 1: Playwright MCP サーバーのインストール

ステップ 2: Claude Desktop の設定

ヘッドレスモード以外での実行（ブラウザの表示）

ブラウザの指定

ステップ 3: Cursor の設定

ステップ 4: Cline (VS Code) の設定

ステップ 5: Claude Code (CLI) の設定

利用可能な MCP ツール

実用的なユースケース

ウェブアプリケーションのテスト

ドキュメントのスクレイピング

Visual Regression Testing (視覚回帰テスト)

フォームの自動テスト

高度な設定

カスタムユーザーデータディレクトリの使用

カスタムビューポートの設定

Playwright テストコードの生成

トラブルシューティング

まとめ

関連記事

Cursor AIにおすすめのMCPサーバー（2026年版）

MCP サーバーをゼロから構築する方法 (2026年版)

Context7 MCP Serverのセットアップ方法 (2026年版)

今日から構築を開始

Hyperealで構築を始めよう

Playwright MCP サーバーのセットアップ方法 (2026年版)

Playwright MCP サーバーとは？

なぜ手動テストの代わりに Playwright MCP を使うのか？

事前準備

ステップ 1: Playwright MCP サーバーのインストール

ステップ 2: Claude Desktop の設定

ヘッドレスモード以外での実行（ブラウザの表示）

ブラウザの指定

ステップ 3: Cursor の設定

ステップ 4: Cline (VS Code) の設定

ステップ 5: Claude Code (CLI) の設定

利用可能な MCP ツール

実用的なユースケース

ウェブアプリケーションのテスト

ドキュメントのスクレイピング

Visual Regression Testing (視覚回帰テスト)

フォームの自動テスト

高度な設定

カスタムユーザーデータディレクトリの使用

カスタムビューポートの設定

Playwright テストコードの生成

トラブルシューティング

まとめ

関連記事

Cursor AIにおすすめのMCPサーバー（2026年版）

MCP サーバーをゼロから構築する方法 (2026年版)

Context7 MCP Serverのセットアップ方法 (2026年版)

今日から構築を開始