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

? 浏览器驱动只需要安装一次，之后重复使用。若已安装过则无需重复执行。

安装步骤

第一步：安装浏览器扩展

1. 1. 打开 Chrome/Edge，进入 Playwright Extension^[1]
2. 2. 点击「添加至 Chrome」→ 「添加扩展程序」
3. 3. 扩展图标出现在浏览器右上角

第二步：获取 Extension Token

1. 1. 点击浏览器右上角 Playwright 扩展图标
2. 2. 页面显示 Token 信息，复制 PLAYWRIGHT_MCP_EXTENSION_TOKEN=xxxxxxxx 那串字符

第三步：配置 mcporter

# 添加 Playwright MCP 服务器
mcporter config add playwright `
  --command npx `
  --arg @playwright/mcp@latest `
  --arg --extension `
  --env PLAYWRIGHT_MCP_EXTENSION_TOKEN=你的Token粘贴在这里 `
  --description "Playwright MCP browser extension mode"

⚠️ 注意： 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"

成功会返回页面快照和标题。

自带 browser 工具 vs Playwright MCP：什么时候用哪个？

OpenClaw 内置了一个 browser 工具，同时支持 Playwright MCP，两者都能操控浏览器，但侧重不同：

选择建议：

简单来说：

• • browser 工具 = 你的「私人助理」在后台默默干活
• • Playwright MCP = 你坐在旁边看着「机械手」帮你操作你的浏览器

使用方法

1. 1. 打开 Chrome/Edge 浏览器
2. 2. 点击右上角 Playwright 扩展图标，确保显示「已连接」
3. 3. 告诉 AI 你想做什么，例如：

帮我截图 https://news.ycombinator.com
去百度搜索 "OpenClaw"
帮我填一下这个表单

故障排查

进阶：OpenClaw 原生配置

除 mcporter 外，也可直接在 openclaw.json 配置（需手动编辑文件）：

{
  "mcp": {
    "servers": {
      "playwright": {
        "command": "npx",
        "args": ["@playwright/mcp@latest", "--extension"],
        "env": {
          "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "你的Token"
        }
      }
    }
  }
}

⚠️ command/args/env 受保护，config.patch 无法修改，需直接编辑 JSON 或用 mcporter。

相关链接

• • Playwright MCP 官方文档^[2]
• • 浏览器扩展连接方式^[3]
• • OpenClaw MCP 配置参考^[4]

引用链接

[1] Chrome Web Store 下载: https://chromewebstore.google.com/detail/playwright-extension/mmlmfjhmonkocbjadbfplnigmagldckm
[2] Playwright MCP 官方文档: https://playwright.nodejs.cn/mcp/introduction
[3] 浏览器扩展连接方式: https://playwright.nodejs.cn/mcp/configuration/browser-extension
[4] OpenClaw MCP 配置参考: ./docs/gateway/configuration-reference.md