UI自动化测试：开源Midscene.js的AI驱动解决方案

传统UI自动化测试的挑战
在软件开发中，UI自动化测试长期面临三大瓶颈：

1. 脚本脆弱性：依赖CSS选择器/XPath定位元素，页面结构调整易导致脚本失效；
2. 维护成本高：动态加载、多步骤验证等复杂交互需编写大量代码，调试耗时；
3. 扩展性局限：数据抓取、性能监控等场景实现困难，测试覆盖深度不足。

---

Midscene.js：字节跳动的AI自动化引擎

✨ 核心功能亮点

1. 自然语言编程
   ＞ 直接描述指令（如“点击登录按钮并输入用户名”），自动生成操作序列，零编码要求。
2. 智能数据提取
   ＞ 通过JSON结构描述（如{itemTitle: string, price: number}[]），从复杂页面提取结构化数据。
3. 即时操作API
   ＞ 提供aiTap()、aiInput()等原子操作接口，平衡效率与可靠性。
4. 可视化调试体系
   ＞ 动画回放测试过程，支持报告内直接修改提示词调试，无需重跑脚本。
5. 模型灵活适配
   ＞ 支持公有模型（GPT-4o）与私有化部署（Qwen-VL）
6. 企业级数据安全
   ＞ MIT协议开源，私有部署确保数据不出本地。

---

快速使用
如果你想快速体验 Midscene.js 的核心功能，安装 Chrome 扩展是个不错的选择。打开 Chrome 浏览器，进入 Chrome 网上应用店，搜索 “Midscene.js”，找到对应的扩展程序后，点击 “添加到 Chrome” 按钮，按照提示完成安装。
Midscene提供了四种方法：
交互（.ai, .aiAction）、提取（.aiQuery）、断言（.aiAssert）、点击(.tap)。

• 交互：用 .ai 方法描述步骤并执行交互。
• 提取：用 .aiQuery 从UI中“理解”并提取数据，返回值是JSON格式，你可以描述想要的数据结构。
• 断言：用 .aiAssert 来执行断言。
• 点击：用.aiTap点击按钮。
  

两种风格的自动化

自动规划

Midscene 会自动规划步骤并执行。它可能较慢，并且深度依赖于 AI 模型的质量。
await aiAction('click all the records one by one. If one record contains the text "completed", skip it');
工作流风格
将复杂逻辑拆分为多个步骤，以提高自动化代码的稳定性。
const recordList = await agent.aiQuery('string[], the record list')
for (const record of recordList) {
const hasCompleted = await agent.aiBoolean(check if the record contains the text "completed")
if (!hasCompleted) {
await agent.aiTap(record)
}
}

多种文件格式：YAML使用方式
Midscene 还提供了一种基于 .yaml 文件的自动化测试方法，这有助于你专注于脚本本身，任何团队内的成员都可以编写自动化脚本，例如创建test.yml。
target:
url: https://www.ebay.com

tasks:

• name: 搜索耳机
  flow:
  • ai: 在搜索框输入 "耳机" 并敲回车
  • sleep: 2000
  • aiQuery: '{itemTitle: string, price: Number}[], 提取前5个商品标题和价格'
  • aiAssert: "搜索结果页面包含‘耳机’关键词"

现存问题

调试和维护自动化脚本才是真正的痛点。无论模型多么强大，仍然需要调试过程以确保其保持长期稳定。
Midscene.js 提供了可视化报告、内置的 Playground 和 Chrome 插件，以调试整个运行过程。这是大多数开发者真正需要的特性，该产品也在持续努力改进调试体验。