Midscene 负责"看得懂"，Playwright 负责"跑得快"。但问智能 UI 把两者 fused 在一起，让 Agent 既能像人一样看界面，又能像机器一样精确操作。

一、两个框架，一个痛点

UI 自动化测试领域有两个明星项目：

● Midscene.js（字节跳动 web-infra-dev）：纯视觉驱动，用 VLM（视觉语言模型）截图理解界面，自然语言即可操作。Canvas、WebGL、动态组件全搞定。

● Playwright（微软官方）：纯 DOM 驱动，ariaSnapshot + ref 定位，5ms 完成一次点击，命令体系成熟，session 管理强大。

但问题是——它们各自有硬伤：

结论：单独用任何一个，都可能是"瘸腿走路"。

二、但问智能 UI平台：不是二选一，而是"双引擎 Fusion"

我们的核心设计哲学：让 DOM 引擎和视觉引擎互为备份，智能路由自动选择最优策略。

这就是"1+1 > 2"的化学反应：

● 快的时候比 Midscene 快 100 倍：登录表单用 Playwright DOM，5ms 完成

● 稳的时候比 Playwright 稳 100 倍：DOM 改了没关系，Midscene 视觉 AI 照样能找到按钮

● 成本可控：目标 DOM 使用率 > 80%，只在必要时才调用昂贵的视觉模型

三、双引擎架构深度解析

3.1 架构全景图

3.2 DOM 引擎：Playwright 的基因

但问智能 UI 的 DOM 层直接继承自 Playwright 的设计精髓：

 从 Playwright "吸收"的能力：

3.3 视觉引擎：Midscene 的"眼睛"

当 DOM 引擎"失明"时，Midscene 视觉引擎接管：

Midscene 提供的核心视觉能力：

● mcp_ai_act：自然语言操作（“点击右上角的用户头像”）

● mcp_ai_assert：视觉断言（“页面显示订单提交成功”）

● mcp_ai_query：结构化数据提取（“提取购物车所有商品名称和价格”）

● mcp_ai_wait_for：等待视觉条件（“等待加载动画消失”）

● mcp_ai_scroll：智能滚动（“滚动到页面底部”）

● mcp_screenshot：截图分析

关键优势：这些操作完全基于截图 + VLM 推理，不依赖任何 HTML 结构。Canvas 图表、WebGL 游戏、Shadow DOM、跨域 iframe——全部可见即可操作。

四、为什么"双引擎"是企业级落地关键？

场景 1：前端重构后的回归测试

背景：某电商网站前端从 Vue 2 升级到 Vue 3，大量 className 变更。

纯 Playwright 方案：

● 300 条用例中 180 条因为 selector 失效而失败

● QA 团队花 3 天逐个修复定位符

● 维护成本爆炸

纯 Midscene 方案：

● 视觉 AI 能找得到按钮，但每个操作要 500ms-3s

● 全量回归测试从 10 分钟变成 2 小时

● API Token 成本高昂

但问智能 UI 双引擎方案：

● Smart 工具先尝试 DOM（5ms）

● DOM 失效时自动 fallback 到 Vision AI

● 80% 的操作用 DOM，20% 用 Vision

● 测试时间从 2 小时压缩到 15 分钟

● 用例零维护（自动自愈）

场景 2：Canvas 数据可视化验证

背景：金融数据平台的核心页面是一个复杂的 ECharts 图表。

纯 Playwright 方案：

● Canvas 内部元素无法通过 DOM 定位

● 只能截屏后人工对比，无法自动化断言

但问智能 UI 方案：

● mcp_ai_assert("图表显示2025年Q1营收同比增长15%")

● VLM 理解截图内容，自动判断图表趋势

● 全程自动化，无需人工介入

场景 3：跨端一致性测试

背景：同一套 UI 在 Web、iOS、Android 三端部署。

传统方案：

● Web 用 Playwright，移动端用 Appium，Desktop 用 PyAutoGUI

● 三套脚本、三套维护成本

但问智能 UI + Midscene 方案：

● Midscene 支持 Web / Android / iOS / Desktop 全平台

● 同一套自然语言用例可以跑在所有平台

● skills/android-automation、skills/ios-automation 自动加载

五、52 个工具全景图

选择我们，不负所托