浏览器自动化测试工具的选择直接影响测试开发效率和维护成本。本文对比三个主流方案，帮助团队根据自身场景做技术选型。
方案概览
| 维度 |
Playwright |
Midscene.js |
agent-browser |
| 定位 |
传统 E2E 测试框架 |
VLM 驱动的自然语言自动化 |
Hermes 内置浏览器工具集 |
| 定位方式 |
CSS/XPath 选择器 |
VLM 视觉识别 |
Playwright 底层 + AI 选择 |
| 执行引擎 |
自研浏览器协议 |
Playwright + VLM |
Playwright 封装 |
| AI 依赖 |
无（纯代码驱动） |
强依赖 VLM |
中等（AI 辅助定位） |
| 稳定性 |
⭐⭐⭐⭐⭐ 确定性强 |
⭐⭐⭐⭐ 依赖模型质量 |
⭐⭐⭐ 介于两者之间 |
| 开发效率 |
⭐⭐⭐ 需写选择器 |
⭐⭐⭐⭐⭐ 自然语言描述 |
⭐⭐⭐⭐ 半自动 |
| 维护成本 |
⭐⭐⭐ 元素变更需更新 |
⭐⭐⭐⭐⭐ AI 自适应 |
⭐⭐⭐⭐ 较低 |
| 调试体验 |
⭐⭐⭐⭐⭐ Trace Viewer |
⭐⭐⭐ 黑盒调试 |
⭐⭐⭐ 有限调试 |
| VS Code 集成 |
✅ Playwright Test for VSCode |
❌ 无专用插件 |
❌ 无 |
| macOS 兼容 |
✅ 原生支持 |
✅ 需 Chrome Extension bridge |
✅ 原生支持 |
1. Playwright — 传统 E2E 的工业标准
核心优势
Playwright 是微软出品的浏览器自动化框架，不依赖 AI，通过精确的选择器定位元素。
1
2
3
4
5
|
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 生成提交信息时好时坏 — Copilot 生成的 Playwright 代码经常使用已弃用的 API
- 需要持续维护 — 元素变化必须同步更新测试代码
1
2
3
4
5
6
7
8
|
npm init playwright@latest
npx playwright test
npx playwright show-report
|
2. Midscene.js — VLM 驱动的自然语言自动化
核心优势
Midscene.js 使用 视觉语言模型（VLM） 分析截图来定位和操作 UI 元素，完全用自然语言描述操作目标。
1
2
3
4
|
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 自主浏览器操作（Hermes 默认方案）
- 非技术人员也能编写测试的自然语言方式
配置示例
1
2
3
4
5
|
mcp_servers:
midscene-web:
command: npx
args: ['-y', '@midscene/web-bridge-mcp']
|
1
2
3
4
5
|
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 推理
- 黑盒调试 — 无法像 Playwright Trace 一样查看 DOM 状态
- 确定性不足 — 同样的操作可能因为 VLM 推理波动得到不同结果
- DeepSeek 兼容模式 — 非原生 VLM 支持，需配置 MODEL_FAMILY 映射
3. agent-browser — Hermes 内置浏览器工具
核心优势
agent-browser 是 Hermes Agent 早期内置的浏览器自动化工具集，基于 Playwright 封装 + AI 辅助选择器。
- 零配置 — Hermes 内置，无需额外安装
- Playwright 底层 — 继承 Playwright 的稳定执行引擎
- AI 辅助定位 — 结合 Playwright 的精确性和 AI 的灵活性
适用场景
- Hermes 内置的轻量级浏览器操作
- 不需要额外 MCP 服务的基础场景
现状
随着 Midscene.js MCP 的成熟，agent-browser 已被标记为已废弃（Hermes 官方推荐迁移到 Midscene MCP）。
对比总结
选型建议
| 场景 |
推荐方案 |
理由 |
| CI/CD 确定性回归测试 |
Playwright |
选择器稳定，结果可重现，Trace Viewer 快速定位失败原因 |
| AI Agent 自主操作 |
Midscene MCP |
自然语言驱动，无需预写脚本，适应 UI 变化 |
| 快速原型验证 |
Midscene |
几行自然语言就能完成操作，零学习成本 |
| 复杂交互测试 |
Playwright |
iframe、多标签页、网络拦截等需要精细控制 |
| 混合模式 |
Playwright + Midscene 插件 |
@midscene/playwright 在 Playwright 中嵌入 AI 能力，兼顾精确和灵活 |
特性矩阵
1
2
3
4
5
6
7
8
| 确定性 ← ─ ─ ─ → 灵活性
│
Playwright ───────────●────────── 高确定性，低灵活性
│
agent-browser ────────●────────── 居中
│
Midscene.js ──────────●────────── 高灵活性，低确定性
│
|
当前推荐
对于 Hermes AI Agent 场景，推荐以 Midscene MCP 为主进行浏览器自动化操作；对于需要在 CI/CD 中运行可重现的 E2E 测试，推荐 Playwright 作为主力框架。两者并非互斥，互补使用效果最佳：
1
2
3
| 初稿验证 → Midscene 快速探索
回归测试 → Playwright 编写稳定用例
AI 操作 → Midscene MCP 自然语言驱动
|
安装参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
npm init playwright@latest
npx playwright --version
npm install -D @midscene/playwright
hermes mcp add midscene-web \
--command npx \
--args="-y" \
--args="@midscene/web-bridge-mcp"
|
参考：Playwright 文档 · Midscene.js 文档 · Hermes Agent 文档
微信
支付宝
