浏览器自动化测试方案对比 — Midscene.js vs Playwright vs Playwright CLI vs agent-browser

浏览器自动化测试工具的选择直接影响测试开发效率和维护成本。本文对比四个主流方案，帮助团队根据自身场景做技术选型，重点介绍微软最新推出的 Playwright CLI + Skills 方案及其在 AI Agent 场景下的集成实践。

方案概览

维度	Playwright	Playwright CLI + Skills	Midscene.js	agent-browser
定位	传统 E2E 测试框架	AI Agent 时代的 CLI 浏览器自动化	VLM 驱动的自然语言自动化	Hermes 内置浏览器工具集
定位方式	CSS/XPath 选择器	Accessibility Snapshot + CLI 命令流	VLM 视觉识别	Playwright 底层 + AI 选择
执行引擎	自研浏览器协议	Playwright + Accessibility Tree	Playwright + VLM	Playwright 封装
AI 依赖	无（纯代码驱动）	无（Skill 驱动的 CLI 命令）	强依赖 VLM	中等（AI 辅助定位）
Token 消耗	—	⭐⭐⭐⭐⭐ 最低（纯 CLI 命令）	⭐⭐ 每步截图 + VLM 推理	⭐⭐⭐ 中等
稳定性	⭐⭐⭐⭐⭐ 确定性强	⭐⭐⭐⭐⭐ 确定性强	⭐⭐⭐⭐ 依赖模型质量	⭐⭐⭐ 介于两者之间
开发效率	⭐⭐⭐ 需写选择器	⭐⭐⭐⭐ CLI 命令流	⭐⭐⭐⭐⭐ 自然语言描述	⭐⭐⭐⭐ 半自动
维护成本	⭐⭐⭐ 元素变更需更新	⭐⭐⭐⭐ Skill 封装后低维护	⭐⭐⭐⭐⭐ AI 自适应	⭐⭐⭐⭐ 较低
调试体验	⭐⭐⭐⭐⭐ Trace Viewer	⭐⭐⭐⭐ 可视化 Dashboard	⭐⭐⭐ 黑盒调试	⭐⭐⭐ 有限调试
CI/CD 集成	✅ 原生支持	✅ 可用	✅ 可用	❌ 不适合
VS Code 集成	✅ Playwright Test for VSCode	❌ 无专用插件	❌ 无	❌ 无
Claude Code 集成	❌ 需自己写 MCP	✅ 原生 Skills 支持	✅ MCP 集成	❌
macOS 兼容	✅ 原生支持	✅ 原生支持	✅ 需 Chrome Extension bridge	✅ 原生支持

1. Playwright — 传统 E2E 的工业标准

核心优势

Playwright 是微软出品的浏览器自动化框架，不依赖 AI，通过精确的选择器定位元素。

// Playwright 风格 — 精确、可预测
await page.goto('https://example.com/login');
await page.locator('[data-testid="email-input"]').fill('admin@test.com');
await page.locator('button:has-text("登录")').click();
await expect(page.locator('.welcome')).toBeVisible();

Trace Viewer — 录制完整测试回放，每一步都能看到 DOM 快照、网络请求、控制台日志
Codegen — 录制操作自动生成代码
Auto-wait — 自动等待元素就绪，无需手动 sleep
多浏览器 — Chromium、Firefox、WebKit 一套 API
VS Code 插件 — 在编辑器内断点调试、查看 Trace

适用场景

UI 频繁变更的快速迭代项目（选择器稳固的情况）
需要精准定位的复杂交互（拖拽、iframe、文件上传）
CI/CD 中需要确定性的测试结果
团队有测试开发工程师角色

痛点

选择器脆弱 — 类名/结构一改，测试就挂
AI 生成代码时好时坏 — AI 生成的 Playwright 代码经常使用已弃用的 API
需要持续维护 — 元素变化必须同步更新测试代码
AI Agent 场景不友好 — 没有适合 LLM 调用的 CLI 接口

# 安装
npm init playwright@latest

# 运行
npx playwright test

# 查看报告
npx playwright show-report

2. Playwright CLI + Skills — AI Agent 时代的浏览器自动化

💡 提示：微软于 2026 年推出了 @playwright/cli，这是一套专为 Coding Agent（如 Claude Code、GitHub Copilot、Codex）设计的 CLI 工具，配合 Playwright Skills 能以最低 Token 成本实现浏览器自动化。

为什么需要 Playwright CLI？

传统的 Playwright 是一个 Node.js 库，没有 CLI 接口，AI Agent 无法直接调用。过去的方案有：

写 MCP Server — 暴露工具给 Agent，但每次调用都加载大段 Schema
Midscene MCP — 依赖 VLM，每步都截图 + 推理，Token 消耗大
自己封装脚本 — 维护成本高，不通用

Playwright CLI 的出现解决了这个问题：

确定性 ← ─ ─ ─ → Token 效率
      │
Playwright Test ──●── 高确定性，高 Token 消耗（完整框架）
      │
Playwright MCP ───●── 中等 Token 消耗（每次加载 Tool Schema）
      │
Playwright CLI ───●── 低 Token 消耗（纯 CLI 命令流）
      │
Midscene.js ──────●── 高灵活性，极高 Token 消耗

核心优势

# CLI 风格 — 轻量、高效、可复现
playwright-cli open https://example.com
playwright-cli type "admin@test.com"
playwright-cli press Enter
playwright-cli snapshot  # 获取 accessibility tree
playwright-cli check e21
playwright-cli screenshot

Token 效率最高 — 纯 CLI 命令流，不加载 MCP Tool Schema，不截图推理
Accessibility Snapshot — 基于 Playwright 的 Accessibility Tree，不依赖视觉模型
确定性操作 — 每一步都是精确的 Playwright 操作，无 AI 推理波动
内置技能系统 — 安装 Skills 后 Claude Code 等 Agent 可以直接调用
可视化 Dashboard — playwright-cli show 实时查看所有浏览器会话
会话管理 — 支持多个独立浏览器实例，Cookie/Storage 持久化

适用场景

Coding Agent 集成 — Claude Code、GitHub Copilot、Codex 等 Agent 浏览器操作
CI/CD 确定性测试 — 和 Playwright Test 一样稳定，但 Token 更低
高吞吐量自动化 — 需要平衡浏览器自动化和大量代码操作时
AI Agent 工作流 — 让 Agent 自主打开网页、填写表单、截图验证

🎯 安装配置

1. 安装 Playwright CLI

# 全局安装
npm install -g @playwright/cli@latest

# 验证
playwright-cli --version

2. 安装 Skills（Claude Code 集成）

1
2
3

# 安装 Playwright Skills 到 ~/.claude/skills/
playwright-cli install --skills
# ✅ Skills installed to `.claude/skills/playwright-cli`

安装完成后，Claude Code 等 Agent 会自动加载 Playwright Skills，可以直接在对话中使用 playwright-cli 命令操作浏览器。

3. Agent 配置示例

# Claude Code 中使用
claude mcp add playwright npx @playwright/mcp@latest

# 或直接让 Agent 调用 CLI
# Agent 会自动读取 playwright-cli --help 了解可用命令

4. 可视化监控

1 2	# 打开 Dashboard，实时查看所有会话 playwright-cli show

Dashboard 提供两个视图：

Session Grid — 所有活跃会话的实时预览，显示 URL、页面标题
Session Detail — 单个会话的实时画面，支持远程控制（导航、点击、键盘输入）

完整命令集

playwright-cli open [url]               # 打开浏览器
playwright-cli goto <url>               # 导航到 URL
playwright-cli snapshot                 # 获取页面 Accessibility Snapshot（获取元素 ref）
playwright-cli click <ref>              # 点击元素
playwright-cli type <text>              # 输入文本
playwright-cli fill <ref> <text>        # 填充输入框
playwright-cli press <key>              # 按键
playwright-cli screenshot               # 截图
playwright-cli eval <js>                # 执行 JavaScript
playwright-cli tab-list                 # 列出标签页
playwright-cli close                    # 关闭页面
playwright-cli show                     # 可视化 Dashboard

Sessions 管理

多个项目可以有不同的浏览器实例：

playwright-cli open https://playwright.dev
playwright-cli -s=todo-app open https://example.com --persistent
playwright-cli list                     # 列出所有会话
playwright-cli close-all                # 关闭所有浏览器

3. Midscene.js — VLM 驱动的自然语言自动化

核心优势

Midscene.js 使用 视觉语言模型（VLM） 分析截图来定位和操作 UI 元素，完全用自然语言描述操作目标。

// Midscene 风格 — 自然语言、自修复
await page.ai('在邮箱输入框中输入 "admin@test.com"');
await page.ai('点击登录按钮');
const text = await page.aiQuery('页面上的欢迎消息是什么？');

零选择器 — 不需要 CSS/XPath/TestID，VLM 视觉识别
自修复 — UI 重构后 VLM 仍能识别"登录按钮"在哪
GIF 录制 — 自动生成操作过程的 GIF，方便回溯
Playwright 集成 — 可作为 Playwright 的插件使用（@midscene/playwright）
独立 MCP 服务 — 通过 @midscene/web-bridge-mcp 供 AI Agent 调用

适用场景

快速原型验证和冒烟测试
UI 频繁改版、选择器难以维护的项目
AI Agent 自主浏览器操作（仍可用，但 Playwright CLI Token 效率更高）
非技术人员也能编写测试的自然语言方式

配置示例

# Hermes MCP 配置
mcp_servers:
  midscene-web:
    command: npx
    args: ['-y', '@midscene/web-bridge-mcp']

# 环境变量
MIDSCENE_MODEL_API_KEY=***
MIDSCENE_MODEL_BASE_URL=https://api.deepseek.com
MIDSCENE_MODEL_NAME=deepseek-v4-flash
MIDSCENE_MODEL_FAMILY=qwen2.5-vl

痛点

VLM 质量决定成败 — 模型识别不准时元素定位会漂移
速度较慢 — 每一步都要截图 + VLM 推理
Token 消耗大 — 每次操作都产生视觉推理成本
黑盒调试 — 无法像 Playwright Trace 一样查看 DOM 状态
确定性不足 — 同样的操作可能因为 VLM 推理波动得到不同结果

4. Playwright MCP — Agent 的 MCP 集成方案

Playwright MCP（@playwright/mcp）是微软同步推出的 MCP Server，将 Playwright 基于 Accessibility Tree 的能力封装为标准 MCP 工具，供任何 MCP 客户端调用。

⚠️ 注意：Playwright MCP 和 Playwright CLI 是互补关系。微软推荐 Coding Agent 优先使用 CLI + Skills（Token 效率更高），MCP 更适合需要持续浏览器上下文的深度推理场景。

MCP vs CLI 的取舍

维度	Playwright MCP	Playwright CLI + Skills
Token 成本	每次加载 Tool Schema	纯命令字符串，成本最低
持久状态	适合持续交互、迭代推理	每次调用都独立
适用 Agent	所有支持 MCP 的客户端	Claude Code、Copilot、Codex 等
使用模式	`browser_snapshot` → `browser_click`	`playwright-cli snapshot` → `playwright-cli click`
学习曲线	零（MCP 标准协议）	需了解 CLI 命令

Hermes 集成 Playwright MCP

Playwright MCP 可配置到 Hermes Agent 中，提供 23 个浏览器自动化工具：

1 2	# Hermes 添加 Playwright MCP hermes mcp add playwright --command npx --args "@playwright/mcp@latest"

配置完成后，开启新会话即可使用以下工具：

工具	说明
`browser_navigate`	导航到 URL
`browser_snapshot`	捕获页面 Accessibility Snapshot
`browser_click`	点击元素
`browser_type`	输入文本
`browser_take_screenshot`	截图
`browser_evaluate`	执行 JavaScript
`browser_network_requests`	获取网络请求
`browser_tabs`	标签页管理

Hermes MCP 集成场景

# 查看配置好的 MCP 服务器
hermes mcp list
#   Name          Transport                         Tools    Status
#   ───────────── ───────────────────────────────── ──────── ──────────
#   playwright    npx @playwright/mcp@latest        all      ✓ enabled

💡 提示：如果 Hermes 尚未安装 MCP SDK，需先安装：pip install 'hermes-agent[mcp]'

5. agent-browser — Hermes 内置浏览器工具

核心优势

agent-browser 是 Hermes Agent 早期内置的浏览器自动化工具集，基于 Playwright 封装 + AI 辅助选择器。

零配置 — Hermes 内置，无需额外安装
Playwright 底层 — 继承 Playwright 的稳定执行引擎
AI 辅助定位 — 结合 Playwright 的精确性和 AI 的灵活性

适用场景

Hermes 内置的轻量级浏览器操作
不需要额外 MCP 服务的基础场景

现状

随着 Playwright CLI、Playwright MCP 和 Midscene.js MCP 的成熟，agent-browser 已被标记为已废弃（Hermes 官方推荐迁移到 Midscene MCP 或 Playwright MCP）。

对比总结

选型建议

场景	推荐方案	理由
CI/CD 确定性回归测试	Playwright Test	选择器稳定，结果可重现，Trace Viewer 快速定位失败原因
Coding Agent 浏览器操作	Playwright CLI + Skills	Token 消耗最低，原生 Claude Code 集成
AI Agent 深度推理浏览	Playwright MCP	持续上下文、迭代推理、Persistent State
快速原型验证	Midscene.js	几行自然语言就能完成操作，零学习成本
复杂交互测试	Playwright Test	iframe、多标签页、网络拦截等需要精细控制
Hermes 内置操作	Playwright MCP（推荐）	23 个工具全集成，零配置启动

技术演进时间线

2021 ── Playwright 发布 → 传统 E2E 测试工业标准
2023 ── agent-browser → Hermes 内置浏览器工具（已废弃）
2024 ── Midscene.js → VLM 驱动的自然语言自动化
2026 ── @playwright/cli + @playwright/mcp → AI Agent 时代的浏览器自动化标准

当前推荐

     确定性优先                              Token 效率优先
     ┌─────────────┐                        ┌─────────────┐
     │ Playwright  │                        │  Midscene   │
     │    Test     │                        │    .js      │
     └──────┬──────┘                        └──────┬──────┘
            │  CI/CD 回归测试                       │ 原型验证/探索
            │                                       │
┌───────────┴───────────┐              ┌───────────┴───────────┐
│  Playwright CLI       │              │  Playwright MCP       │
│  + Skills             │              │                       │
│  Coding Agent 首选    │              │  持续上下文 Agent     │
└───────────────────────┘              └───────────────────────┘

对于 Coding Agent（Claude Code、Copilot、Codex）场景，推荐 Playwright CLI + Skills 为主，它在 Token 效率和确定性之间取得了最佳平衡：

# 一套配置，三端覆盖
npm install -g @playwright/cli@latest         # ① 安装 CLI
playwright-cli install --skills               # ② 安装 Claude Code Skills
hermes mcp add playwright --command npx \
  --args "@playwright/mcp@latest"             # ③ 可选：Hermes MCP 集成

安装参考

# ─── Playwright 传统方案 ───

# 安装 Playwright Test 框架
npm init playwright@latest

# 查看版本
npx playwright --version
# Version 1.61.1


# ─── Playwright CLI — AI Agent 首选方案 ───

# 全局安装 CLI
npm install -g @playwright/cli@latest

# 安装 Skills（Claude Code 等 Agent 自动加载）
playwright-cli install --skills

# 验证
playwright-cli --version
# 0.1.14


# ─── Playwright MCP — Hermes 集成方案 ───

# 安装 MCP SDK（如未安装）
pip install 'hermes-agent[mcp]'

# 添加 Playwright MCP 到 Hermes
hermes mcp add playwright --command npx --args "@playwright/mcp@latest"

# 查看 MCP 配置
hermes mcp list


# ─── Claude Code 直接集成 ───

# 方法一：MCP 集成
claude mcp add playwright npx @playwright/mcp@latest

# 方法二：Skills 驱动（推荐，Token 效率更高）
# 安装 Skills 后，Claude Code 会自动加载 playwright-cli 技能
# 直接在对话中说：Use playwright skills to test https://example.com


# ─── Midscene 方案（可选） ───

# Midscene 作为 Playwright 插件
npm install -D @midscene/playwright

# Midscene MCP 服务（Hermes 集成）
hermes mcp add midscene-web \
  --command npx \
  --args="-y" \
  --args="@midscene/web-bridge-mcp"