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

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

Jerome Xiong
Jerome Xiong
 2026-07-01 17:002026-07-01 17:00创建  2.9k 字 10 分钟

浏览器自动化测试工具的选择直接影响测试开发效率和维护成本。本文对比四个主流方案，帮助团队根据自身场景做技术选型，重点介绍微软最新推出的 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，通过精确的选择器定位元素。

1// Playwright 风格 — 精确、可预测
2await page.goto('https://example.com/login');
3await page.locator('[data-testid="email-input"]').fill('admin@test.com');
4await page.locator('button:has-text("登录")').click();
5await 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 接口
1# 安装
2npm init playwright@latest
3
4# 运行
5npx playwright test
6
7# 查看报告
8npx 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 无法直接调用。过去的方案有：

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

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

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

核心优势

1# CLI 风格 — 轻量、高效、可复现
2playwright-cli open https://example.com
3playwright-cli type "admin@test.com"
4playwright-cli press Enter
5playwright-cli snapshot  # 获取 accessibility tree
6playwright-cli check e21
7playwright-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

1# 全局安装
2npm install -g @playwright/cli@latest
3
4# 验证
5playwright-cli --version

2. 安装 Skills（Claude Code 集成）

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

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

3. Agent 配置示例

1# Claude Code 中使用
2claude mcp add playwright npx @playwright/mcp@latest
3
4# 或直接让 Agent 调用 CLI
5# Agent 会自动读取 playwright-cli --help 了解可用命令

4. 可视化监控

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

Dashboard 提供两个视图：

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

完整命令集

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

Sessions 管理

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

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

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

核心优势

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

1// Midscene 风格 — 自然语言、自修复
2await page.ai('在邮箱输入框中输入 "admin@test.com"');
3await page.ai('点击登录按钮');
4const 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 效率更高）
  • 非技术人员也能编写测试的自然语言方式

配置示例

1# Hermes MCP 配置
2mcp_servers:
3  midscene-web:
4    command: npx
5    args: ['-y', '@midscene/web-bridge-mcp']
1# 环境变量
2MIDSCENE_MODEL_API_KEY=***
3MIDSCENE_MODEL_BASE_URL=https://api.deepseek.com
4MIDSCENE_MODEL_NAME=deepseek-v4-flash
5MIDSCENE_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# Hermes 添加 Playwright MCP
2hermes 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 集成场景

1# 查看配置好的 MCP 服务器
2hermes mcp list
3#   Name          Transport                         Tools    Status
4#   ───────────── ───────────────────────────────── ──────── ──────────
5#   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 个工具全集成，零配置启动

技术演进时间线

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

当前推荐

1              确定性优先                              Token 效率优先
2              ┌─────────────┐                        ┌─────────────┐
3              │ Playwright  │                        │  Midscene   │
4              │    Test     │                        │    .js      │
5              └──────┬──────┘                        └──────┬──────┘
6                     │  CI/CD 回归测试                       │ 原型验证/探索
7                     │                                       │
8         ┌───────────┴───────────┐              ┌───────────┴───────────┐
9         │  Playwright CLI       │              │  Playwright MCP       │
10         │  + Skills             │              │                       │
11         │  Coding Agent 首选    │              │  持续上下文 Agent     │
12         └───────────────────────┘              └───────────────────────┘

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

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

安装参考

1# ─── Playwright 传统方案 ───
2
3# 安装 Playwright Test 框架
4npm init playwright@latest
5
6# 查看版本
7npx playwright --version
8# Version 1.61.1
9
10
11# ─── Playwright CLI — AI Agent 首选方案 ───
12
13# 全局安装 CLI
14npm install -g @playwright/cli@latest
15
16# 安装 Skills（Claude Code 等 Agent 自动加载）
17playwright-cli install --skills
18
19# 验证
20playwright-cli --version
21# 0.1.14
22
23
24# ─── Playwright MCP — Hermes 集成方案 ───
25
26# 安装 MCP SDK（如未安装）
27pip install 'hermes-agent[mcp]'
28
29# 添加 Playwright MCP 到 Hermes
30hermes mcp add playwright --command npx --args "@playwright/mcp@latest"
31
32# 查看 MCP 配置
33hermes mcp list
34
35
36# ─── Claude Code 直接集成 ───
37
38# 方法一：MCP 集成
39claude mcp add playwright npx @playwright/mcp@latest
40
41# 方法二：Skills 驱动（推荐，Token 效率更高）
42# 安装 Skills 后，Claude Code 会自动加载 playwright-cli 技能
43# 直接在对话中说：Use playwright skills to test https://example.com
44
45
46# ─── Midscene 方案（可选） ───
47
48# Midscene 作为 Playwright 插件
49npm install -D @midscene/playwright
50
51# Midscene MCP 服务（Hermes 集成）
52hermes mcp add midscene-web \
53  --command npx \
54  --args="-y" \
55  --args="@midscene/web-bridge-mcp"

参考：Playwright 文档 · Playwright CLI · Playwright MCP · Midscene.js 文档 · Hermes Agent 文档

  • 标题: 浏览器自动化测试方案对比 — Midscene.js vs Playwright vs Playwright CLI vs agent-browser
  • 作者: Jerome Xiong
  • 创建于: 2026-07-01 17:00
  • 链接: https://jeromexiong.github.io/2026/07/01/AI模块/浏览器自动化测试方案对比-Midscene-vs-Playwright/
  • 版权声明:本文章采用 CC BY-NC-SA 4.0 进行许可。
 
评论
目录
浏览器自动化测试方案对比 — Midscene.js vs Playwright vs Playwright CLI vs agent-browser
  1. 方案概览
  2. 1. Playwright — 传统 E2E 的工业标准
    1. 核心优势
    2. 适用场景
    3. 痛点
  3. 2. Playwright CLI + Skills — AI Agent 时代的浏览器自动化
    1. 为什么需要 Playwright CLI？
    2. 核心优势
    3. 适用场景
    4. 🎯 安装配置
    5. 完整命令集
    6. Sessions 管理
  4. 3. Midscene.js — VLM 驱动的自然语言自动化
    1. 核心优势
    2. 适用场景
    3. 配置示例
    4. 痛点
  5. 4. Playwright MCP — Agent 的 MCP 集成方案
    1. MCP vs CLI 的取舍
    2. Hermes 集成 Playwright MCP
    3. Hermes MCP 集成场景
  6. 5. agent-browser — Hermes 内置浏览器工具
    1. 核心优势
    2. 适用场景
    3. 现状
  7. 对比总结
    1. 选型建议
    2. 技术演进时间线
    3. 当前推荐
  8. 安装参考
推荐阅读