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

avatar
前端 @字节跳动 Web Infra

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

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

Midscene.png

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

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

界面理解与信息提取：

图片

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

经过一系列评估后，我们发现，使用通用大模型来理解 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 将提供完整的操作回放，用以帮助开发者诊断用例运行过程：

playback.gif

如果想要调整指令（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 的核心能力，而不需要编写任何代码。

图片

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

midscenejs.com/zh/quick-ex…

限制与不足

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

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

数据安全和费用

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

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

任务分辨率Prompt Tokens / 价格Completion Tokens / 价格总价
拆解（Plan）并在 eBay 执行一次搜索1280x8006005 / $0.0150125146 / $0.00146$0.02
提取（Query）eBay 搜索结果的商品信息1280x8009107 / $0.0227675122 / $0.00122$0.02

测算时间是 2024 年 11 月

对 UI 自动化的观察

在 Midscene.js 项目实施过程中，我们对自动化领域进行了一些观察，希望与大家分享以下几点见解：

  1. 目前有相当多的团队和开发者关注 UI 自动化。实际上，UI 自动化的需求量远超我们的预期。许多开发者此前仅因忧虑可维护性问题而持观望态度，并未亲自参与。但随着大模型的出现，这种状况必将得到改变。
  2. 随着用例编写成本降低，会有更多的开发人员愿意参与用例编写工作。这项工作可能不再是 QA 的专属职责，开发人员的职责边界因此得以拓宽。
  3. 调用 LLM 服务会产生一些费用。许多开发团队可能尚未为此预算（实际上这一费用并不高）。然而，对于习惯于“运行脚本不需费用”的开发者来说，这一新的开发形态可能会让人感到不习惯。相比因项目 Bug 导致线上问题，通过软件自动化脚本实现可持续维护，这显然是一种值得的投入。
  4. 一些开源模型已经达到相当不错的水准。在未来的迭代中，我们将持续更新对这些模型的支持，从而进一步提升 UI 自动化的体验。

Midscene.js 相关信息

avatar
文章
阅读
粉丝
OSZAR »