AI导哈

Playwright MCP服务器

将Playwright作为MCP（Model Context Protocol）服务器提供的服务，允许MCP客户端通过SSE协议调用浏览器自动化功能。

  • by torohash
  • Shell
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 torohash/playwright-sse-mcp-server

使用说明

剧作家sse-mcp服务器

Playwright打开MCP（Model Context Protocol）是作为服务器提供的服务。通过使用此服务器MCP从客户端Playwright中所述修改相应参数的值。

前提条件

  • Docker已安装
  • docker-compose已安装
  • mcp-network名称Docker已创建网络

mcp-network如果不存在，则可以使用以下命令创建：

docker network create mcp-network

安装和启动

  1. 克隆或下载存储库
  2. 在项目根目录中执行以下命令：
docker compose up --build

这将在默认的3002端口上启动服务器。启动完成后，将显示以下消息：

playwright-sse-mcp-server  | Server is running on port 3002

设置自定义端口

如果希望在默认端口（3002）以外的端口上启动服务器，则环境变量PORT设置：

PORT=4000 docker compose up --build

这将在指定的端口（在本例中为4000）上启动服务器：

playwright-sse-mcp-server  | Server is running on port 4000

使用方法

相同的mcp-network中描述的场景，使用下列步骤创建明细表，以便在概念设计中分析体量的周长

相同的mcp-network中描述的场景，使用下列步骤创建明细表，以便在概念设计中分析体量的周长URL中选择另一种天花板类型PORT是服务器的启动端口）：

playwright-sse-mcp-server:${PORT}/sse

如果使用默认端口：

playwright-sse-mcp-server:3002/sse

因此Playwright的，之MCP可以使用功能。

主机端连接

主机提供URL中选择另一种天花板类型PORT是服务器的启动端口）：

localhost:${PORT}/sse

如果使用默认端口：

localhost:3002/sse

Roo Code连接到

MCP Servers -> MCP编辑设置->填写以下内容（PORT是服务器的启动端口）：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://localhost:${PORT}/sse"
    }
  }
}

如果使用默认端口：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://localhost:3002/sse"
    }
  }
}

※2025/03/27现在Cline表示SSE中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

在容器环境中Roo Code连接到

相同的Docker Network中描述的相应参数的值Roo Code从容器中，如下所示MCP进行设置：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://playwright-sse-mcp-server:3002/sse"
    }
  }
}

docker-compose.yml设定例：

services:
  # Roo Code コンテナ
  roo-code:
    # 略

networks:
  mcp-network:
    external: true

通过该设定Roo Code从集装箱playwright-sse-mcp-server连接到容器，可以使用浏览器操作功能。容器名称（playwright-sse-mcp-server），模板名称将采用不同的格式Docker Network中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

开发容器环境中的Roo Code的连接（通过主机）

在开发容器中Roo Code，然后单击mcp-network 不参加，通过主机MCP连接到服务器时，如下所示MCP进行设置。

Docker桌面（Mac/Windows）の場合:

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://host.docker.internal:<PORT>/sse"
    }
  }
}

Linux （例如，桥接网关IP使用：

{
  "mcpServers": {
    "playwright-sse-mcp-server-local": {
      "url": "http://172.17.0.1:<PORT>/sse"
    }
  }
}

注意:

  • <PORT> 单击功能区上MCP替换为服务器在主机上发布的端口号（默认值：3002）。
  • Linux在工作空间的边缘172.17.0.1 实际主机部分IP地址或Docker桥接网络网关IP地址。有关详细信息，请参见“从开发容器连接（通过主机）”部分。

从开发容器连接（通过主机）

mcp-network 没有参与开发的集装箱MCP如果需要访问服务器（例如，由于与现有项目兼容而难以更改网络），则可以通过主机进行连接。

在该方法中，从开发集装箱来看相当于“主机”IP地址或特殊DNS名称和MCP服务器在主机上发布的端口（compose.yml 的，之 ports 中设置，默认值为3002）。

接続先URL:

http://<host_ip_or_dns_name>:<PORT>/sse

<PORT> 表示MCP替换为服务器启动的端口号。

<host_ip_or_dns_name> 的确定方法：

  • Docker桌面（Mac/Windows）： 特殊的DNS名称 host.docker.internal 中所述修改相应参数的值。
    • 例: http://host.docker.internal:3002/sse
  • Linux：
    • 主机IP地址： 已分配给主机网络接口IP使用地址（例如：ifconfig 屋脊 ip addr 命令确认）。
      • 例: http://192.168.1.10:3002/sse （IP地址因环境而异）
    • Docker桥接网络网关： Docker的默认桥接网络（bridge）的网关IP地址（通常 172.17.0.1），模板名称将采用不同的格式。docker network inspect bridge 命令确认。
      • 例: http://172.17.0.1:3002/sse

注意点:

  • 根据主机的防火墙设置，可能不允许从开发容器访问主机端口。
  • 使用的端口号为docker compose ps 命令和 compose.yml 请在文件中确认。

使用方便

每次转到项目目录docker compose执行命令很麻烦。使用以下方法，可以在任何地方轻松启动和停止服务器。

使用壳脚本

此项目包含一个shell脚本，用于简化服务器的启动和停止日志显示。

  1. 克隆或下载项目：
# 任意のディレクトリにクローン
git clone https://github.com/torohash/playwright-sse-mcp-server.git /path/to/installation
  1. .bashrc（或.zshrc等已使用的壳配置文件）中添加以下行以导入壳脚本：
# Playwright MCP Server
export PLAYWRIGHT_MCP_HOME="/path/to/installation"
source "$PLAYWRIGHT_MCP_HOME/scripts/playwright-mcp.sh"

# 具体例（絶対パス利用）
export PLAYWRIGHT_MCP_HOME="$HOME/mcps/playwright-sse-mcp-server"  # 実際のパスに置き換えてください
source "$PLAYWRIGHT_MCP_HOME/scripts/playwright-mcp.sh"
  1. 重新启动壳或重新装入配置文件：
source ~/.bashrc

现在，您可以在任何地方使用以下命令：

基本用法

  • playwright-mcp-start -使用默认设置（端口3002，无重新启动）启动服务器
  • playwright-mcp-stop -停止服务器
  • playwright-mcp-logs -查看服务器日志

使用永久模式

“永久”模式会在系统重新启动时自动启动服务器：

playwright-mcp-start -p
# または
playwright-mcp-start --persistent

使用自定义端口

playwright-mcp-start -P 4000
# または
playwright-mcp-start --port 4000

永久模式和自定义端口的组合

playwright-mcp-start -P 4000 -p
# または
playwright-mcp-start --port 4000 --persistent

指定特定的重新启动策略

playwright-mcp-start -r always
# または
playwright-mcp-start --restart always

显示帮助

playwright-mcp-start -h
# または
playwright-mcp-start --help

此方法更易于使用，因为可以使用标记选项灵活地更改设置。另外，通过将外壳脚本分离为其他文件。bashrc简化了文件，便于管理。

自定义壳脚本

壳牌脚本scripts/playwright-mcp.sh的双曲正切值。如果需要，可以编辑和自定义此文件。

环境变数

壳脚本使用以下环境变量：

  • PLAYWRIGHT_MCP_HOME：项目安装目录。如果未设置，则从脚本位置自动检测。

例如，您可以通过设置以下环境变量来指定自定义路径：

export PLAYWRIGHT_MCP_HOME="/path/to/custom/installation"

注意事项

  • 这个服务器headless模式下Playwright执行
  • 服务器是SSE（Server-Sent Events）来修改标记元素的显示属性MCP与客户端通信

相关 MCP