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（字符串，可选）：如果是提示对话框，提示的文本。
  • 只读：否