Midscene.js - AI 驱动的 UI 自动化框架

Web 界面的 UI 自动化一直以来都是一个微妙的存在。尽管业界中已有如 Playwright、Cypress 等成熟的产品，能够将自动化脚本做到稳定并且持续进行维护的团队却屈指可数。主要原因在于选择器的复杂性、与 HTML 结构的耦合度高，以及界面难以进行断言等老生常谈的问题。

Midscene.js 是由字节跳动 Web Infra 团队全新开源的 UI 自动化工具。通过引入多模态 AI 推理能力，Midscene.js 将帮助开发者打破传统 UI 自动化难于编写和维护的困境。

JavaScript「红宝书」第5版强势来袭！

起源：多模态 AI 带来的可能性

随着多模态 AI 的不断演进，这类模型逐渐具备了内容提取与理解的能力。而这些能力恰好可以满足自动化测试的需求。

界面理解与信息提取：

Reference: The Dawn of LMMs: Preliminary Explorations with GPT-4V(ision)

论文链接: https://arxiv.org/abs/2309.17421

经过一系列评估后，我们发现，使用通用大模型来理解 UI 界面和执行自动化测试，是一条完全可行的路径。虽然大模型可能会出现幻觉，并且对坐标数值理解不佳，但这些问题可以通过一定的工程手段进行优化和规避，从而使得运行效果更为可靠。

使用 Midscene.js 编写 UI 自动化的体验

使用 Micscene 编写 UI 自动化的过程中，依赖三个关键方法：交互（ .ai , .aiAction ）, 提取 ( .aiQuery ), 断言 ( .aiAssert )。

具体来讲：

• 用 .ai 方法描述步骤，并执行交互
• 用 .aiQuery 从 UI 中理解并提取数据，返回值是 JSON 格式，你可以描述任何想要的数据结构
• 用 .aiAssert 执行断言

我们来看一个测试 Todo App （待办任务列表）的简单案例：

test("ai todo - Chinese Prompt - should fail", async ({
  ai,
  aiQuery,
  aiAssert,
}) => {
  await ai("在任务框 input 输入 今天学习 JS，按回车键");
  await ai("在任务框 input 输入 明天学习 Rust，按回车键");
  await ai("在任务框 input 输入后天学习 AI，按回车键");
  await ai("将鼠标移动到任务列表中的第二项，点击第二项任务右边的删除按钮");
  await ai("点击第二条任务左边的勾选按钮");
  await ai("点击任务列表下面的 completed 状态按钮");

  // 提取任意格式的数据
  const list = await aiQuery("string[], 完整的任务列表");
  expect(list.length).toEqual(1);

  await aiAssert('页面底部显示有 "1 item left"');
});

运行上述用例后，Midscene.js 将提供完整的操作回放，用以帮助开发者诊断用例运行过程：

如果想要调整指令（Prompt），可以使用 Playground 环境多次重跑：

Javascript 或 Yaml ，多种集成形式

Midscene.js 支持使用 Javascript 代码 集成到 Puppeteer 、集成到 Playwright。同时也支持使用 Yaml 格式描述操作流程。

利用 Yaml 脚本，你可以极大程度地简化测试工程的搭建工作，甚至几乎达到零代码！对于简单的站点走查和编译产物巡检场景尤为实用。

以下是一个 Yaml 格式脚本的实战用例：

# 在 Ebay 网站搜索 headphone，提取 JSON 格式的结果数据，并断言

target:
  url: https://www.ebay.com
  output: ./output/ebay-headphones.json

tasks:
  - name: search headphones
    flow:
      - aiAction: type 'Headphones' in search box, hit Enter
      - aiWaitFor: there is at least one headphone item on page
        timeout: 10000

  - name: extract headphones info
    flow:
      - aiQuery: >
          {name: string, price: number, actionBtnName: string}[], return item name, price and the action button name on the lower right corner of each item (like 'Remove')
        name: headphones

  - name: assert shopping cart icon
    flow:
      - aiAssert: There is a shopping cart icon on the top right

相信这份 Yaml 文件本身已经清晰描述了操作过程，我们已无需展开讲解。

在配置环境变量之后，驱动它运行也只需一条命令：

midscene ./bing-search.yaml

从 Chrome 插件开始体验

为了方便开发者评估 Midscene.js 在实际站点中的表现，我们上架了它的 Chrome 浏览器插件版本。你可以在任意站点集成并充分体验 Midscene 的核心能力，而不需要编写任何代码。

安装和配置流程可以见这个文档：

https://midscenejs.com/zh/quick-experience.html

限制与不足

目前 Midscene.js 在功能上存在着一些限制：

1. 调用大模型服务的推理比较耗时，实时调试时体验尚不够理想
2. 交互类型有限：目前仅支持点击、输入、键盘和滚动操作。
3. 需要准确提供操作指令：即使是 GPT-4o 也无法确保 100% 返回正确答案。开发者需要遵循 编写提示词的技巧 帮助提高 SDK 稳定性，一个典型的技巧是“提供更详细的描述并提供样例”，而不是一句话粗略讲解。

数据安全和费用

Midscene.js 默认使用 GPT-4o 作为推理模型，但项目本身与大语言模型（LLM）服务商并不耦合。你可以在脚本中自行配置符合业务规范的 AI 服务商与模型，以将页面信息发送至相应的服务。在这个过程中，没有任何第三方会获得你的页面内容。

针对 Midscene.js 样例项目，这里是运行时的费用消耗数据（gpt-4o-08-06 模型，且未启用 prompting caching ）：