MCP

VS Code CLI を使用して Playwright MCP サーバーをインストールすることもできます。

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

インストール後、Playwright MCP サーバーは VS Code の GitHub Copilot エージェントで使用できるようになります。

ボタンをクリックしてインストールする：

または手動でインストールする：

Cursor Settings -> MCP -> Add new MCP Server に移動します。好きな名前を付け、command タイプで npx @playwright/mcp を使用します。Edit をクリックして設定を確認またはコマンド引数を追加することもできます。

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

Windsurf MCP ドキュメントに従ってください。次の設定を使用します。

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

MCP インストール ガイドに従って、次の設定を使用します。

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

Claude Code CLI を使用して Playwright MCP サーバーを追加します。

claude mcp add playwright npx @playwright/mcp@latest

ボタンをクリックしてインストールする：

または手動でインストールする：

Advanced settings -> Extensions -> Add custom extension に移動します。好きな名前を付け、STDIO タイプを使用し、command を npx @playwright/mcp に設定します。「Add Extension」をクリックします。

Qodo Gen チャットパネルを VSCode または IntelliJ で開きます -> 「Connect more tools」 -> 「+ Add new MCP」 -> 次の設定を貼り付けます。

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

「Save」をクリックします。

MCP インストール ガイドに従って、次の設定を使用します。

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

{
  // ブラウザ設定
  browser?: {
    // 使用するブラウザタイプ (chromium、firefox、または webkit)
    browserName?: 'chromium' | 'firefox' | 'webkit';

    // ブラウザプロファイルをメモリ内に保持し、ディスクに保存しない
    isolated?: boolean;

    // ブラウザプロファイルの永続化のためのユーザーデータディレクトリへのパス
    userDataDir?: string;

    // ブラウザ起動オプション (Playwright ドキュメントを参照)
    // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
    launchOptions?: {
      channel?: string;        // ブラウザチャネル (例: 'chrome')
      headless?: boolean;      // ヘッドレスモードで実行する
      executablePath?: string; // ブラウザ実行ファイルへのパス
      // ... その他の Playwright 起動オプション
    };

    // ブラウザコンテキストオプション
    // @see https://playwright.dev/docs/api/class-browser#browser-new-context
    contextOptions?: {
      viewport?: { width: number, height: number };
      // ... その他の Playwright コンテキストオプション
    };

    // 既存のブラウザに接続するための CDP エンドポイント
    cdpEndpoint?: string;

    // リモート Playwright サーバーエンドポイント
    remoteEndpoint?: string;
  },

  // サーバー設定
  server?: {
    port?: number;  // リッスンするポート
    host?: string;  // バインドするホスト (デフォルト: localhost)
  },

  // 有効にする機能のリスト
  capabilities?: Array<
    'core' |    // コアブラウザ自動化
    'tabs' |    // タブ管理
    'pdf' |     // PDF 生成
    'history' | // ブラウザ履歴
    'wait' |    // 待機ユーティリティ
    'files' |   // ファイル処理
    'install' | // ブラウザインストール
    'testing'   // テスト
  >;

  // ビジョンモードを有効にする (アクセシビリティスナップショットの代わりにスクリーンショットを使用)
  vision?: boolean;

  // 出力ファイルのディレクトリ
  outputDir?: string;

  // ネットワーク設定
  network?: {
    // ブラウザがリクエストを許可するオリジンのリスト。デフォルトはすべて許可です。`allowedOrigins` と `blockedOrigins` の両方に一致するオリジンはブロックされます。
    allowedOrigins?: string[];

    // ブラウザがリクエストをブロックするオリジンのリスト。`allowedOrigins` と `blockedOrigins` の両方に一致するオリジンはブロックされます。
    blockedOrigins?: string[];
  };
 
  /**
   * クライアントに画像応答を送信するかどうか。"allow"、"omit"、または "auto" のいずれかにできます。 
   * デフォルトは "auto" で、Cursor クライアントの場合は画像を省略し、その他のクライアントの場合は送信します。
   */
  imageResponses?: 'allow' | 'omit' | 'auto';
}

注意: Docker 実装は現在、ヘッドレス Chromium のみをサポートしています。

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
    }
  }
}

Docker イメージを自分でビルドすることもできます。

docker build -t mcr.microsoft.com/playwright/mcp .

import http from 'http';

import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

http.createServer(async (req, res) => {
  // ...

  // SSE トランスポートを使用してヘッドレス Playwright MCP サーバーを作成する
  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
  const transport = new SSEServerTransport('/messages', res);
  await connection.sever.connect(transport);

  // ...
});

• browser_snapshot

  • タイトル: ページスナップショット
  • 説明: 現在のページのアクセシビリティスナップショットをキャプチャします。これはスクリーンショットよりも優れています。
  • パラメーター: なし
  • 読み取り専用: true

• browser_click

  • タイトル: クリック
  • 説明: ウェブページでクリックを実行します。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • ref (文字列): ページスナップショットからの正確なターゲット要素の参照
    • doubleClick (ブール値、オプション): 単一クリックの代わりにダブルクリックを実行するかどうか
  • 読み取り専用: false

• browser_drag

  • タイトル: マウスをドラッグする
  • 説明: 2 つの要素間でドラッグアンドドロップを実行します。
  • パラメーター:
    • startElement (文字列): 要素との対話の許可を取得するために使用する人間が読めるソース要素の説明
    • startRef (文字列): ページスナップショットからの正確なソース要素の参照
    • endElement (文字列): 要素との対話の許可を取得するために使用する人間が読めるターゲット要素の説明
    • endRef (文字列): ページスナップショットからの正確なターゲット要素の参照
  • 読み取り専用: false

• browser_hover

  • タイトル: マウスをホバーする
  • 説明: ページ上の要素にマウスをホバーします。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • ref (文字列): ページスナップショットからの正確なターゲット要素の参照
  • 読み取り専用: true

• browser_type

  • タイトル: テキストを入力する
  • 説明: 編集可能な要素にテキストを入力します。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • ref (文字列): ページスナップショットからの正確なターゲット要素の参照
    • text (文字列): 要素に入力するテキスト
    • submit (ブール値、オプション): 入力したテキストを送信するかどうか (後に Enter キーを押す)
    • slowly (ブール値、オプション): 1 文字ずつ入力するかどうか。ページのキーハンドラーをトリガーするのに役立ちます。デフォルトでは、テキスト全体が一度に入力されます。
  • 読み取り専用: false

• browser_select_option

  • タイトル: オプションを選択する
  • 説明: ドロップダウンでオプションを選択します。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • ref (文字列): ページスナップショットからの正確なターゲット要素の参照
    • values (配列): ドロップダウンで選択する値の配列。これは単一の値または複数の値にできます。
  • 読み取り専用: false

• browser_press_key

  • タイトル: キーを押す
  • 説明: キーボードでキーを押します。
  • パラメーター:
    • key (文字列): 押すキーの名前または生成する文字。例: ArrowLeft または a
  • 読み取り専用: false

• browser_wait_for

  • タイトル: 待機する
  • 説明: テキストの表示または非表示、または指定された時間の経過を待ちます。
  • パラメーター:
    • time (数値、オプション): 待機する時間 (秒)
    • text (文字列、オプション): 待機するテキスト
    • textGone (文字列、オプション): 消えるのを待つテキスト
  • 読み取り専用: true

• browser_file_upload

  • タイトル: ファイルをアップロードする
  • 説明: 1 つまたは複数のファイルをアップロードします。
  • パラメーター:
    • paths (配列): アップロードするファイルの絶対パス。単一のファイルまたは複数のファイルにできます。
  • 読み取り専用: false

• browser_handle_dialog

  • タイトル: ダイアログを処理する
  • 説明: ダイアログを処理します。
  • パラメーター:
    • accept (ブール値): ダイアログを受け入れるかどうか。
    • promptText (文字列、オプション): プロンプトダイアログの場合のプロンプトのテキスト。
  • 読み取り専用: false

• browser_navigate

  • タイトル: URL に移動する
  • 説明: URL に移動します。
  • パラメーター:
    • url (文字列): 移動する URL
  • 読み取り専用: false

• browser_navigate_back

  • タイトル: 前のページに戻る
  • 説明: 前のページに戻ります。
  • パラメーター: なし
  • 読み取り専用: true

• browser_navigate_forward

  • タイトル: 次のページに進む
  • 説明: 次のページに進みます。
  • パラメーター: なし
  • 読み取り専用: true

• browser_take_screenshot

  • タイトル: スクリーンショットを撮る
  • 説明: 現在のページのスクリーンショットを撮ります。スクリーンショットに基づいてアクションを実行することはできません。アクションには browser_snapshot を使用してください。
  • パラメーター:
    • raw (ブール値、オプション): 圧縮せずに返すかどうか (PNG 形式)。デフォルトは false で、JPEG 画像を返します。
    • filename (文字列、オプション): スクリーンショットを保存するファイル名。指定されない場合は、デフォルトで page-{timestamp}.{png|jpeg} になります。
    • element (文字列、オプション): 要素のスクリーンショットを撮る許可を取得するために使用する人間が読める要素の説明。提供されない場合、ビューポートのスクリーンショットが撮られます。要素が提供される場合、ref も提供する必要があります。
    • ref (文字列、オプション): ページスナップショットからの正確なターゲット要素の参照。提供されない場合、ビューポートのスクリーンショットが撮られます。ref が提供される場合、要素も提供する必要があります。
  • 読み取り専用: true

• browser_pdf_save

  • タイトル: PDF として保存する
  • 説明: ページを PDF として保存します。
  • パラメーター:
    • filename (文字列、オプション): PDF を保存するファイル名。指定されない場合は、デフォルトで page-{timestamp}.pdf になります。
  • 読み取り専用: true

• browser_network_requests

  • タイトル: ネットワークリクエストをリストする
  • 説明: ページの読み込み以降のすべてのネットワークリクエストを返します。
  • パラメーター: なし
  • 読み取り専用: true

• browser_console_messages

  • タイトル: コンソールメッセージを取得する
  • 説明: すべてのコンソールメッセージを返します。
  • パラメーター: なし
  • 読み取り専用: true

• browser_install

  • タイトル: 設定で指定されたブラウザをインストールする
  • 説明: 設定で指定されたブラウザをインストールします。ブラウザがインストールされていないというエラーが発生した場合は、これを呼び出してください。
  • パラメーター: なし
  • 読み取り専用: false

• browser_close

  • タイトル: ブラウザを閉じる
  • 説明: ページを閉じます。
  • パラメーター: なし
  • 読み取り専用: true

• browser_resize

  • タイトル: ブラウザウィンドウをリサイズする
  • 説明: ブラウザウィンドウをリサイズします。
  • パラメーター:
    • width (数値): ブラウザウィンドウの幅
    • height (数値): ブラウザウィンドウの高さ
  • 読み取り専用: true

• browser_tab_list

  • タイトル: タブをリストする
  • 説明: ブラウザタブをリストします。
  • パラメーター: なし
  • 読み取り専用: true

• browser_tab_new

  • タイトル: 新しいタブを開く
  • 説明: 新しいタブを開きます。
  • パラメーター:
    • url (文字列、オプション): 新しいタブで移動する URL。提供されない場合、新しいタブは空白になります。
  • 読み取り専用: true

• browser_tab_select

  • タイトル: タブを選択する
  • 説明: インデックスでタブを選択します。
  • パラメーター:
    • index (数値): 選択するタブのインデックス
  • 読み取り専用: true

• browser_tab_close

  • タイトル: タブを閉じる
  • 説明: タブを閉じます。
  • パラメーター:
    • index (数値、オプション): 閉じるタブのインデックス。提供されない場合は、現在のタブを閉じます。
  • 読み取り専用: false

• browser_generate_playwright_test
  • タイトル: Playwright テストを生成する
  • 説明: 与えられたシナリオの Playwright テストを生成します。
  • パラメーター:
    • name (文字列): テストの名前
    • description (文字列): テストの説明
    • steps (配列): テストの手順
  • 読み取り専用: true

• browser_screen_capture

  • タイトル: スクリーンショットを撮る
  • 説明: 現在のページのスクリーンショットを撮ります。
  • パラメーター: なし
  • 読み取り専用: true

• browser_screen_move_mouse

  • タイトル: マウスを移動する
  • 説明: マウスを指定された位置に移動します。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • x (数値): X 座標
    • y (数値): Y 座標
  • 読み取り専用: true

• browser_screen_click

  • タイトル: クリックする
  • 説明: マウスの左ボタンをクリックします。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • x (数値): X 座標
    • y (数値): Y 座標
  • 読み取り専用: false

• browser_screen_drag

  • タイトル: マウスをドラッグする
  • 説明: マウスの左ボタンをドラッグします。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用する人間が読める要素の説明
    • startX (数値): 開始 X 座標
    • startY (数値): 開始 Y 座標
    • endX (数値): 終了 X 座標
    • endY (数値): 終了 Y 座標
  • 読み取り専用: false

• browser_screen_type

  • タイトル: テキストを入力する
  • 説明: テキストを入力します。
  • パラメーター:
    • text (文字列): 要素に入力するテキスト
    • submit (ブール値、オプション): 入力したテキストを送信するかどうか (後に Enter キーを押す)
  • 読み取り専用: false

• browser_press_key

  • タイトル: キーを押す
  • 説明: キーボードでキーを押します。
  • パラメーター:
    • key (文字列): 押すキーの名前または生成する文字。例: ArrowLeft または a
  • 読み取り専用: false

• browser_wait_for

  • タイトル: 待機する
  • 説明: テキストの表示または非表示、または指定された時間の経過を待ちます。
  • パラメーター:
    • time (数値、オプション): 待機する時間 (秒)
    • text (文字列、オプション): 待機するテキスト
    • textGone (文字列、オプション): 消えるのを待つテキスト
  • 読み取り専用: true

• browser_file_upload

  • タイトル: ファイルをアップロードする
  • 説明: 1 つまたは複数のファイルをアップロードします。
  • パラメーター:
    • paths (配列): アップロードするファイルの絶対パス。単一のファイルまたは複数のファイルにできます。
  • 読み取り専用: false

• browser_handle_dialog

  • タイトル: ダイアログを処理する
  • 説明: ダイアログを処理します。
  • パラメーター:
    • accept (ブール値): ダイアログを受け入れるかどうか。
    • promptText (文字列、オプション): プロンプトダイアログの場合のプロンプトのテキスト。
  • 読み取り専用: false