Playwright 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に移動します。好きな名前を付け、コマンドタイプでnpx @playwright/mcpを使用します。Editをクリックして設定を確認したり、コマンド引数を追加したりすることもできます。

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

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

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

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[];
  };
 
  /**
   * クライアントに画像レスポンスを送信しない。
   */
  noImageResponses?: boolean;
}

注: 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.connect(transport);

  // ...
});

• browser_click

  • タイトル: クリック
  • 説明: ウェブページでクリックを実行します。
  • パラメーター:
    • element (string): 要素との対話の許可を取得するために使用される人間が読める要素の説明
    • ref (string): ページスナップショットからの正確なターゲット要素の参照
  • 読み取り専用: false

• browser_drag

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

• browser_hover

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

• browser_type

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

• browser_select_option

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

• browser_press_key

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

• browser_wait_for

  • タイトル: 待機する
  • 説明: テキストの表示または非表示、または指定された時間の経過を待ちます。
  • パラメーター:
    • time (number, optional): 待機する時間（秒）
    • text (string, optional): 待機するテキスト
    • textGone (string, optional): 非表示になるまで待機するテキスト
  • 読み取り専用: true

• browser_file_upload

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

• browser_handle_dialog

  • タイトル: ダイアログを処理する
  • 説明: ダイアログを処理します。
  • パラメーター:
    • accept (boolean): ダイアログを受け入れるかどうか。
    • promptText (string, optional): プロンプトダイアログの場合のプロンプトのテキスト。
  • 読み取り専用: false

• browser_navigate_back

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

• browser_navigate_forward

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

• browser_pdf_save

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

• browser_network_requests

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

• browser_console_messages

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

• browser_close

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

• browser_resize

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

• browser_tab_new

  • タイトル: 新しいタブを開く
  • 説明: 新しいタブを開きます。
  • パラメーター:
    • url (string, optional): 新しいタブで移動するURL。指定されない場合、新しいタブは空白になります。
  • 読み取り専用: true

• browser_tab_select

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

• browser_tab_close

  • タイトル: タブを閉じる
  • 説明: タブを閉じます。
  • パラメーター:
    • index (number, optional): 閉じるタブのインデックス。指定されない場合、現在のタブが閉じられます。
  • 読み取り専用: false

• browser_screen_move_mouse

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

• browser_screen_click

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

• browser_screen_drag

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

• browser_screen_type

  • タイトル: テキストを入力する
  • 説明: テキストを入力します。
  • パラメーター:
    • text (string): 要素に入力するテキスト
    • submit (boolean, optional): 入力したテキストを送信するかどうか（後にEnterキーを押す）
  • 読み取り専用: false

• browser_press_key

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

• browser_wait_for

  • タイトル: 待機する
  • 説明: テキストの表示または非表示、または指定された時間の経過を待ちます。
  • パラメーター:
    • time (number, optional): 待機する時間（秒）
    • text (string, optional): 待機するテキスト
    • textGone (string, optional): 非表示になるまで待機するテキスト
  • 読み取り専用: true

• browser_file_upload

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

• browser_handle_dialog

  • タイトル: ダイアログを処理する
  • 説明: ダイアログを処理します。
  • パラメーター:
    • accept (boolean): ダイアログを受け入れるかどうか。
    • promptText (string, optional): プロンプトダイアログの場合のプロンプトのテキスト。
  • 読み取り専用: false