Playwright MCP

你也可以使用 VS Code 命令行界面（CLI）安裝 Playwright MCP 服務器：

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

安裝完成後，Playwright MCP 服務器即可在 VS Code 中與你的 GitHub Copilot 代理一起使用。

點擊按鈕安裝：

或者手動安裝：

轉到 Cursor 設置 -> MCP -> 添加新的 MCP 服務器。自定義名稱，使用 命令 類型並輸入命令 npx @playwright/mcp。你還可以通過點擊 編輯 驗證配置或添加命令參數。

{
  "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 聊天面板 -> 連接更多工具 -> + 添加新的 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.sever.connect(transport);

  // ...
});

• browser_snapshot

  • 標題：頁面快照
  • 描述：捕獲當前頁面的無障礙快照，這比截圖更好
  • 參數：無
  • 只讀：是

• browser_click

  • 標題：點擊
  • 描述：在網頁上執行點擊操作
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • ref（字符串）：頁面快照中確切的目標元素引用
  • 只讀：否

• browser_drag

  • 標題：拖動鼠標
  • 描述：在兩個元素之間執行拖放操作
  • 參數：
    • startElement（字符串）：用於獲取與源元素交互權限的人類可讀元素描述
    • startRef（字符串）：頁面快照中確切的源元素引用
    • endElement（字符串）：用於獲取與目標元素交互權限的人類可讀元素描述
    • endRef（字符串）：頁面快照中確切的目標元素引用
  • 只讀：否

• browser_hover

  • 標題：懸停鼠標
  • 描述：在頁面上懸停在元素上
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • ref（字符串）：頁面快照中確切的目標元素引用
  • 只讀：是

• browser_type

  • 標題：輸入文本
  • 描述：在可編輯元素中輸入文本
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • ref（字符串）：頁面快照中確切的目標元素引用
    • text（字符串）：要輸入到元素中的文本
    • submit（布爾值，可選）：是否提交輸入的文本（之後按 Enter 鍵）
    • slowly（布爾值，可選）：是否逐個字符輸入。對於觸發頁面中的按鍵處理程序很有用。默認一次性填充整個文本。
  • 只讀：否

• browser_select_option

  • 標題：選擇選項
  • 描述：在下拉菜單中選擇一個選項
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • ref（字符串）：頁面快照中確切的目標元素引用
    • values（數組）：要在下拉菜單中選擇的值數組。可以是單個值或多個值。
  • 只讀：否

• browser_press_key

  • 標題：按下按鍵
  • 描述：在鍵盤上按下一個鍵
  • 參數：
    • key（字符串）：要按下的鍵的名稱或要生成的字符，例如 ArrowLeft 或 a
  • 只讀：否

• browser_wait_for

  • 標題：等待
  • 描述：等待文本出現或消失，或等待指定時間過去
  • 參數：
    • time（數字，可選）：等待的時間（秒）
    • text（字符串，可選）：要等待出現的文本
    • textGone（字符串，可選）：要等待消失的文本
  • 只讀：是

• browser_file_upload

  • 標題：上傳文件
  • 描述：上傳一個或多個文件
  • 參數：
    • paths（數組）：要上傳的文件的絕對路徑。可以是單個文件或多個文件。
  • 只讀：否

• browser_handle_dialog

  • 標題：處理對話框
  • 描述：處理對話框
  • 參數：
    • accept（布爾值）：是否接受對話框。
    • promptText（字符串，可選）：如果是提示對話框，提示的文本。
  • 只讀：否

• browser_navigate

  • 標題：導航到 URL
  • 描述：導航到指定 URL
  • 參數：
    • url（字符串）：要導航到的 URL
  • 只讀：否

• browser_navigate_back

  • 標題：返回
  • 描述：返回上一頁
  • 參數：無
  • 只讀：是

• browser_navigate_forward

  • 標題：前進
  • 描述：前進到下一頁
  • 參數：無
  • 只讀：是

• browser_take_screenshot

  • 標題：截圖
  • 描述：對當前頁面進行截圖。你不能基於截圖執行操作，使用 browser_snapshot 進行操作。
  • 參數：
    • raw（布爾值，可選）：是否返回未壓縮的圖像（PNG 格式）。默認是 false，返回 JPEG 圖像。
    • filename（字符串，可選）：保存截圖的文件名。如果未指定，默認為 page-{timestamp}.{png|jpeg}。
    • element（字符串，可選）：用於獲取對元素進行截圖權限的人類可讀元素描述。如果未提供，將截取視口的截圖。如果提供了 element，則必須提供 ref。
    • ref（字符串，可選）：頁面快照中確切的目標元素引用。如果未提供，將截取視口的截圖。如果提供了 ref，則必須提供 element。
  • 只讀：是

• browser_pdf_save

  • 標題：保存為 PDF
  • 描述：將頁面保存為 PDF
  • 參數：
    • filename（字符串，可選）：保存 PDF 的文件名。如果未指定，默認為 page-{timestamp}.pdf。
  • 只讀：是

• browser_network_requests

  • 標題：列出網絡請求
  • 描述：返回自頁面加載以來的所有網絡請求
  • 參數：無
  • 只讀：是

• browser_console_messages

  • 標題：獲取控制檯消息
  • 描述：返回所有控制檯消息
  • 參數：無
  • 只讀：是

• browser_install

  • 標題：安裝配置中指定的瀏覽器
  • 描述：安裝配置中指定的瀏覽器。如果你遇到瀏覽器未安裝的錯誤，請調用此工具。
  • 參數：無
  • 只讀：否

• browser_close

  • 標題：關閉瀏覽器
  • 描述：關閉頁面
  • 參數：無
  • 只讀：是

• browser_resize

  • 標題：調整瀏覽器窗口大小
  • 描述：調整瀏覽器窗口大小
  • 參數：
    • width（數字）：瀏覽器窗口的寬度
    • height（數字）：瀏覽器窗口的高度
  • 只讀：是

• browser_tab_list

  • 標題：列出標籤頁
  • 描述：列出瀏覽器標籤頁
  • 參數：無
  • 只讀：是

• browser_tab_new

  • 標題：打開新標籤頁
  • 描述：打開一個新標籤頁
  • 參數：
    • url（字符串，可選）：在新標籤頁中導航到的 URL。如果未提供，新標籤頁將為空。
  • 只讀：是

• browser_tab_select

  • 標題：選擇標籤頁
  • 描述：按索引選擇一個標籤頁
  • 參數：
    • index（數字）：要選擇的標籤頁的索引
  • 只讀：是

• browser_tab_close

  • 標題：關閉標籤頁
  • 描述：關閉一個標籤頁
  • 參數：
    • index（數字，可選）：要關閉的標籤頁的索引。如果未提供，關閉當前標籤頁。
  • 只讀：否

• browser_generate_playwright_test
  • 標題：生成 Playwright 測試
  • 描述：為給定場景生成 Playwright 測試
  • 參數：
    • name（字符串）：測試的名稱
    • description（字符串）：測試的描述
    • steps（數組）：測試的步驟
  • 只讀：是

• browser_screen_capture

  • 標題：截圖
  • 描述：對當前頁面進行截圖
  • 參數：無
  • 只讀：是

• browser_screen_move_mouse

  • 標題：移動鼠標
  • 描述：將鼠標移動到指定位置
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • x（數字）：X 座標
    • y（數字）：Y 座標
  • 只讀：是

• browser_screen_click

  • 標題：點擊
  • 描述：點擊鼠標左鍵
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • x（數字）：X 座標
    • y（數字）：Y 座標
  • 只讀：否

• browser_screen_drag

  • 標題：拖動鼠標
  • 描述：拖動鼠標左鍵
  • 參數：
    • element（字符串）：用於獲取與元素交互權限的人類可讀元素描述
    • startX（數字）：起始 X 座標
    • startY（數字）：起始 Y 座標
    • endX（數字）：結束 X 座標
    • endY（數字）：結束 Y 座標
  • 只讀：否

• browser_screen_type

  • 標題：輸入文本
  • 描述：輸入文本
  • 參數：
    • text（字符串）：要輸入的文本
    • submit（布爾值，可選）：是否提交輸入的文本（之後按 Enter 鍵）
  • 只讀：否

• browser_press_key

  • 標題：按下按鍵
  • 描述：在鍵盤上按下一個鍵
  • 參數：
    • key（字符串）：要按下的鍵的名稱或要生成的字符，例如 ArrowLeft 或 a
  • 只讀：否

• browser_wait_for

  • 標題：等待
  • 描述：等待文本出現或消失，或等待指定時間過去
  • 參數：
    • time（數字，可選）：等待的時間（秒）
    • text（字符串，可選）：要等待出現的文本
    • textGone（字符串，可選）：要等待消失的文本
  • 只讀：是

• browser_file_upload

  • 標題：上傳文件
  • 描述：上傳一個或多個文件
  • 參數：
    • paths（數組）：要上傳的文件的絕對路徑。可以是單個文件或多個文件。
  • 只讀：否

• browser_handle_dialog

  • 標題：處理對話框
  • 描述：處理對話框
  • 參數：
    • accept（布爾值）：是否接受對話框。
    • promptText（字符串，可選）：如果是提示對話框，提示的文本。
  • 只讀：否