openclaw控制浏览器/自动化的playwright MCP + Mcporter方案实现

概述

总结了使用Mcporter集成Playwright MCP到OpenClaw的完整测试过程，包括问题诊断、架构理解、正确使用方法。

PS:首先为什么使用这个方案，熬夜后的我闲的。突发奇想在家里搞一下openclaw。当时配置完browser工具，openclaw一直回复我它使用browser工具无法做点击这些操作（实际后来一股脑整完这个方案后我搜了browser也可以。有点无语）。我随便查了一下就想到了用mcp来做，就有了这么一篇文章......

1. 架构理解

三层架构

scss 复制代码

┌─────────────────────────────────────────┐
│ OpenClaw AI (主agent)                 │
├─────────────────────────────────────────┤
│ Mcporter (MCP Manager Skill)          │
├─────────────────────────────────────────┤
│ Playwright MCP Server                │
├─────────────────────────────────────────┤
│ 22种浏览器工具                     │
└─────────────────────────────────────────┘

详细说明

第1层：OpenClaw AI (主Agent)

角色: 主要对话处理器
职责: 理解用户请求，调用合适的工具
能力: 访问已注册的工具和skills

第2层：Mcporter (MCP Manager)

本质: Skill（在openclaw.json中配置）
核心功能:

- 加载MCP服务器配置
- 启动和管理MCP服务器
- 作为工具和服务器之间的桥梁
- 路由用户请求到正确的MCP服务器

第3层：Playwright MCP Server

本质: MCP服务器（Model Context Protocol server）
运行方式 : 通过npx启动 (npx @playwright/mcp@latest)
提供的工具: 22种浏览器自动化工具

第4层：浏览器工具

来源: 由Playwright MCP注册到Mcporter，然后Mcporter注册到OpenClaw
功能: browser_navigate, browser_click, browser_type等22种工具

2. 初始问题诊断

问题描述

问题1：Playwright MCP工具不可用

现象:

arduino 复制代码

我的输入: "请使用Playwright MCP打开https://www.bing.com"
openclaw反馈: "我没有playwright工具可调用"

可能原因:

Mcporter未正确启动
Playwright MCP服务器连接失败
工具注册未完成
配置文件路径错误

问题2：用户直接在PowerShell执行

现象:

css 复制代码

PS C:\Users\10193> playwright.open("https://www.bing.com")

问题分析:

openclaw尝试直接调用playwright.open()
这是错误的使用方式
playwright不是独立的命令行工具
需要通过Mcporter作为MCP服务器使用

3. 真相揭示

关键发现

发现1：Playwright MCP已安装

scss 复制代码

pnpm list -g @playwright/mcp
dependencies:
  @playwright/mcp 0.0.68

✅ 状态: Playwright MCP已成功安装

发现2：Mcporter配置正确

验证步骤:

css 复制代码

mcporter list playwright --schema playwright

输出: 显示了22种工具的完整schema

✅ 状态: Mcporter正确配置，工具schema已加载

发现3：Gateway已重启

日志证据:

arduino 复制代码

07:37:02 info browser/chrome {"subsystem":"browser/chrome"} 🦞 openclaw browser started (chrome) profile "openclaw" on 127.0.0.1:18800
07:37:18 debug agent/embedded {"subsystem":"agent/embedded"} embedded run tool end: runId=a67b1d0d tool=browser

✅ 状态: Gateway重启成功，服务正常运行

发现4：提供给openclaw的Mcporter命令输出

它其实不明白怎么调用，这个时候得给他掰回来。

css 复制代码

mcporter list playwright --schema playwright

结果: 输出了完整的22种工具定义

✅ 结论: Mcporter工作正常，能够连接到Playwright MCP

4. Mcporter工作原理

核心概念

MCP (Model Context Protocol)

定义:

开放标准协议，用于AI助手与外部工具之间的通信
允许动态工具注册
支持多种工具服务器同时运行

特点:

✅ 标准化接口
✅ 类型安全（JSON Schema）
✅ 双向通信（AI ↔ 工具）
✅ 错误处理和重试机制

Mcporter作为MCP Manager

职责:

css 复制代码

┌─────────────────────────────────┐
│ 1. 加载MCPORTER_CONFIG      │
│    从: C:\Users\10193\config\mcporter.json
│                               │
│ 2. 解析mcpServers配置      │
│    {                          │
│      "playwright": {          │
│        "command": "npx",     │
│        "args": [...]         │
│      }                          │
│                               │
│ 3. 启动MCP服务器         │
│    npx @playwright/mcp@latest │
│                               │
│ 4. 建立MCP连接         │
│    通过标准MCP协议          │
│                               │
│ 5. 注册工具到OpenClaw    │
│    22种browser_*工具     │
│                               │
│ 6. 路由用户请求         │
│    转发给MCP服务器处理    │
│                               │
└─────────────────────────────────┘

5. 正确使用方式

方式对比

❌ 错误方式

bash 复制代码

# 错误1: 直接调用playwright命令
playwright.open("https://www.bing.com")

# 错误2: 在PowerShell中使用mcporter命令
mcporter call playwright.browser_navigate url=https://www.bing.com

问题:

这些方式在AI agent环境中不可用
用户误解了Mcporter的作用

✅ 正确方式

方式1：在OpenClaw对话中使用（推荐）

markdown 复制代码

【用户：其他agent】

请使用Playwright MCP帮我：
1. 打开 https://www.bing.com
2. 等待搜索框
3. 输入 "测试搜索"
4. 点击搜索按钮
5. 截图

处理流程:

OpenClaw AI理解请求
识别"使用Playwright MCP"
通过Mcporter路由到Playwright MCP服务器
Playwright MCP执行操作
结果通过Mcporter返回给OpenClaw
OpenClaw AI整理结果返回给用户

方式2：在命令行中使用mcporter（高级用户）

ini 复制代码

# 适用于熟悉命令行的用户
# 需要先验证mcporter可用
mcporter list playwright

# 执行具体命令
mcporter call playwright.browser_navigate url=https://www.bing.com
mcporter call playwright.browser_take_screenshot filename=screenshot.png

场景: 自动化脚本、批量操作

6. 配置文件说明

Mcporter配置文件

位置 : C:\Users\10193\config\mcporter.json

内容:

perl 复制代码

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  },
  "imports": []
}

字段说明:

mcpServers: MCP服务器定义对象

- command: 启动命令（npx）
- args: 命令参数（数组格式）

imports: 导入其他MCP服务器（可选）

OpenClaw配置文件

位置 : C:\Users\10193.openclaw\openclaw.json

相关配置:

json 复制代码

{
  "skills": {
    "entries": {
      "mcporter": {
        "enabled": true,
        "env": {
          "MCPORTER_CONFIG": "C:\Users\10193\config\mcporter.json"
        }
      }
    }
  }
}

字段说明:

enabled: 是否启用该skill
env: 环境变量（如MCPORTER_CONFIG）

环境变量设置

Windows PowerShell:

ini 复制代码

# 方法1: 使用setx
$env:MCPORTER_CONFIG = "C:\Users\10193\config\mcporter.json"

# 方法2: 在命令行中临时设置
$env:MCPORTER_CONFIG="C:\Users\10193\config\mcporter.json"; mcporter list playwright

7. 故障排查

问题1：工具未注册

症状: 请求使用Playwright MCP工具时收到"工具不可用"错误

诊断步骤:

bash 复制代码

# 1. 验证Playwright MCP安装
pnpm list -g @playwright/mcp

# 2. 检查Mcporter配置
type C:\Users\10193\config\mcporter.json

# 3. 查看Mcporter状态
mcporter list playwright

# 4. 检查OpenClaw日志
openclaw logs

常见原因:

Mcporter未启动
Playwright MCP服务器启动失败
配置文件路径错误
Gateway需要重启

问题2：MCP连接超时

症状: Mcporter能够连接，但操作超时

解决方案:

检查网络连接
增加timeout参数
验证Playwright MCP进程运行

ini 复制代码

# 检查进程
tasklist | findstr playwright

# 增加超时
mcporter call playwright.browser_navigate url=https://www.bing.com
# （自动会使用默认超时）

问题3：元素找不到错误

症状: "Element not found"或"Timeout"

解决方案:

ini 复制代码

# 1. 先获取页面快照
mcporter call playwright.browser_snapshot filename=snapshot.md

# 2. 查看快照找到正确的ref值
# （然后在后续操作中使用正确的ref）

最佳实践:

总是先获取快照
使用ref而不是selector
等待元素出现后再操作
使用合理的timeout值

8. 测试流程

完整测试清单

阶段1：环境验证

Playwright MCP已安装（通过pnpm list -g）
Mcporter配置文件存在且正确
Gateway已重启并正常运行
Mcporter成功连接到Playwright MCP
22种工具schema已加载

阶段2：基本功能测试

导航到URL（browser_navigate）
等待页面加载（browser_wait_for）
获取页面快照（browser_snapshot）
截取页面（browser_take_screenshot）
返回上一页（browser_navigate_back）

阶段3：元素操作测试

获取快照并找到元素ref
点击元素（browser_click）
输入文本（browser_type）
悬停元素（browser_hover）
按键（browser_press_key）

阶段4：表单测试

填写多个字段（browser_fill_form）
选择下拉选项（browser_select_option）

阶段5：高级功能测试

执行JavaScript（browser_evaluate）
运行Playwright代码（browser_run_code）
处理对话框（browser_handle_dialog）
调整窗口大小（browser_resize）

阶段6：多标签页测试

列出所有标签页（browser_tabs action=list）
打开新标签页（browser_tabs action=new）
切换标签页（browser_tabs action=select）
关闭标签页（browser_tabs action=close）

9. 最佳实践

1. 使用快照获取元素引用

推荐做法:

ini 复制代码

# ❌ 不推荐：使用CSS选择器
mcporter call playwright.browser_click selector="#search-box"

# ✅ 推荐：使用快照ref
mcporter call playwright.browser_snapshot
mcporter call playwright.browser_click ref=e147

优势:

快照提供页面结构和元素引用
ref值是唯一的，不会因页面变化而失效
更容易调试和理解

2. 合理使用等待

避免超时:

ini 复制代码

# ❌ 不推荐：固定长时间等待
mcporter call playwright.browser_wait_for time=30

# ✅ 推荐：使用条件等待
mcporter call playwright.browser_wait_for text="搜索按钮" time=10

3. 错误处理和重试

基本错误处理模式:

markdown 复制代码

// 在OpenClaw对话中请求时
"请尝试以下操作，如果失败告诉我：
1. 打开 https://www.bing.com
2. 如果超时，增加等待时间
3. 如果元素找不到，重新获取快照"

4. 批量操作优化

对于大量截图:

ini 复制代码

# 使用循环
$urls = @("https://www.bing.com", "https://www.google.com")
foreach ($url in $urls) {
  $index = $urls.IndexOf($url) + 1
  mcporter call playwright.browser_navigate url=$url
  mcporter call playwright.browser_wait_for time=3
  $filename = "screenshot-$index.png"
  mcporter call playwright.browser_take_screenshot filename=$filename
}

5. 日志记录

启用调试模式:

perl 复制代码

# 在mcporter.json中添加调试选项
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--debug"]
    }
  }
}

保存日志:

ini 复制代码

# 保存控制台日志
mcporter call playwright.browser_console_messages level=debug filename=console.log

# 保存网络请求
mcporter call playwright.browser_network_requests includeStatic=false filename=network.json

10. 示例代码

示例1：自动化搜索脚本（PowerShell）

ini 复制代码

# Playwright MCP搜索自动化脚本
param(
    [string]$SearchKeyword = "AI助手"
)

# 1. 打开Bing
Write-Host "正在打开Bing..." -ForegroundColor Green
mcporter call playwright.browser_navigate url=https://cn.bing.com

# 2. 等待搜索框
Write-Host "等待搜索框..." -ForegroundColor Yellow
mcporter call playwright.browser_wait_for time=3 text="搜索"

# 3. 获取快照
mcporter call playwright.browser_snapshot

# 4. 输入搜索词
Write-Host "输入搜索词..." -ForegroundColor Cyan
mcporter call playwright.browser_type ref=e147 text=$SearchKeyword

# 5. 点击搜索按钮
Write-Host "点击搜索按钮..." -ForegroundColor Cyan
mcporter call playwright.browser_click ref=e10

# 6. 等待结果
Write-Host "等待结果..." -ForegroundColor Yellow
mcporter call playwright.browser_wait_for time=5

# 7. 截图
Write-Host "截取结果..." -ForegroundColor Green
$timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
$filename = "search-$SearchKeyword-$timestamp.png"
mcporter call playwright.browser_take_screenshot filename=$filename fullPage=true

Write-Host "完成！截图已保存: $filename" -ForegroundColor Green

示例2：数据抓取（JavaScript）

vbnet 复制代码

# 抓取网页标题和链接
Write-Host "正在抓取数据..." -ForegroundColor Green

$jsCode = @'
  const items = document.querySelectorAll(".content article");
  return Array.from(items).slice(0, 5).map(item => ({
    title: item.querySelector("h2")?.textContent,
    url: item.querySelector("a")?.href,
    time: new Date().toISOString()
  }));
'@

mcporter call playwright.browser_evaluate function=$jsCode

Write-Host "数据抓取完成！" -ForegroundColor Green

示例3：表单填写自动化

ini 复制代码

# 填写复杂表单
$formData = @{
    name = "测试用户"
    email = "test@example.com"
    phone = "13800138000"
    message = "这是测试消息"
    agree = "true"
} | ConvertTo-Json

# 转换为Playwright字段格式
$fields = @(
    @{ name = "username"; type = "textbox"; value = $formData.name; ref = "e50" },
    @{ name = "email"; type = "textbox"; value = $formData.email; ref = "e100" },
    @{ name = "phone"; type = "textbox"; value = $formData.phone; ref = "e150" },
    @{ name = "message"; type = "textbox"; value = $formData.message; ref = "e200" },
    @{ name = "agree"; type = "checkbox"; value = $formData.agree.ToString().ToLower(); ref = "e250" }
) | ConvertTo-Json

# 执行填充
mcporter call playwright.browser_fill_form fields=$fields

# 提交表单
mcporter call playwright.browser_click ref=e300

# 等待结果
mcporter call playwright.browser_wait_for time=5

# 截图验证
mcporter call playwright.browser_take_screenshot filename=form-submitted.png fullPage=true

示例4：多标签页管理

perl 复制代码

# 打开多个网站并行
$urls = @("https://www.bing.com", "https://www.google.com", "https://www.github.com")

foreach ($url in $urls) {
    mcporter call playwright.browser_navigate url=$url
}

# 等待所有页面加载
Start-Sleep -Seconds 3

# 列出所有标签页
mcporter call playwright.browser_tabs action=list

# 截取每个标签页
$index = 1
while ($true) {
    mcporter call playwright.browser_tabs action=select index=$index
    mcporter call playwright.browser_take_screenshot filename="tab-$index.png"
    $index++
    if ($index -gt 3) { break }
}

总结与建议

✅ 已验证的功能

Mcporter安装: Playwright MCP 0.0.68通过pnpm全局安装
Mcporter配置: 配置文件正确，环境变量设置正确
Mcporter连接: 成功连接到Playwright MCP服务器
工具注册: 22种Playwright浏览器工具已注册到OpenClaw
工具调用: 所有22种工具都可以通过Mcporter调用

🎯 核心要点

架构清晰理解

- Mcporter是Skill，不是命令行工具
- Mcporter作为MCP Manager桥接OpenClaw和Playwright MCP
- Playwright MCP提供22种工具作为MCP服务器功能

正确的使用方式

- 推荐: 在OpenClaw对话中自然语言请求"使用Playwright MCP"
- 高级: 在PowerShell中使用mcporter命令（用于自动化脚本）

常见误解避免

- ❌ 不要直接调用playwright命令
- ❌ 不要在AI agent环境中执行playwright
- ✅ 始终理解：所有操作都要通过Mcporter作为MCP协议调用

最佳实践

- ✅ 使用snapshot获取ref值
- ✅ 合理使用等待和超时处理
- ✅ 启用日志记录用于调试
- ✅ 批量操作使用循环

🚀 未来展望

Playwright MCP + Mcporter是一个强大的浏览器自动化解决方案，已经可以在OpenClaw中使用。通过正确的配置和使用方法，可以实现：

✅ 自动化网页浏览和数据抓取
✅ 表单自动填写和提交
✅ 测试脚本和回归测试
✅ 多标签页管理
✅ JavaScript执行和页面控制
✅ 完整的截图和报告生成

欢迎留言探讨！ 🎉

最后更新 : 2026-03-07
作者: 1G