Playwright MCP In Azure

Docker中的Playwright MCP服务器

在Docker容器中运行Playwright的模型上下文协议（MCP）服务器。此服务器通过MCP协议提供浏览器自动化功能，使LLM能够与网页交互。

🚀 什么是MCP？

这 模型上下文协议（MCP） 是一个开放协议，规范了应用程序如何向LLM提供上下文。此实现提供了一个基于Playwright的MCP服务器，可以在任何Linux系统上的Docker容器中运行。

✨ 特性

• 完整的剧作家MCP支持：来自的所有浏览器自动化工具 @剧作家/mcp
• Docker就绪：预构建Docker镜像，便于部署
• HTTP/SSE传输：可通过HTTP访问服务器发送的事件
• OpenAPI/Swagger文档：上的交互式API文档 /api-docs
• 端口8080：易于集成的标准端口（绑定到0.0.0.0，可通过localhost访问）
• VSCode集成：VSCode的MCP配置已准备就绪
• Azure兼容：已为Azure容器实例、Azure应用服务和GitHub包做好准备
• 预装Chrome: npx playwright install chrome 在Docker构建期间运行，以便Chromium工具在第一个请求时工作

📋 先决条件

• Docker已安装并正在运行
• 端口8080可用

🔧 快速开始

1.构建Docker镜像

docker build -t playwright-mcp .

2.运行容器

docker run -d -p 8080:8080 --name playwright-mcp-server playwright-mcp

3.验证服务器

检查服务器是否正在运行：

docker logs playwright-mcp-server

您应该看到：

🎭 Playwright MCP Server started
📡 Listening on http://0.0.0.0:8080
🔧 Available endpoints:
   - GET  /health       - Health check
   - GET  /capabilities - List MCP capabilities
   - GET  /mcp          - MCP SSE stream (establish connection)
   - POST /messages     - MCP messages (with sessionId parameter)
   - GET  /api-docs     - OpenAPI/Swagger documentation
   - GET  /api-docs.json - OpenAPI specification (JSON)

✨ Server ready to accept connections!

由于Playwright安装步骤，Chrome已经安装在Docker镜像中，因此MCP工具，如 browser_navigate 立即工作。

📡 API终点

OpenAPI/Swagger文档

访问交互式API文档：

# Open in browser
http://localhost:8080/api-docs

# Get OpenAPI spec JSON
curl http://localhost:8080/api-docs.json

Swagger UI提供：

• 交互式API勘探
• 请求/响应示例
• 模式定义
• 工具说明
• 试用功能

健康检查

curl http://localhost:8080/health

答复：

{
  "status": "ok",
  "service": "Playwright MCP Server",
  "version": "1.0.0",
  "port": "8080",
  "endpoints": {
    "mcp": "/mcp",
    "health": "/health",
    "capabilities": "/capabilities",
    "swagger": "/api-docs",
    "openapi": "/api-docs.json"
  }
}

列出MCP服务器功能

获取所有可用的Playwright工具：

curl http://localhost:8080/capabilities

回复（摘录）：

{
  "tools": [
    {
      "name": "browser_navigate",
      "description": "Navigate to a URL"
    },
    {
      "name": "browser_snapshot",
      "description": "Capture accessibility snapshot of the current page"
    },
    {
      "name": "browser_click",
      "description": "Perform click on a web page"
    },
    {
      "name": "browser_type",
      "description": "Type text into editable element"
    },
    {
      "name": "browser_fill_form",
      "description": "Fill multiple form fields"
    },
    {
      "name": "browser_take_screenshot",
      "description": "Take a screenshot of the current page"
    }
  ],
  "protocol": "MCP",
  "transport": "SSE"
}

MCP协议端点

MCP端点使用服务器发送事件（SSE）传输，分为两个步骤：

步骤1：建立SSE流（GET）

# GET request to establish the SSE stream and receive sessionId
curl http://localhost:8080/mcp

这将返回一个包含sessionId的端点事件的SSE流：

event: endpoint
data: /messages?sessionId=

步骤2：发送消息（POST）

# POST request to send JSON-RPC messages using the sessionId
curl -X POST "http://localhost:8080/messages?sessionId=" \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "method": "initialize",
    "params": {
      "protocolVersion": "2024-11-05",
      "capabilities": {},
      "clientInfo": {
        "name": "test-client",
        "version": "1.0.0"
      }
    },
    "id": 1
  }'

🔌 可用的MCP工具

服务器提供所有标准的Playwright MCP工具：

导航和页面：

• browser_navigate -导航到URL
• browser_navigate_back -返回上一页
• browser_close -关闭浏览器页面

互动：

• browser_click -点击元素
• browser_type -在字段中键入文本
• browser_fill_form -填写多个表单字段
• browser_hover -将鼠标悬停在元素上
• browser_drag -拖放
• browser_press_key -按键盘键
• browser_select_option -选择下拉选项

信息：

• browser_snapshot -获取可访问性快照
• browser_take_screenshot -截图
• browser_console_messages -获取控制台日志
• browser_network_requests -获取网络请求

对话框和文件：

• browser_handle_dialog -处理警报/提示
• browser_file_upload -上传文件

高级：

• browser_evaluate -执行JavaScript
• browser_resize -调整浏览器窗口大小
• browser_wait_for -等待条件

有关完整的工具文档，请参阅 剧作家MCP官方文档.

🐳 Docker命令

🌐 与MCP客户端一起使用

VS代码/光标/GitHub副本

此服务器可以作为MCP服务器连接到VSCode、Cursor或GitHub Copilot。A预配置 .vscode/mcp-settings.json 文件包含在此存储库中。

配置选项：

选项1：连接到正在运行的Docker容器（HTTP/SSE）

{
  "mcpServers": {
    "playwright-http": {
      "url": "http://localhost:8080/mcp",
      "transport": "sse"
    }
  }
}

选项2：自动启动Docker容器

{
  "mcpServers": {
    "playwright-docker": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-p",
        "8080:8080",
        "playwright-mcp"
      ],
      "env": {
        "PORT": "8080",
        "HOST": "0.0.0.0"
      }
    }
  }
}

设置步骤：

1. 构建Docker镜像 （如果尚未建成）：

   docker build -t playwright-mcp .

1. 启动容器:

   docker run -d -p 8080:8080 --name playwright-mcp-server playwright-mcp

1. 配置VSCode:

- 复制 .vscode/mcp-settings.json 到您的项目或VSCode设置 - 或者将配置添加到VSCode设置JSON中 - 重新加载VSCode/Cursor以激活MCP连接

1. 验证连接:

- MCP服务器应出现在您的副驾驶/AI辅助工具中 - 您应该看到Playwright浏览器自动化工具可用 - 使用“导航到”这样的简单命令进行测试https://example.com"

参考： 微软剧作家MCP文档

克劳德桌面版

添加到您的Claude Desktop配置中：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8080/mcp"
    }
  }
}

任何MCP客户端

服务器可在以下位置访问：

http://localhost:8080/mcp

📦 GitHub软件包

要使用GitHub容器注册表中的图像：

构建和推送

# Tag the image
docker tag playwright-mcp ghcr.io/harshityadav95/playwright-mcp:latest

# Login to GitHub Container Registry
echo $GITHUB_TOKEN | docker login ghcr.io -u USERNAME --password-stdin

# Push the image
docker push ghcr.io/harshityadav95/playwright-mcp:latest

拉动并奔跑

# Pull the latest image
docker pull ghcr.io/harshityadav95/playwright-mcp-in-azure:latest

# Tag the pulled image locally as "playwright-mcp"
docker tag ghcr.io/harshityadav95/playwright-mcp-in-azure:latest playwright-mcp

# Run the container using the reference name
docker run -d -p 8080:8080 --name playwright-mcp-server playwright-mcp

☁️ Azure部署

Azure容器实例

az container create \
  --resource-group myResourceGroup \
  --name playwright-mcp-server \
  --image ghcr.io/harshityadav95/playwright-mcp:latest \
  --dns-name-label playwright-mcp \
  --ports 8080

Azure应用服务

az webapp create \
  --resource-group myResourceGroup \
  --plan myAppServicePlan \
  --name playwright-mcp-app \
  --deployment-container-image-name ghcr.io/harshityadav95/playwright-mcp:latest

部署到Azure Web应用程序（分步）

此仓库打包为Docker容器（推荐）。以下是Azure Web Apps（Linux）的常见部署路径。

1. 创建资源组（如果没有）：

az group create --name myResourceGroup --location "CentralUS"

1. 创建应用服务计划（Linux）：

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --is-linux --sku B1

1. 使用注册表中的容器映像创建Web应用程序（例如：GitHub容器注册表、ACR或Docker Hub）：

公共形象示例（GHCR）：

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name playwright-mcp-app --deployment-container-image-name ghcr.io/harshityadav95/playwright-mcp:latest

如果您的映像是私有的，请配置注册表凭据：

az webapp config container set --name playwright-mcp-app --resource-group myResourceGroup \
  --docker-custom-image-name ghcr.io/harshityadav95/playwright-mcp:latest \
  --docker-registry-server-url https://ghcr.io \
  --docker-registry-server-user YOUR_GH_USERNAME \
  --docker-registry-server-password YOUR_GHCR_PAT

1. 设置运行时端口。如果您的容器侦听端口8080，请告诉Azure要转发哪个端口：

az webapp config appsettings set --name playwright-mcp-app --resource-group myResourceGroup --settings WEBSITES_PORT=8080

1. 可选：添加服务器使用的环境变量（例如。， PORT, HOST):

az webapp config appsettings set --name playwright-mcp-app --resource-group myResourceGroup --settings PORT=8080 HOST=0.0.0.0

1. 浏览到web应用程序（或使用 curl)配置完成后：

az webapp browse --name playwright-mcp-app --resource-group myResourceGroup

# or check health
curl https://playwright-mcp-app.azurewebsites.net/health

GitHub操作：自动发布到Azure Web应用程序（容器）

使用GitHub Actions工作流将图像推送到GHCR/ACR，然后更新应用服务。创建 .github/workflows/azure-deploy.yml 使用此模板：

name: Build and deploy Docker image to Azure Web App

on:
  push:
    branches: ["main"]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v4

    - name: Login to GitHub Container Registry
      uses: docker/login-action@v2
      with:
        registry: ghcr.io
        username: ${{ github.actor }}
        password: ${{ secrets.GHCR_TOKEN }}

    - name: Build and push Docker image
      run: |
        docker build -t ghcr.io/${{ github.repository_owner }}/playwright-mcp:${{ github.sha }} .
        docker push ghcr.io/${{ github.repository_owner }}/playwright-mcp:${{ github.sha }}

    - uses: azure/webapps-deploy@v2
      with:
        app-name: 'playwright-mcp-app'
        slot-name: 'production'
        images: 'ghcr.io/${{ github.repository_owner }}/playwright-mcp:${{ github.sha }}'
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}

笔记：

• 创建GitHub机密 GHCR_TOKEN 和 AZURE_WEBAPP_PUBLISH_PROFILE 在存储库设置中。
• 这 AZURE_WEBAPP_PUBLISH_PROFILE 可以从Azure门户下载 Get publish profile 对于您的Web应用程序。

Node应用服务（不含Docker）

如果你不想使用容器，你可以直接将这个项目部署为Node应用程序；但是，Docker容器包括Playwright及其浏览器依赖项，建议用于此服务器。对于Node应用程序部署，将运行时堆栈配置为Node并设置 PORT 到 8080.

🛠️ 发展

本地开发（无Docker）

# Install dependencies (will automatically install Playwright browsers)
npm install

# Start the server
npm start

服务器将在以下时间可用http://localhost:8080

注： 这 npm install 命令通过安装后脚本自动安装Playwright的Chromium浏览器。如果安装失败，您可以手动安装：

npx playwright install chromium

运行测试

npm test

🏗️ 项目结构

.
├── Dockerfile          # Docker image configuration
├── index.js           # MCP server implementation
├── package.json       # Dependencies
├── test.js           # Test suite
└── README.md         # This file

📝 环境变量

• PORT -服务器端口（默认：8080）
• HOST -服务器主机（默认值：0.0.0.0）
• NODE_ENV -节点环境（默认：生产环境）

🔧 故障排除

浏览器安装问题

如果您遇到以下错误：

Error: browserType.launchPersistentContext: Chromium distribution 'chrome' is not found

这意味着未安装Playwright浏览器。该项目使用Playwright捆绑的Chromium浏览器（不是系统Chrome）。要修复：

解决方案1：自动（推荐）

npm install

安装后脚本将自动安装Chromium。

解决方案2：手动安装

npx playwright install chromium

解决方案3：使用系统依赖项进行安装

npx playwright install chromium --with-deps

Docker问题

如果Docker容器无法启动，请确保：

1. 端口8080可用： docker ps 检查是否存在冲突
2. 图像构建正确： docker build -t playwright-mcp .
3. 检查日志： docker logs playwright-mcp-server

Docker镜像使用官方的Playwright基础镜像，其中包括所有必要的浏览器和依赖项。

浏览器选择

此服务器使用 铬 （Playwright的捆绑浏览器）而不是Chrome，以确保：

• 跨平台兼容性
• 无系统依赖关系
• Docker和本地环境中的一致行为
• 通过npm自动安装

🔒 安全注意事项

• 服务器运行时 --no-sandbox Docker兼容性标志
• 考虑使用网络策略来限制生产中的访问
• 在生产环境中使用HTTPS

🤝 贡献

欢迎问题和拉取请求！

📚 参考文献

• 微软剧作家MCP
• 模型上下文协议
• 剧作家文档

📄 许可证

国际学生中心

👤 作者

严酷性adav95

• github： @严酷性adav95

______________________________________________________________________

自动化快乐！ 🎭🐳