playwright-mcp

Amp の VS Code 拡張機能の設定画面から追加するか、settings.json ファイルを更新します。

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

Amp CLI のセットアップ：

以下の amp mcp addcommand を使って追加します。

amp mcp add playwright -- npx @playwright/mcp@latest

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

claude mcp add playwright npx @playwright/mcp@latest

MCP のインストールガイドに従い、上記の標準設定を使用します。

Codex CLI を使って Playwright MCP サーバーを追加します。

codex mcp add playwright npx "@playwright/mcp@latest"

または、設定ファイル ~/.codex/config.toml を作成または編集して、次の内容を追加します。

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

詳しくは、Codex MCP のドキュメントを参照してください。

ボタンをクリックしてインストールします。

または手動でインストールします。

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

Factory CLI を使って Playwright MCP サーバーを追加します。

droid mcp add playwright "npx @playwright/mcp@latest"

または、Factory droid 内で /mcp と入力すると、MCP サーバーを管理するためのインタラクティブな UI が開きます。

詳しくは、Factory MCP のドキュメントを参照してください。

MCP のインストールガイドに従い、上記の標準設定を使用します。

ボタンをクリックしてインストールします。

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

Advanced settings -> Extensions -> Add custom extension に移動します。名前は任意に設定し、種類に STDIO を選択して、command に npx @playwright/mcp を設定します。「Add Extension」をクリックします。

MCP サーバーのドキュメントに従ってください。たとえば、.kiro/settings/mcp.json の場合：

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

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

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

右側のサイドバーで Program -> Install -> Edit mcp.json に移動します。上記の標準設定を使用します。

MCP サーバーのドキュメントに従ってください。たとえば、~/.config/opencode/opencode.json の場合：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx",
        "@playwright/mcp@latest"
      ],
      "enabled": true
    }
  }
}

VSCode または IntelliJ で Qodo Gen のチャットパネルを開き、Connect more tools → + Add new MCP → 上記の標準設定を貼り付けます。

Save をクリックします。

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

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

MCP のインストールガイドに従い、上記の標準設定を使用します。VS Code CLI を使って Playwright MCP サーバーをインストールすることもできます：

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

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

Settings -> AI -> Manage MCP Servers -> + Add に移動し、MCP サーバーを追加します。上記の標準設定を使用します。

または、Warp のプロンプトでスラッシュコマンド /add-mcp を使用し、上記の標準設定を貼り付けます：

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

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

{
  // Browser configuration
  browser?: {
    // Browser type to use (chromium, firefox, or webkit)
    browserName?: 'chromium' | 'firefox' | 'webkit';

    // Keep the browser profile in memory, do not save it to disk.
    isolated?: boolean;

    // Path to user data directory for browser profile persistence
    userDataDir?: string;

    // Browser launch options (see Playwright docs)
    // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
    launchOptions?: {
      channel?: string;        // Browser channel (e.g. 'chrome')
      headless?: boolean;      // Run in headless mode
      executablePath?: string; // Path to browser executable
      // ... other Playwright launch options
    };

    // Browser context options
    // @see https://playwright.dev/docs/api/class-browser#browser-new-context
    contextOptions?: {
      viewport?: { width: number, height: number };
      // ... other Playwright context options
    };

    // CDP endpoint for connecting to existing browser
    cdpEndpoint?: string;

    // Remote Playwright server endpoint
    remoteEndpoint?: string;
  },

  // Server configuration
  server?: {
    port?: number;  // Port to listen on
    host?: string;  // Host to bind to (default: localhost)
  },

  // List of additional capabilities
  capabilities?: Array<
    'tabs' |    // Tab management
    'install' | // Browser installation
    'pdf' |     // PDF generation
    'vision' |  // Coordinate-based interactions
  >;

  // Directory for output files
  outputDir?: string;

  // Network configuration
  network?: {
    // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
    allowedOrigins?: string[];

    // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
    blockedOrigins?: string[];
  };
 
  /**
   * Whether to send image responses to the client. Can be "allow" or "omit". 
   * Defaults to "allow".
   */
  imageResponses?: 'allow' | 'omit';
}

注記： Docker 実装では、現時点でヘッドレス Chromium のみがサポートされています。

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

MCP クライアントにコンテナを起動させるのではなく、長時間稼働するサービスとしてコンテナを実行したい場合は、次を使用してください。

docker run -d -i --rm --init --pull=always \
  --entrypoint node \
  --name playwright \
  -p 8931:8931 \
  mcr.microsoft.com/playwright/mcp \
  cli.js --headless --browser chromium --no-sandbox --port 8931

サーバーはホストのポート 8931 で待ち受け、任意の 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) => {
  // ...

  // Creates a headless Playwright MCP server with SSE transport
  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
  const transport = new SSEServerTransport('/messages', res);
  await connection.connect(transport);

  // ...
});

• browser_click

  • タイトル：クリック
  • 説明：ウェブページ上でクリックを実行します
  • パラメーター：
    • element（string）：要素とのインタラクション許可を得るために使用する、人が読める要素の説明
    • ref（string）：ページのスナップショットにある、対象要素の正確な参照
    • doubleClick（boolean、任意）：シングルクリックの代わりにダブルクリックを実行するかどうか
    • button（string、任意）：クリックするボタン。デフォルトは左ボタンです
    • modifiers（array、任意）：押す修飾キー
  • 読み取り専用：false

• browser_close

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

• browser_console_messages

  • タイトル：コンソールメッセージを取得
  • 説明：すべてのコンソールメッセージを返します
  • パラメーター：
    • onlyErrors (boolean, optional)：エラーメッセージのみを返します
  • 読み取り専用：true

• browser_drag

  • タイトル：マウスをドラッグ
  • 説明：2つの要素間でドラッグ＆ドロップを実行します
  • パラメーター：
    • startElement (string)：要素とやり取りする許可を得るために使用する、始点要素の人間が読める説明
    • startRef (string)：ページスナップショットにある始点要素の正確な参照
    • endElement (string)：要素とやり取りする許可を得るために使用する、対象要素の人間が読める説明
    • endRef (string)：ページスナップショットにある対象要素の正確な参照
  • 読み取り専用：false

• browser_evaluate

  • タイトル：JavaScriptを評価
  • 説明：ページまたは要素上でJavaScript式を評価します
  • パラメーター：
    • function (string)：要素が指定されている場合は、() => { /* code / } または (element) => { / code */ }
    • element (string, optional)：要素とやり取りする許可を得るために使用する、要素の人間が読める説明
    • ref (string, optional)：ページスナップショットにある対象要素の正確な参照
  • 読み取り専用：false

• browser_file_upload

  • タイトル：ファイルをアップロード
  • 説明：1つ以上のファイルをアップロードします
  • パラメーター：
    • paths (array, optional)：アップロードするファイルの絶対パスです。単一ファイルまたは複数ファイルを指定できます。省略した場合、ファイル選択ダイアログはキャンセルされます。
  • 読み取り専用：false

• browser_fill_form

  • タイトル：フォームに入力
  • 説明：複数のフォームフィールドに入力します
  • パラメーター：
    • fields (array)：入力するフィールド
  • 読み取り専用：false

• browser_handle_dialog

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

• browser_hover

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

• browser_navigate

  • タイトル：URLに移動
  • 説明：URLに移動します
  • パラメーター：
    • url (string)：移動先のURL
  • 読み取り専用：false

• browser_navigate_back

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

• browser_network_requests

  • タイトル：ネットワークリクエストを一覧表示
  • 説明：ページの読み込み後に発生したすべてのネットワークリクエストを返します
  • パラメーター：なし
  • 読み取り専用：true

• browser_press_key

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

• browser_resize

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

• browser_run_code

  • タイトル：Playwrightコードを実行
  • 説明：Playwrightコードスニペットを実行します
  • パラメーター：
    • code (string)：実行するPlaywrightコードスニペットです。ページとやり取りするには、page オブジェクトにアクセスしてください。複数の文を記述できます。例：await page.getByRole('button', { name: 'Submit' }).click();
  • 読み取り専用：false

• browser_select_option

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

• browser_snapshot

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

• browser_take_screenshot

  • タイトル：スクリーンショットを撮影
  • 説明：現在のページのスクリーンショットを撮影します。スクリーンショットに基づいて操作することはできません。操作には browser_snapshot を使用してください。
  • パラメーター：
    • type (string, optional)：スクリーンショットの画像形式です。デフォルトは png です。
    • filename (string, optional)：スクリーンショットの保存先ファイル名です。指定しない場合は page-{timestamp}.{png|jpeg} が使用されます。出力ディレクトリ内に保存するため、相対ファイル名を推奨します。
    • element (string, optional)：要素のスクリーンショットを撮影する許可を得るために使用する、人が読んで理解できる要素の説明です。指定しない場合は、ビューポートのスクリーンショットが撮影されます。指定する場合は、ref も指定する必要があります。
    • ref (string, optional)：ページスナップショットに記載された、対象要素の正確な参照です。指定しない場合は、ビューポートのスクリーンショットが撮影されます。指定する場合は、element も指定する必要があります。
    • fullPage (boolean, optional)：true の場合、現在表示されているビューポートではなく、スクロール可能なページ全体のスクリーンショットを撮影します。要素のスクリーンショットとは併用できません。
  • 読み取り専用：true

• browser_type

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

• browser_wait_for

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

• browser_tabs
  • タイトル：タブを管理
  • 説明：ブラウザーのタブを一覧表示、作成、閉じる、または選択します。
  • パラメーター：
    • action (string)：実行する操作
    • index (number, optional)：閉じる／選択するタブのインデックスです。閉じる場合に省略すると、現在のタブが閉じられます。
  • 読み取り専用：false

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

• browser_mouse_click_xy

  • タイトル：クリック
  • 説明：指定した位置でマウスの左ボタンをクリックします
  • パラメーター：
    • element (string)：要素を操作する許可を得るために使用する、人が読んで理解できる要素の説明
    • x (number)：X 座標
    • y (number)：Y 座標
  • 読み取り専用：false

• browser_mouse_drag_xy

  • Title: マウスをドラッグ
  • Description: 左マウスボタンをドラッグして指定した位置まで移動します
  • Parameters:
    • element (string): 要素とのインタラクション許可を得るために使用する、人が理解できる要素の説明
    • startX (number): 開始位置の X 座標
    • startY (number): 開始位置の Y 座標
    • endX (number): 終了位置の X 座標
    • endY (number): 終了位置の Y 座標
  • Read-only: false

• browser_mouse_move_xy

  • Title: マウスを移動
  • Description: マウスを指定した位置に移動します
  • Parameters:
    • element (string): 要素とのインタラクション許可を得るために使用する、人が理解できる要素の説明
    • x (number): X 座標
    • y (number): Y 座標
  • Read-only: false

• browser_pdf_save
  • Title: PDF として保存
  • Description: ページを PDF として保存します
  • Parameters:
    • filename (string, optional): PDF の保存先ファイル名です。指定しない場合は page-{timestamp}.pdf がデフォルトで使用されます。出力ディレクトリ内に保存するため、相対ファイル名を推奨します。
  • Read-only: true

• browser_generate_locator

  • Title: 要素のロケーターを作成
  • Description: テストで使用する、指定した要素のロケーターを生成します
  • Parameters:
    • element (string): 要素とのインタラクション許可を得るために使用する、人が理解できる要素の説明
    • ref (string): ページスナップショット内にある、対象要素の正確な参照
  • Read-only: true

• browser_verify_element_visible

  • Title: 要素の表示を確認
  • Description: 要素がページに表示されていることを確認します
  • Parameters:
    • role (string): 要素の ROLE です。スナップショット内では - {ROLE} "Accessible Name": のように確認できます
    • accessibleName (string): 要素の ACCESSIBLE_NAME です。スナップショット内では - role "{ACCESSIBLE_NAME}" のように確認できます
  • Read-only: false

• browser_verify_list_visible

  • Title: リストの表示を確認
  • Description: リストがページに表示されていることを確認します
  • Parameters:
    • element (string): 人が理解できるリストの説明
    • ref (string): リストを指す対象要素の正確な参照
    • items (array): 確認する項目
  • Read-only: false

• browser_verify_text_visible

  • Title: テキストの表示を確認
  • Description: テキストがページに表示されていることを確認します。可能な場合は browser_verify_element_visible を優先してください。
  • Parameters:
    • text (string): 確認する TEXT です。スナップショット内では - role "Accessible Name": {TEXT} または - text: {TEXT} のように確認できます
  • Read-only: false

• browser_verify_value

  • Title: 値を確認
  • Description: 要素の値を確認します
  • Parameters:
    • type (string): 要素の種類
    • element (string): 人が理解できる要素の説明
    • ref (string): 要素を指す対象要素の正確な参照
    • value (string): 確認する値です。チェックボックスの場合は "true" または "false" を使用します。
  • Read-only: false

• browser_start_tracing

  • Title: トレーシングを開始
  • Description: トレースの記録を開始します
  • Parameters: なし
  • Read-only: true

• browser_stop_tracing

  • Title: トレーシングを停止
  • Description: トレースの記録を停止します
  • Parameters: なし
  • Read-only: true