【大厂开源】一款AI 驱动的 UI 自动化框架，别错过！

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

说起UI自动化测试框架，大家脑海中最先想到的是Playwright、Cypress等这样成熟的产品，但是要将自动化脚本做到稳定并且持续维护的团队却是屈指可数的，因为经常会面临选择器繁琐复杂、与 HTML 结构的耦合度高，以及界面难以进行断言等问题。

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

阅读本文你将收获：

1.Midscene.js是什么；

2.Midscene.js的核心优势；

3.Midscene.js的技术原理；

4.Midscene.js的案例解析；

5.Midscene.js的资源汇总；

Midscene.js是什么

Midscene.js 是一款基于AI技术的自动化 SDK，旨在简化UI自动化测试流程。它通过大型语言模型（LLM）解析用户的自然语言指令，执行相应的操作，如输入文本、点击按钮等。

Midscene.js 支持动作执行、数据查询和页面断言，并提供可视化报告，帮助用户轻松调试和优化测试流程。

Midscene.js 是一个开源项目，用户可以在自己的环境中运行，确保数据安全。它支持与 YAML 脚本、Puppeteer 和 Playwright 等工具集成，适用于多种自动化测试场景。

Midscene.js的核心优势

1. 三种核心方法

Midscene.js提供了三种关键方法，分别是交互（.ai, .aiAction）、提取（.aiQuery）和断言（.aiAssert）。

• 交互：使用.ai或.aiAction方法描述测试步骤并执行交互。例如，你可以告诉Midscene.js“点击按钮”、“输入文本”等。

• 提取：使用.aiQuery方法从UI中“理解”并提取数据。Midscene.js会返回一个JSON格式的数据结构，你可以根据需要描述想要的数据格式。

• 断言：使用.aiAssert方法执行断言，验证UI的状态是否符合预期。

举例：

// 👀 输入关键字，执行搜索
// 尽管这是一个英文页面，你也可以用中文指令控制它
await ai('在搜索框输入 "Headphones" ，敲回车');

// 👀 找到列表里耳机相关的信息
const items = await aiQuery(
  '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
);

console.log("headphones in stock", items);

2. Javascript 或 Yaml ，多种集成形式

如果你想要测试 Midscene 的核心能力，我们推荐从浏览器插件（https://midscenejs.com/zh/quick-experience.html）开始快速体验。

插件里可以用自然语言与任意网页联动，调用交互、提取、断言三种接口，无需搭建代码项目。

此外，还有几种形式将 Midscene 集成到代码：

• 使用 YAML 格式的自动化脚本，如果你更喜欢写 YAML 文件而不是代码；

• 使用 Chrome 插件的桥接模式，用它来通过脚本控制桌面 Chrome；

• 集成到 Puppeteer；

• 集成到 Playwright；

3. 可视化报告与调试Playground

运行结束后，Midscene.js会提供一个可视化报告和调试Playground。你可以非常方便地调试提示和AI的响应，查看所有的中间数据，如查询（Query）、计划（Planning）和动作（Actions）。

此外，报告中还集成了一个Playground，你可以在报告中重新运行Prompt并调试，进一步提升测试的效率和准确性。

4.直连模型端，保障数据安全

Midscene.js是一个采用MIT许可证的开源项目，项目代码运行在用户的自有环境中。所有从页面收集的数据会依照用户的配置，直接传送到OpenAI或指定的自定义模型。

因此，数据仅用户和指定的模型服务商可访问，任何第三方平台均无法获取这些数据。这一设计不仅保障了数据的安全性，还降低了对第三方服务的依赖。

Midscene.js的技术原理

• 自然语言处理（NLP）：接收用户的自然语言输入，基于 NLP 技术解析指令。

• 界面理解：模型分析网页内容，理解用户描述的界面元素和动作。

• 执行动作：根据理解的结果，模型将执行相应的浏览器自动化操作，如模拟用户输入、点击等。

• 数据提取：模型根据用户的查询请求，从网页中提取特定格式的数据。

• 断言验证：模型检查页面状态是否符合用户的断言条件。

Midscene.js的实战案例

下面案例是网友亲自实践总结，展示了Midscene.js在UI自动化测试中的应用，希望对大家有所帮助。

1. 测试目标

假设我们有一个简单的登录页面，需要测试以下功能：

输入正确的用户名和密码后，能够成功登录。

输入错误的用户名或密码后，会提示错误信息。

2. 测试步骤

• 打开登录页面：使用Midscene.js的浏览器插件或代码集成方式打开登录页面。

• 输入用户名和密码：使用.aiAction方法输入正确的用户名和密码。

• 检查登录结果：使用.aiQuery方法提取登录后的页面数据，并使用.aiAssert方法验证是否成功登录。

• 输入错误的用户名或密码：重复上述步骤，但输入错误的用户名或密码，并验证是否提示错误信息。

3. 示例代码

以下是一个集成到Playwright的示例代码：

import { expect }from"@playwright/test";
import{ test }from"./fixture";

test.beforeEach(async({ page })=>{
  page.setViewportSize({width:400,height:905});
  await page.goto("https://www.ebay.com");
  await page.waitForLoadState("networkidle");
});

test("search headphone on ebay",async({ ai, aiQuery, aiAssert })=>{
  // 👀 输入关键字，执行搜索
  // 注：尽管这是一个英文页面，你也可以用中文指令控制它
  await ai('在搜索框输入 "Headphones" ，敲回车');

  // 👀 找到列表里耳机相关的信息
  const items =awaitaiQuery(
    '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
  );

4. 可视化报告与调试

运行测试后，Midscene.js会生成一个可视化报告和调试Playground。你可以通过报告查看测试的详细步骤和结果，包括每个步骤的查询（Query）、计划（Planning）和动作（Actions）。如果测试失败，你可以在Playground中重新运行Prompt并调试，以便快速定位问题并修复。

Midscene.js的资源汇总

项目官网：

https://midscenejs.com/

GitHub 仓库：

https://github.com/web-infra-dev/midscene

快速体验 Chrome 扩展：

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

API 参考文档：

https://midscenejs.com/api.html

YAML 脚本自动化：

https://midscenejs.com/automate-with-scripts-in-yaml.html

Puppeteer 集成：

https://midscenejs.com/integrate-with-puppeteer.html

Playwright 集成：

https://midscenejs.com/integrate-with-playwright.html

自定义模型和提供者：

https://midscenejs.com/model-provider.html

好了，今天的分享就到这里了，如果你也对AI技术感兴趣，不妨去试试吧！

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】