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に移動します。好きな名前を付け、commandタイプで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"
      ]
    }
  }
}

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

claude mcp add playwright npx @playwright/mcp@latest

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

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

Saveをクリックします。

{
  // ブラウザ設定
  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.sever.connect(transport);

  // ...
});

• browser_snapshot

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

• browser_click

  • タイトル: クリック
  • 説明: ウェブページでクリック操作を実行します。
  • パラメーター:
    • element (文字列): 要素との対話の許可を取得するために使用される人間が読める要素の説明
    • ref (文字列): ページスナップショットからの正確なターゲット要素の参照
  • 読み取り専用: 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が指定された場合は、elementも指定する必要があります。
  • 読み取り専用: 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