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 服务的交互式界面。

如需了解更多信息，请参阅 Factory MCP 文档。

按照 MCP 安装指南操作，并使用上面的标准配置。

点击按钮进行安装：

或手动安装：

前往 Advanced settings -> Extensions -> Add custom extension。名称可自定义，类型选择 STDIO，并将 command 设置为 npx @playwright/mcp。点击“Add Extension”。

请参阅 MCP Servers 文档。例如，在 .kiro/settings/mcp.json 中：

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

点击按钮安装：

或手动安装：

前往右侧边栏中的 Program -> Install -> Edit mcp.json。使用上述标准配置。

请参阅 MCP Servers 文档。例如，在 ~/.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"]}'

安装完成后，Playwright MCP 服务即可与 VS Code 中的 GitHub Copilot Agent 配合使用。

前往 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（字符串）：用于获取与该元素交互权限的易读元素描述
    • ref（字符串）：页面快照中的精确目标元素引用
    • doubleClick（布尔值，可选）：是否执行双击而不是单击
    • button（字符串，可选）：要点击的鼠标按键，默认为左键
    • modifiers（数组，可选）：要按下的修饰键
  • 只读：false

• browser_close

  • 标题：关闭浏览器
  • 描述：关闭页面
  • 参数：无
  • 只读：false

• browser_console_messages

  • 标题：获取控制台消息
  • 描述：返回所有控制台消息
  • 参数：
    • onlyErrors（boolean，可选）：仅返回错误消息
  • 只读：true

• browser_drag

  • 标题：拖动鼠标
  • 描述：在两个元素之间执行拖放操作
  • 参数：
    • startElement（string）：用于获取与该元素交互权限的人类可读源元素描述
    • startRef（string）：页面快照中的精确源元素引用
    • endElement（string）：用于获取与该元素交互权限的人类可读目标元素描述
    • endRef（string）：页面快照中的精确目标元素引用
  • 只读：false

• browser_evaluate

  • 标题：执行 JavaScript
  • 描述：在页面或元素上执行 JavaScript 表达式
  • 参数：
    • function（string）：() => { /* code */ }，或在提供元素时使用 (element) => { /* code */ }
    • element（string，可选）：用于获取与该元素交互权限的人类可读元素描述
    • ref（string，可选）：页面快照中的精确目标元素引用
  • 只读：false

• browser_file_upload

  • 标题：上传文件
  • 描述：上传一个或多个文件
  • 参数：
    • paths（array，可选）：要上传文件的绝对路径。可以是单个文件，也可以是多个文件。如果省略，则取消文件选择器。
  • 只读：false

• browser_fill_form

  • 标题：填写表单
  • 描述：填写多个表单字段
  • 参数：
    • fields（array）：要填写的字段
  • 只读：false

• browser_handle_dialog

  • 标题：处理对话框
  • 描述：处理对话框
  • 参数：
    • accept（boolean）：是否接受对话框。
    • promptText（string，可选）：如果是提示对话框，要输入的提示文本。
  • 只读：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)：用于获取对该元素截图权限的、人类可读的元素描述。如果未提供，则截取视口。若提供了 element，也必须提供 ref。
    • ref (string, optional)：页面快照中的精确目标元素引用。如果未提供，则截取视口。若提供了 ref，也必须提供 element。
    • fullPage (boolean, optional)：为 true 时，截取整个可滚动页面，而非当前可见视口。不能与元素截图同时使用。
  • 只读：true

• browser_type

  • 标题：输入文本
  • 描述：在可编辑元素中输入文本
  • 参数：
    • element (string)：用于获取与该元素交互权限的、人类可读的元素描述
    • ref (string)：页面快照中的精确目标元素引用
    • text (string)：要输入到元素中的文本
    • submit (boolean, optional)：是否提交输入的文本（之后按 Enter）
    • slowly (boolean, optional)：是否逐字输入。适用于触发页面中的按键处理程序。默认情况下会一次性填入整个文本。
  • 只读：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