OpenClaw + Playwright MCP 配置教程

通過 Playwright MCP，AI 助手可以直接控制你的瀏覽器——點擊、填表、截圖、爬取動態頁面，還能複用你已登錄的會話和瀏覽器插件。

架構調用關係圖

說明： 本教程以 OpenClaw + mcporter 爲例。Playwright MCP 是標準 MCP 服務器，任何支持 MCP 協議的客戶端均可調用，
例如：VS Code (Copilot)、Cursor、Windsurf、Claude Desktop、Claude Code 等。
配置方法大同小異，核心都是將 npx @playwright/mcp@latest --extension 註冊爲 MCP server。

數據流向示例（一次「截圖百度」）：

什麼是 Playwright？

Playwright 是微軟開發的瀏覽器自動化工具，支持 Chrome、Firefox、WebKit（Safari）、Edge 等主流瀏覽器。像一個「超級機械手」，能幫你操作任何網頁。

核心優勢：

跨瀏覽器、跨平臺，一個 API 走天下
無需視覺識別——通過「無障礙快照」理解頁面結構，AI 直接解析
元素唯一引用（ref=e5），不會像座標點擊那樣飄
複用瀏覽器已有 Cookie 和會話，跳過登錄、2FA
支持無頭模式靜默運行，也可「有頭」看到操作過程
40+ 工具：導航、點擊、填表、截圖、攔截請求、模擬網絡、錄視頻等

能做什麼？

爬取 JS 渲染的動態頁面
自動化測試（UI 迴歸、功能驗證）
模擬不同網絡環境（限速、離線）
AI 操控瀏覽器，無需截圖 + 視覺模型

安裝配置

前置條件

Playwright CLI 安裝方法（2 選 1）：

# 方式一：全局安裝（推薦）
npm install -g @playwright/mcp

# 方式二：通過 npx 直接運行（無需安裝）
npx @playwright/mcp@latest --version

# 安裝瀏覽器驅動（首次使用會自動提示，也可手動執行）
npx playwright install chromium

# 或安裝全部瀏覽器
npx playwright install

💡 瀏覽器驅動只需要安裝一次，之後重複使用。若已安裝過則無需重複執行。

安裝步驟

第一步：安裝瀏覽器擴展

打開 Chrome/Edge，進入 Playwright Extension[1]
點擊「添加至 Chrome」→ 「添加擴展程序」
擴展圖標出現在瀏覽器右上角

第二步：獲取 Extension Token

點擊瀏覽器右上角 Playwright 擴展圖標
頁面顯示 Token 信息，複製 PLAYWRIGHT_MCP_EXTENSION_TOKEN=xxxxxxxx 那串字符

第三步：配置 mcporter

⚠ 注意： mcporter 默認在當前工作目錄（cwd）下查找配置文件。OpenClaw 的 mcporter 配置在 .openclaw\workspace\config\mcporter.json。
因此運行 mcporter 命令時，需要先切換到項目目錄，或者使用 --persist <路徑> 指定配置：
# 方式一：先 cd 到正確目錄
cd D:\Users\XXX\.openclaw\workspace
mcporter config list

# 方式二：--persist 指定配置文件路徑
mcporter config list --persist D:\Users\XXX\.openclaw\workspace\config\mcporter.json

第四步：驗證連接

mcporter call playwright.browser_navigate url="https://example.com"

成功會返回頁面快照和標題。