——AI驱动UI自动化工具Midscene.js的配置、执行与局限
用中文描述"点击价格最低的商品，加入购物车"，AI 真的自己去点了——这是我第一次体验自然语言驱动 UI 自动化时的感受。
一、背景：为什么想试试 Midscene？
我做 Web 自动化测试有一段时间了，日常写的是这样的代码：
// Playwright 传统方式：先定位，再操作
await page.locator('[data-test="inventory-item"]').first().click();
await page.locator('[data-test="add-to-cart"]').click();
await page.locator('[data-test="shopping-cart-link"]').click();
代码没问题，但维护起来很头疼：一旦前端改了 data-test 属性名，或者页面结构微调，定位器就失效，得手动排查修复。
最近听说字节跳动开源了 Midscene.js，核心思路是：你描述意图，AI 看懂屏幕截图并执行操作，不需要写任何定位器。正好 SauceDemo 的测试用例我已经做过两版，环境熟悉，就拿它来试试。
二、原理简介
Midscene 的核心工作流：
用户指令 → Midscene 截取页面截图 → 传给多模态模型 → 模型理解意图并返回操作坐标 → Midscene 执行点击/输入/提取
用户不需要写任何定位代码，只需要描述想做什么。从 Playground 的执行记录可以看到，Midscene 内部会拆解为 Plan（规划）→ Locate（定位）→ Tap/Type（执行） 的步骤链，每一步都有明确的状态标记。
三、配置过程（约 15 分钟）
注：本文所有操作在 SauceDemo 官方演示站（saucedemo.com） 完成，该网站专为自动化测试练习设计，测试数据稳定可复现。
Midscene 提供两种方式：
- Chrome 插件版：零代码，输入自然语言即可执行
- JavaScript SDK：写脚本集成到项目中
我选插件版快速上手，主要步骤如下：
| 步骤 | 操作 | 说明 |
|---|---|---|
| 1 | 申请 API Key | 阿里云百炼平台，选用 Qwen-VL 多模态模型（新用户有 100 万 Token 免费额度） |
| 2 | 安装插件 | Chrome 网上应用店搜索 "Midscene" 安装 |
| 3 | 配置模型 | 插件设置中填入 Base URL、API Key、Model Name |
| 4 | 开始体验 | 在 Playground 输入自然语言指令 |
💡 关键配置项：Midscene 依赖的是能看懂截图的多模态模型（如 Qwen-VL、GPT-4V），不是普通的文本模型。配置时务必确认模型支持视觉理解能力。
四、执行记录：三条指令，全程零代码
Midscene 内部的执行链路：Plan（规划）→ Locate（定位）→ Tap（执行），每条指令都会拆解为这样的步骤链，状态一目了然。
在 SauceDemo 商品列表页，我依次执行了三条指令：
指令 1：提取数据
输入：
提取所有商品名称和价格，以表格形式显示
执行过程： Plan → Locate 第一个商品卡片 → Tap → Plan 识别商品名称 → Locate "Sauce Labs Backpack" → Tap → 继续循环提取所有商品。
输出结果：
| 商品名称 | 价格 |
|---|---|
| Sauce Labs Backpack | $29.99 |
| Sauce Labs Bike Light | $9.99 |
| Sauce Labs Bolt T-Shirt | $15.99 |
| Sauce Labs Fleece Jacket | $49.99 |
| Sauce Labs Onesie | $7.99 |
| Test.allTheThings() T-Shirt (Red) | $15.99 |
上图：Midscene将指令拆解为Plan → Locate → Tap的步骤链，依次提取了6个商品的数据。
✅ 成功，AI 准确识别了页面上的 6 个商品，价格无误。
指令 2：智能决策 + 操作
输入：
点击价格最低的商品，加入购物车
执行过程： Plan "点击价格最低的商品" → Locate 价格为 $19.90 的商品 → Tap → Plan "点击'加入购物车'按钮" → Locate "加入购物车"按钮 → Tap。
输出结果：
上图：AI自动比较价格后，识别出$19.90的Onesie并执行加购操作。
✅ 成功。AI 自动比较了 6 个商品的价格，识别出 $19.90 的 Sauce Labs Onesie 是最低价，点击了该商品的"Add to cart"按钮。
对比传统 Playwright 代码：
// 传统方式：需要手动提取价格、排序、再定位点击
const items = await page.locator('[data-test="inventory-item"]').all();
let cheapest = null;
let minPrice = Infinity;
for (const item of items) {
const priceText = await item.locator('[data-test="inventory-item-price"]').textContent();
const price = parseFloat(priceText.replace('$', ''));
if (price < minPrice) {
minPrice = price;
cheapest = item;
}
}
await cheapest.locator('button:has-text("Add to cart")').click();
Midscene 方式只需要一句话：
点击价格最低的商品，加入购物车
差距非常明显——自然语言本身就是文档，可读性和维护成本不在一个量级。
指令 3：导航验证
输入：
点击购物车图标，查看购物车内容
执行过程： Plan "点击右上角的购物车图标" → Locate "右上角购物车图标" → Tap。
输出结果：
上图：AI识别购物车图标并完成点击，页面跳转至购物车页面
✅ 成功。AI 识别出右上角的购物车图标并点击，页面跳转到购物车后，正确列出了已添加的商品。
五、深度对比：传统定位 vs 自然语言驱动
| 对比项 | Playwright 传统定位 | Midscene 自然语言 |
|---|---|---|
| 编写方式 | 需要精确的 CSS/XPath 定位器 | 用自然语言描述意图 |
| 代码可读性 | 依赖变量命名和注释 | 指令本身就是文档 |
| 执行速度 | 毫秒级（直接操作 DOM） | 秒级（截图 + 模型推理） |
| 元素变更影响 | 定位器失效需手动修复 | AI 重新识别，可自动适配 |
| 稳定性 | 高（定位器固定） | 中（依赖模型识别准确率） |
| 使用成本 | 免费 | 按 Token 计费（截图 + 推理） |
| 失败排查 | 报错信息明确（元素未找到） | 需查看 AI 推理过程，排查稍复杂 |
| 上手门槛 | 需掌握定位器语法 | 会用中文/英文描述即可 |
| 适用场景 | 正式回归测试、CI 流水线 | 快速原型验证、探索性测试 |
六、适用场景判断
| 场景 | 推荐工具 | 理由 |
|---|---|---|
| 回归测试套件 | Playwright | 稳定、快速、可控，适合频繁执行 |
| 快速原型验证 | Midscene | 不需要写定位代码，分钟级上手 |
| 探索性测试 | Midscene | 随时用自然语言尝试不同操作路径 |
| CI 持续集成 | Playwright | 环境可控，执行稳定，无额外 API 成本 |
| 数据抓取/提取 | Midscene | aiQuery 提取结构化数据非常方便 |
| 自动化脚本开发 | 两者结合 | Playwright 负责稳定部分，Midscene 处理动态变化多的区域 |
七、踩坑与局限性：它不是银弹
经过实际体验，Midscene 确实降低了脚本编写门槛，但也有几个需要注意的点：
1. 执行速度是短板
每次指令都需要截图 → 传给模型推理 → 返回操作坐标 → 执行点击。在 SauceDemo 这种简单页面上，单条指令大约需要 3-5 秒，而 Playwright 是毫秒级。如果指令链很长，总耗时会明显增加。
2. 成本需要关注
虽然新用户有 100 万 Token 免费额度，但截图占用的 Token 不少。粗略估算，一次完整的页面截图 + 推理可能消耗几千到上万 Token。高频使用时需要评估成本。
3. 复杂交互支持有限
目前对下拉框、日期选择器、iframe 内元素、文件上传等复杂交互的支持还不够完善。如果页面有大量这类组件，Midscene 可能会识别失败。
4. 失败排查不够直观
当 AI 识别错误时，你需要查看它的"思考过程"（Midscene 会展示模型推理的中间结果），来判断是描述歧义还是模型理解偏差。这比 Playwright 的 TimeoutError: locator not found 要难定位一些。
5. 模型能力决定上限
如果页面文字模糊、UI 风格特殊、或者使用了大量图标而无文字说明，模型的识别准确率会下降。多模态模型的能力边界，就是 Midscene 的能力边界。
八、我学到的
本文基于 Midscene.js v1.10.12（2026 年 8 月）体验撰写。
-
自然语言驱动是 UI 自动化的一个重要方向，但它不是银弹。它降低了脚本编写门槛，适合快速验证和探索性测试，但尚不能完全替代精准定位。
-
AI 定位与精准定位可以互补：复杂的、频繁变化的 UI 用 AI 自适应，核心流程用 Playwright 精准定位保证稳定性。
-
配置模型是关键：多模态模型（能看懂截图的那种）是 Midscene 工作的基础，API Key 和模型选择直接影响识别效果。
九、下一步计划
- 在掘金和 GitHub 同步发布本文，完成 AI 测试工具链的公开记录
- 用 Midscene SDK 编写可复用脚本，探索与 Playwright 混用的最佳实践
- 在 OpenCart 等不同结构的网站上测试 Midscene 的识别能力
如果你也在探索 AI 测试工具，欢迎在评论区聊聊：
- 你更看好精准定位还是 AI 自然语言驱动？
- 你在实际项目中遇到过哪些"定位器地狱"？
我会持续更新 Midscene SDK 版本的实践，点个关注不迷路 👀
