Playwright MCP Docker

🚀 Playwright MCP Docker 環境

本項目提供了一個 Docker Compose 環境，用於運行 @playwright/mcp 服務器。藉助該項目，你能夠輕鬆完成 Playwright MCP 服務器的設置與管理，進而與 Cline 或 Cursor 等客戶端協同使用。

🚀 快速開始

先決條件

• Docker
• Docker Compose

設置

1. 克隆倉庫

   git clone <repository-url>
   cd playwright-mcp-docker
   

2. 創建 .env 文件 複製示例環境文件：

   cp .env.sample .env
   

3. 配置 .env 編輯 .env 文件，依據你的環境和偏好調整設置：
   • MCP_HOST_PORT：主機機器上用於訪問 MCP 服務器的端口（默認：8931）。
   • HEADLESS：設置為 true 以無頭模式運行（無瀏覽器 GUI），或 false 以有頭模式運行（需要 GUI 設置）。默認為 true。
   • (僅限有頭模式) DISPLAY、WAYLAND_DISPLAY、XDG_RUNTIME_DIR：在 Linux 環境中用於 GUI 應用程序的環境變量（特別是 WSLg）。已提供默認值。
   • (僅限有頭模式) X11_HOST_PATH、WSLG_HOST_PATH：X11 和 WSLg 套接字/目錄的主機路徑。已提供默認值。若系統配置不同，請進行調整。對於 Windows Docker 訪問 WSL 路徑，使用 \\wsl.localhost\DistroName\... 格式（參見 .env.sample）。

運行服務器

1. 構建並啟動容器

   docker-compose up --build -d
   

   --build 標誌僅在首次運行或 Dockerfile 更改時需要。-d 標誌用於以分離模式運行容器（後臺運行）。
2. 配置 MCP 客戶端（例如，VSCode/Cline）
   • 添加或啟用名為 playwright_sse 的 MCP 服務器（或任何你喜歡的名稱）。
   • 設置連接類型為 SSE。
   • 設置 URL 為 http://localhost:<MCP_HOST_PORT>/sse（將 <MCP_HOST_PORT> 替換為 .env 文件中的值，例如 http://localhost:8931/sse）。
   • 示例客戶端配置（文件名取決於客戶端）：

   {
       "mcpServers": {
           "playwright_sse": { // 服務器名稱任意
               "url": "http://localhost:8931/sse" // 匹配.env文件中的端口號
           }
       }
   }
   

停止服務

docker-compose down

✨ 主要特性

• 提供 Docker Compose 環境，方便快捷地設置和管理 Playwright MCP 服務器。
• 支持無頭和有頭兩種運行模式，可根據不同場景靈活切換。

📦 安裝指南

按照上述“設置”和“運行服務器”的步驟操作，即可完成 Playwright MCP 服務器的安裝與啟動。

💻 使用示例

基礎用法

# 克隆倉庫
git clone <repository-url>
cd playwright-mcp-docker

# 創建.env文件
cp .env.sample .env

# 配置.env文件（可根據需求調整）

# 構建並啟動容器
docker-compose up --build -d

# 配置MCP客戶端（以示例JSON配置為例）
```json
{
    "mcpServers": {
        "playwright_sse": {
            "url": "http://localhost:8931/sse"
        }
    }
}

高級用法

切換模式

• 無頭模式：在 .env 文件中設置 HEADLESS=true，適合自動化任務。
• 有頭模式：在 .env 文件中設置 HEADLESS=false，適合需要可視化界面的場景。

📚 詳細文檔

其他信息

• .env 文件：用於配置環境變量，如端口和模式設置。
• docker-compose.yml：定義瞭如何構建和運行 Docker 服務。
• Dockerfile：指定了如何構建 Docker 鏡像。
• entrypoint.sh：在容器啟動時執行的腳本。

注意事項

⚠️ 重要提示

在 WSLg 環境中運行時，請確保正確設置 DISPLAY 和其他相關環境變量，以便在 Windows 中顯示 Linux GUI 應用程序。

⚠️ 重要提示

如果遇到權限問題，請檢查 Docker 和 WSLg 的配置，並確保用戶具有適當的權限。

通過以上步驟，你可以輕鬆設置並運行 Playwright MCP 服務器。希望這些說明對你有所幫助！