Midscene.js：AI 在前端测试领域的应用

Midscene.js 是由字节跳动 Web Infra 团队全新开源的 UI 自动化工具。通过引入多模态 AI 推理能力，Midscene.js 将帮助开发者打破传统 UI 自动化难于编写和维护的困境。本文由字节跳动 Web Infra Al 负责人茅晓锋于阿里巴巴第十九届 D2 终端技术大会演讲实录整理而成。

• 项目网站：https://midscenejs.com/
• 开源仓库：https://github.com/web-infra-dev/midscene

一、起源：AI 大模型与 UI 自动化

1.1 AI x UI 自动化的典型 Demo

首先，我们通过一个 Demo 展示AI操作的UI自动化这个概念。在这个过程中，你能够观察到AI是如何一步一步思考的。它首先完成深入的分析，然后开始在界面上执行操作。接着，AI将一个一个地筛选界面中的元素。例如，它会决定复制哪个字段，并识别出哪些字段位于左侧，以及它们在右侧表单中的对应位置。所有步骤完整无误后，整个流程就此完成。
https://www.bilibili.com/video/BV1gXXPYBECP/?aid=114192694643...

视频摘录 - Claude Computer-use

在演示中，我们看到人工智能能够高效地控制计算机操作。国际上，许多知名厂商正在开发相关产品，大家熟悉的如 Computer Use 以及不久前 OpenAI 发布的 Operator，还有最近备受关注的 Manus。这些产品展现了人工智能在计算机操作中的广泛应用。如今，人工智能似乎已成为每个工具中不可或缺的特性。

1.2 大模型与 UI 自动化

在当前的技术领域中，有许多模型致力于识别用户界面（UI）上的元素，帮助用户清晰地识别哪些元素是可交互的以及它们的功能特性。

例如，苹果公司的 Ferret UI 和微软近期发布的 OminParser V2 版本，这些都是大模型产品，以提高用户界面的交互性和可操作性。此外，在 SDK 产品方面，我们开发了 Midscene.js，而在开源社区中，Browser Use 相当活跃。这些都是类型丰富的 SDK 产品。例如，字节跳动公司推出的 UI-TARS，是一个开源模型，用来支持图形用户界面（GUI）代理的开发，它能够在执行自动规划，以及将一些工作流程有效落地方面提供帮助。

产品形态多种多样，有的表现为技术论文，有的是模型，还有 SDK，既有商业化的产品，也有开源的和闭源的项目，以及收费与免费的选择。总体而言，这一领域的产品和技术非常丰富且活跃，为用户提供了广泛多样的选择。

• 厂商范围大：OpenAI, Microsoft, Anthoropic...
• 产品领域广：论文、模型、SDK、应用产品...
• 落地路径丰富：开源、商业化、App、SaaS、云...

1.3 Web 自动化向 AI 转型

我们自然会想，既然用户界面（UI）自动化看似已经相当成熟，那么我们是否可以将其切实应用到我们的日常工作中呢？尤其是，Web 界面的 UI 能否实现自动化？答案是肯定的。在这方面，我们进行了深入的推演。首先，我们需要了解传统的 Web UI 自动化存在哪些问题。传统的 Web UI 自动化主要依赖于 Selector API，即大家熟悉的 ID 选择器、类选择器和 Xpath 等。这些是传统 Web 自动化的核心方法。而对于那些熟悉 Web UI 自动化的同事来说，其中最大的挑战在于测试代码和业务代码的深度耦合。这种耦合性会在系统维护中带来很大困扰。尤其是，当业务代码经历重构后，自动化用例可能就无法正常执行了。

这就讨论到一个非常有意思的话题：测试的存在主要是为了保障重构后的质量。然而，在界面重构之后测试偏偏可能无法正常运行，这显然是一个不合理的情况。更值得注意的问题是，许多开发人员对测试并不熟悉，因为他们认为测试的投资回报率（ROI）太低，所以缺乏书写测试用例的动力。但事实上，测试在软件开发领域中占据着非常大的市场份额，因为每一个软件都需要进行测试。那么，在这种情况下，我们该如何解决这些问题呢？我们进行了一些推演，在 AI 驱动下，UI 自动化测试将会发生一些变化。首先，我们可以基于整个界面进行理解。我们的测试用例更应该以自然语言进行表述，这是一个更为合理的方法，这也是 AI 时代的常用交互。其次，这种方法使测试与我们的业务代码解耦。我编写的是自然语言指令，是在对界面的理解基础上进行操作，这样就与代码完全解耦了。由此，测试的可维护性自然得到了提升。一旦这些问题得到了解决，我们的研发体验必定会得到一个划时代的提升，因此，这个推演是非常顺其自然的发展趋势。

我们需要更加具体、务实地探讨一下，在完成 AI 转型之后，UI 自动化具体会是什么样子。这可能是大家比较关注的一个方面。在这里，我准备了四个视频给大家分享。我们使用了一个名为 Shadcn 的 Vercel 组件库，这是个比较网红的组件库。
https://www.bilibili.com/video/BV1gXXPYBEBq/?aid=114192694643...
Shadcn / Data Table
https://www.bilibili.com/video/BV14nXPY8ENu/?aid=114192711419...
Shadcn / Data Picker
https://www.bilibili.com/video/BV1xnXPY8Eqy/?aid=114192711421...
Shadcn / Drawer
https://www.bilibili.com/video/BV1xnXPY8EDd/?aid=114192711420...
Shadcn / Dropdown

我们在很多中后台的测试场景中，需要对一些复杂的表单控件进行精确控制，例如日历、弹出窗口和数据表格等。在这些需要复杂操作的场景中，如果我们使用 AI 进行驱动，就可以实现类似于今天我们在屏幕上看到的视频效果。在操作中，例如可以选择一个特定的日期并完成表单处理，这就是实现自动化的一个具体应用。从实际效果来看，我们基本上已经能够达到预期的演示效果。我很高兴地告诉大家，刚才展示的几个演示实际上都是利用 Midscene.js 来实现的。这是我们已经开源的一个 SDK，它的主要作用就是在 AI 驱动下实现 UI 自动化。

二、Midscene.js : AI 驱动的 UI 自动化

2.1 三个核心接口

接下来，我将为大家详细介绍我们 SDK 的一些具体内容。

首先，我会从它的三个接口开始介绍。在这一年的时间里，我们只写了三个核心接口。

核心接口（1/3）——执行交互 Action

第一个接口是 Action，是执行交互。在下面的 Demo 视频中：我们要求在搜索引擎中输入关键词“AI 101”，然后点击搜索并稍作等待，并点击第三条搜索结果。我们通过浏览器的插件发送这个指令，AI 将按照步骤逐一执行，首先将内容输入到搜索框中，然后调用相关模型，思考下一步的操作。在进入下一个界面后，AI 会点击页面中的搜索结果，这样操作就完成了。

输入完整的提示词：“输入 AI 101，点击搜索，等待，点击第三条结果”。其中提到“输入什么”、“点击什么”、“等待再点击什么”。这种模式我们称之为“步骤驱动”，即你需要一步一步地指导 AI 完成任务。
https://www.bilibili.com/video/BV14nXPY8EPf/?aid=114192711419...

接下来，我想介绍另一种方法，叫做“目标驱动”，这是一个更高阶、更接近 AI 自主操作的模式。例如，现在我们要求 AI 打开 Twitter 并发布一条信息，内容是“this is the Tweet from Midscene.js”。AI 首先在当前的 Google 界面中找到 Twitter 的位置，然后将 Twitter 打开。一旦进入 Twitter，AI 就知道如何发布推文，会自动将内容输入到顶部的输入框中，最后点击“发布”。这样，信息就成功发布了。这整个交互过程被称为“目标驱动”，与刚才提到的“步骤驱动”有本质的区别。相信通过这个例子，大家能够清楚地看到，这条推文已经成功发布了。以上是我们所讨论的第一个交互接口。

目标驱动示例提示词：Open twitter and post a tweet, "this is a tweet from Midscene.js"
https://www.bilibili.com/video/BV14nXPY8Eae/?aid=114192711418...

核心接口（2/3）——数据提取 Query

第二个接口是数据提取接口。在这个过程中，我们通过 AI 来帮助理解用户的操作界面。当获取到界面后，再将需要理解的内容以 JSON 形式返回给使用者。举个例子，比如在一个搜索结果页面上，我们告诉 AI 我们需要几条搜索结果的标题，那么在界面的最右边，你会看到这些标题已经以 JSON 的格式返回给我们了。这正是 AI 赋予我们的能力。有同学可能会问，如果我们的需求是不断变化的，这个格式应该如何定义呢？AI 到底以什么样的形式返回数据给我们呢？这个问题实际上体现了 AI 强大的理解能力。格式也是可以在你的指令里定义的。当前最右边的这个格式实际上是通过我们的指令生成的。例如，我们需要一个对象，数组对象里有一个键叫 title，那么只需要在指令里写明这些要求，AI 就会按照指令将所有的数据返回给你。对于我们的工程师来说，当你获得 JSON 数据后，接下来的工作就会顺畅许多。这就是数据提取接口的核心功能。

• 举例：搜索结果列表，{title: string}[]

核心接口（3/3）——断言 Assert

第三个接口是断言，断言在测试中是一个非常常见的场景。我要知道当前页面的表现是否符合我的需求。比如说，在搜索结果页中，我们告诉 AI 这是 Midscene.js 的 Github 主页。然后 AI 进行断言，结果是 false。AI 理解到这只是一个搜索结果页，而不是 Github，因此断言未通过。这种结果在测试中是非常实用的。我们在核心的时间里经过一年努力，开发了三大 AI 接口：一个是 action，一个是 query，一个是 assert。基本上，核心场景已经全部能够覆盖。

理解界面，执行断言。举例：这是 Midscene.js 的 Github 页面

我们应该从哪里开始体验呢？我想介绍我们的浏览器插件，你可以在 Chrome 的扩展商店中找到。利用这个插件，你可以在任何网站上运行 Midscene。

Midscene.js 浏览器插件

https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief

举个例子，如果你有一个中后台页面，或者你在自己公司内部的业务中有什么特殊需求，你可能会担心 Midscene.js 是否能够正常运行。在这种情况下，你只需通过浏览器插件，无需编写任何代码，就可以通过写指令来运行这些交互。这样，你可以先实际体验这个 SDK，看看它是否能够满足你的需求。这是一种非常方便的体验方式。这个插件目前的用户数接近 1 万，非常受欢迎。

2.2 Javascript SDK

我们还提供了 Javascript SDK。Midscene.js SDK 可以与 Puppeteer 和 Playwright 相结合，运行前面提到的接口。屏幕上展示了我们的 SDK 样例代码，接口的输入参数都是自然语言。你可以通过 agent.aiAction 来指示具体操作。同样地，对于 Query，也只需要将你的需求以自然语言形式传入，整个 Javascript 代码便能与页面中的内容进行交互。当代码数量增加时，我们发现，vscode 屏幕上显示的几乎都是中文，这应该是 AI 时代的一种特色吧。

2.3 Yaml 格式自动化脚本

我们还有一种格式叫做 Yaml 格式自动化脚本。我们可以使用 Yaml 来定义流程，并对其进行编排，就像将 CI 流程进行定义和编排一样。通过这种方式，整个过程会显得更加清晰。此外，我们还可以通过命令行来驱动它。比如，对于一些代码库的编译需求，编译完成后，你可能想运行代码进行查看，确认是否出现白屏，或者检查某个按钮是否出现，点击按钮后是否会弹出框。这类简单需求无需搭建 Playwright 工程或测试工程，只需编写一个 Yaml 文件，然后运行一条命令，将其放入 CI 系统中即可完成整个任务。这是一个非常实用的场景。另一个实用场景是，通过 JavaScript 驱动 Yaml。我们知道在场的许多同学可能是工具类、平台类的开发者。当你需要与用户交互时，使用一个 Yaml 文件交流是最低成本的，整个流程也更容易控制。总之，Yaml 格式的自动化脚本是一种维护起来相对简单的形式。

还有这份测试报告，在报告中可以看到整个运行过程的回放，展示 AI 是如何一步步完成任务的，帮助你调试整个运行流程。在最后的环节中，我们也会对此进行详细讲解。

2.4 更多特性

另外，还有一些小特性值得关注。其中一个叫做 aiWaitFor，从字面上理解就是让 AI 帮你进行等待操作，比如等待界面加载完成或者等到某个元素出现。此外，还有桥接模式，帮助大家使用桌面 Chrome 进行交互处理，比如处理登录验证码时，使用桥接模式是最方便的。我们还支持 Langsmith 。如果你需要调试 Midscene.js 和模型之间的信息，使用某些 Langsmith 插件会非常方便。

最后，让我们总结一下我们产品的一些信息。我们的官网是 midscenejs.com。如果你想开始体验，我们建议从浏览器插件入手。接下来，可能需要准备一些 AI 的基础设施，例如开通一些 AI 的服务。对于数据安全问题，可以咨询公司的数据安全同事。然后，你可以开始编写脚本。当脚本一切就绪后，连接核心流程和 CI 巡检。一旦这些流程顺利运行，你就应该能够对整个体系有一个完整的了解。

三、原理与模型

3.1 模型的关键特性

下面让我具体谈谈在这方面的一些原理和模型的话题。我们把 AI 操作界面这件事情拆分开来看，其实话题并没有那么复杂。就像把大象放进冰箱一样简单。第一步需要具备 OCR 的能力，即理解界面。接着，需要有控件定位的能力，也就是找到需要操作的元素。还有一种能力叫做交互理解，指的是了解如何与这个元素进行交互，知道你的动作是拖动、点击还是滑动。最后一部分是步骤规划的能力。

在当前阶段，Midscene.js 并不提供自有的模型，我们使用的是业界较为易得的一些模型。我们的定位更像是一个工程产品，而工程产品最核心要关注的是控件定位和交互理解这两个方面。我们会首先致力于以最佳形式完成这两部分的完整交互流程。

3.2 核心流程

首先，我会向大家展示一下这个过程中最核心的流程。第一步是规划，也就是 Planning。当用户向你提供了一项自然语言的 AI 任务时，我们需要首先给出一个结论，即第一步的动作应该做什么。接下来的两步是定位和交互。在规划之后，我们需要人工智能告诉我们该如何进行。例如，如果今天我们要定位一个表单的提交按钮，那么这个提交按钮究竟在哪里？人工智能会为我们提供一个精确的定位。之后，通过一些工程代码，我们会执行这个定位后的整个交互过程。

这样，我们就实现了一个最基本的驱动。如果是一些具有目标驱动能力的模型，我们还会将所有反思需要的信息输入，把规划和反思联动起来。如果操作没有完成，我们会回到起点，再次进行规划和反思，使这个循环完整运行，整个 AI 驱动的流程就完成了。刚才提到过，我们实际上有一个测试报告。在这个报告的左上角，我们会向大家展示每一次运行时具体发生的过程，包括规划、定位和交互是如何进行的，所有这些信息都会被详细记录和展现，包括每一步的细节以及 AI 的具体规划内容。

这个报告有两个优点。首先，它看起来非常炫酷，能够展示我们所应用的技术。其次，更重要的是，它为调试提供了便利。因为在很多情况下，AI 可能会出现一些幻觉或者不稳定的表现，这个报告能够帮助大家理解和感受这种情况。通过与 AI 的不断交互，我们可以将原本不稳定的功能调整得更加稳定，这也是我们提供这个报告的一个关键能力。

3.3 Midscene.js 支持的三大模型

接下来，我将分享 Midscene.js 支持的三大 AI 模型。在之前提到过，Midscene.js 目前并不提供模型。我们现在支持的三大模型在业界中都是相对普遍可获取的。

GPT-4o

第一个模型是大家比较熟悉的 GPT-4o，这是 OpenAI 的一个闭源模型。在使用 GPT-4o 的时候，我们建议采用步骤驱动的方式。这意味着要一步一步地指明我要查找的点，以及下一步需要做什么。通过这种步骤驱动的方式，通常可以获得最佳效果。GPT-4o 的整体表现比较均衡。为了更好地利用该模型，我们目前是将截图和 DOM 一起发送过去。熟悉 AI 的朋友可能已经了解到这样做时会遇到一个显著的问题，那就是费用较高，因为一起发送数据会导致 token 数量增多，推理速度也会受到影响。因此，大家需要根据自身的实际情况来选择。如果希望尝试，完全可以，只是需要注意费用较高。

另一个问题是关于分辨率的限制。在 GPT-4o 的官方文档中提到，其分辨率最高只能支持到 2000*768。这对某些 PC 页面来说会产生影响，尤其是在识别小图标方面可能会遇到一些问题。然而，值得注意的是，这种情况是许多当前模型的共同特征。

Qwen-2.5-VL（千问）

第二个我们目前支持的模型是阿里的千问 Qwen-2.5-VL，这是阿里巴巴推出的一个开源模型。这个模型的使用方式与 GPT-4o 有些相似，我们希望用户能够使用较为详细的提示词来驱动它，而不仅仅是目标导向。这个模型的交互表现基本上与 GPT-4o 相当，甚至有时候表现得更为出色。此外，由于它是一个原生的图像模型，在推理速度和费用消耗方面都表现得非常出色。不过，在断言能力上可能会稍有欠缺，使用时如果需要关注细节，可能会有所体会。

UI-TARS

最后一个模型是开源的，叫做 UI-TARS，是字节跳动发布的一个专为 UI 自动化而训练的模型。这个模型在整个行业中的评分非常出色。前面提到了一个完全由 AI 自主规划的 Twitter 发布演示，就是基于 UI-TARS 实现的。该模型具备一定的自主规划和自主纠错能力。不过，UI-TARS 也有一些限制，就是它没有商业化部署的版本。像 GPT 可以在许多云平台上使用，而千问则可以在阿里巴巴的阿里云上购买。相比之下，UI-TARS 需要你自行寻找资源进行部署。它的计费方式与通常的模型不同，常见模型通常采用按量付费的方式，以 token 计费，而 UI-TARS 则需要为显卡的租用支付费用，这可能是一个需要面对的问题。这是我们当前主流推荐的三大模型之一。如果大家希望使用其他模型，我们也有一种 GPT-4o 兼容模式，可以通过我们的配置进行运行。

这是我们的三大模型，这时就出现选择哪种大模型的问题。我们的建议是，选择你最容易达到的那个模型开始，先入门，然后再考虑优化的事情。比如，在阿里云上开通一个千问是目前最简单的事情，那么就从千问开始。等全部流程调通后，自然会知道哪里有问题。不要纠结于选择模型，先把基本的流程跑通是最重要的。

四、实践与展望

接下来讲一些实践展望部分的事情，这里有我们的血泪史，也有我们的困境。

4.1 模型的创意发挥与稳定性的冲突

首先，我们面临的挑战之一是模型的创意发挥和稳定性。我们的模型往往过于倾向于进行自主思考。我们曾经发现一些极端的案例，例如，当你让某些模型填入用户名和密码后，它会自动帮你完成提交。这种行为是模型在训练过程中形成的一些固定模式所致。在特定情况下，如对外展示演示时，这种创意发挥可能显得很智能，具有一定优势。然而，开发者真正需要的并不是这种不确定性和过度智能化，他们更看重的是稳定性。他们希望每一次执行的结果都是一致的。因此，目前我们提供给大家的方案更加务实，尤其是在控制 UI 自动化时。你需要在提示词上遵循一些技巧，比如撰写更详尽的提示词、用举例来引导模型，从而使其表现更加稳定。表面上看来，你似乎是多写了几个字，但实际上，这可能为你节省了数小时的调试时间。这就是提示词技巧的重要性。

《编写提示词（指令）的技巧》

https://midscenejs.com/zh/prompting-tips.html

4.2 模型的不可能三角

第二个问题，也是当前业界面临的一个重要话题，就是关于模型的选择。这其中涉及到一个所谓的“不可能三角”。不可能三角指的是存在三个特性，你每次只能选择其中的两个，而无法同时兼顾所有三者。这三个特性分别是：成本低、速度快和效果好。在我们所支持的所有模型中，永远只能选择其中的两个特性。如果你想要速度快且效果好，那么最好是进行私有化部署一个超大的模型。如果不太注重效果，也可以选择一个更小的模型进行部署，但这会影响其稳定性。在未来选择 Midscene.js 模型时，如果如果发现某些需求不能完全满足，不必过于纠结，因为这是该行业目前普遍存在的困境。通常，大多数业务会在速度方面做出妥协，倾向于使用公用模型，这可能导致每次请求的时间在大约 4 秒左右。他们在速度上稍微让步，而在其他方面则能满足需求。这就是模型选择中所谓的不可能三角问题。

4.3 展望 AI x UI 自动化

接下来我将为大家展望一下 UI 自动化领域的发展趋势。首先，最重要的一点是，未来将以 AI 驱动为主导。在我们的项目推进过程中，这一结论变得越来越明确。虽然目前还有一些极端情况尚未完全解决，但未来的方向一定是以 AI 作为核心推动力，这一发展是必然的。其次，我们发现，很多开发者对安全可控的解决方案有着迫切的需求。由于大量系统依然运行在各个公司的内网中，或涉及一些数据机密，开发者可能需要依赖开源的 SDK 和开源模型来支撑整个系统，以确保商业运作的安全性和可控性。此外，系统的运行速度需求也越来越高。人们对更快运行速度的追求是理所当然的，这一需求在未来必将得到满足。

还有两个话题需要讨论。首先是智能规划。尽管今天许多模型在智能规划上倾向于自主发挥，因此我们强调要循序渐进，但我们仍然对未来抱有期待，认为某天它有可能会实现。最后一个话题是跨端支持，桌面、Web 以及移动端的支持理应被自然地实现。尽管我们在这里称之为“展望”，但大家今天可以看到整个业界的状况，每个厂商都在各个层次推出这些产品，参与者众多。我们判断，到 2025 年可能有 60%到 70%甚至更高比例的用户将会完成这一转变。UI 自动化将在未来成为整个行业的一种基础能力，整个行业将在其基础上开发更高级的产品，比如 Midscene.js 就在朝着那个方向前进。

UI 自动化这个领域即将蓬勃发展。我们欢迎所有对此感兴趣的朋友将自己的业务在测试方向上向 UI 自动化迁移，去亲身体验和感受在这个 AI 时代下 UI 自动化到底会带来什么样的变化。

下方公众号是字节的 ByteDance Web Infra 团队的微信公众号，我们会发布技术分享、产品更新、招聘等信息。感兴趣的同学可以关注一下。谢谢大家！

相关链接

  项目网站：https://midscenejs.com/

  开源仓库：  https://github.com/web-infra-dev/midscene