网站导航
> 技术文档 > Midscene.js：AI 驱动的 UI 自动化框架_midsence

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

网友: 技术文档 2025-07-30 13:38:20

前言

Midscene.js 是一个开源的、由 AI 驱动的 UI 自动化工具，旨在通过大模型的应用降低自动化脚本编写成本，提高 UI 自动化的速度和准确性。

正文从这开始～～

Midscene.js 是由字节跳动 Web Infra 团队全新开源的 UI 自动化工具。通过引入多模态 AI 推理能力，Midscene.js 将帮助开发者搭建更易编写、更好维护的 UI 自动化脚本。

图片

起源：多模态 AI 带来的想象力

随着多模态 AI 的不断演进，大模型逐渐具备了内容提取与理解的能力。

经过一系列评估后，我们发现，使用通用 AI 大模型来执行 UI 自动化是一条完全可行的路径。在 AI 驱动下，UI 自动化用例会变得显著直观起来，同时也能规避传统方案中对页面结构、各类选择器的依赖，大幅提升用例的可维护性。

图片

AI 驱动的界面理解与信息提取 Reference: The Dawn of LMMs: Preliminary Explorations with GPT-4V (ision)

从 Chrome 插件开始体验

在动手搭建 UI 自动化项目前，不妨先从 Midscene.js 的 Chrome 浏览器插件版本开始体验。体验过程无需编写任何代码。

举个例子，当你想测试 Midscene 在购物网站中的表现，你需要的步骤是：

  • 安装 Midscene 插件，配置 AI 服务的 key

  • 打开需要测试的购物网站

  • 在插件中输入交互指令，点击 “Run” ，稍等片刻，就能看到执行结果与回放动画

图片

点击右下角的 Report File ，你可以得到一个完整的过程回放文件，帮助你理解 AI 运行过程中的所有步骤与思考。在后续正式使用时，你也可以拿到同样的报告内容。

图片

切换到 Query 面板，你可以从界面中提取 JSON 信息。描述想要提取的界面内容、格式，点击 Run，即可拿到对应的 JSON 返回：

图片

Assert 面板提供了断言能力：

图片

详细的插件安装和配置流程文档可以见此链接：https://midscenejs.com/zh/quick-experience.html

三大关键接口

从上述浏览器插件体验过程中，你已经学会了 Midscene 的几个关键接口能力：

  • .ai .aiAction 方法描述步骤，并执行交互

  • .aiQuery 从 UI 中理解并提取数据，返回值是 JSON 格式，你可以描述任何想要的数据结构

  • .aiAssert 执行断言

在 AI 的帮助下，这些接口维护都已经变得无比直观。

详细的 API 讲解文档：https://midscenejs.com/zh/api.html

集成到代码：Javascript 或 Yaml ，多种形式

在浏览器插件体验完成之后，你可能已经想动手搭建自己的测试项目了。

这里介绍几种集成形式，可以按需选用。

使用 Yaml 脚本

使用 Yaml 脚本的好处在于易读，且不必搭建庞大的测试工程。适用于简单的巡检、验证场景。
脚本样例：

图片

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

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

图片

文档：使用 Yaml 格式描述操作流程 https://midscenejs.com/zh/automate-with-scripts-in-yaml.html

使用 JS 代码集成到 Playwright 或 Puppeteer

Midscene 提供了 JS SDK，便于你将它的能力集成到现有的 Puppeteer 或 Playwright 脚本中。
案例：

图片

文档：

  • 集成到 Puppeteer：https://midscenejs.com/zh/integrate-with-puppeteer.html、

  • 集成到 Playwright：https://midscenejs.com/zh/integrate-with-playwright.html

桥接模式（Bridge Mode）

使用桥接模式，你可以用本地脚本控制桌面版本的 Chrome，复用 Cookie、登录态、前置界面状态等 ，即刻开启自动化，而不用操心环境搭建。

图片

文档：使用 Chrome 的桥接模式：https://midscenejs.com/zh/bridge-mode-by-chrome-extension.html

样例项目

在这个仓库里，你可以看到一些样例项目：https://github.com/web-infra-dev/midscene-example

限制与不足

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

  • 调用大模型服务的推理比较耗时，实时调试时体验尚不够理想

  • 交互类型有限：目前仅支持点击、输入、键盘和滚动操作。

  • 需要准确提供操作指令：即使是 GPT-4o 也无法确保 100% 返回正确答案。开发者需要遵循 编写提示词的技巧 帮助提高 SDK 稳定性，一个典型的技巧是 “提供更详细的描述并提供样例”，而不是一句话粗略讲解。

模型安全和费用

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

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

图片

测算时间是 2024 年 11 月

除了默认的 gpt-4o ，Midscene.js 已知支持的多模态模型还包括：

  • claude-3-opus-20240229,

  • gemini-1.5-pro

  • qwen-vl-max-latest（千问）

  • doubao-vision-pro-32k（豆包）

具体适配方法可以见文档：https://midscenejs.com/zh/model-provider.html

对 UI 自动化的观察

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

  • 因担心可维护性问题，许多开发者并未长期坚持编写自动化脚本。随着大模型的出现，这种状况必将开始改变。

  • 随着用例编写成本降低，会有更多的开发人员愿意参与用例编写工作，开发人员的职责边界会得以拓宽。

  • 在 UI 识别领域，一些开源模型也已经达到相当不错的水准。在未来的迭代中，我们将持续更新对这些模型的支持，从而进一步提升 UI 自动化的速度和准确性。

网络标签：

相关问题