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"

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