Midscene.js - AI 驱动,带来愉悦的 UI 自动化体验
开源的 AI 操作助手,适用于 Web、移动端、自动化和测试
功能特性
用自然语言编写自动化脚本
- 描述你的目标和步骤,Midscene 会为你规划和操作用户界面。
- 使用 Javascript SDK 或 YAML 格式编写自动化脚本。
网页或移动应用
工具
- 用于调试的可视化报告: 通过我们的测试报告和 Playground,你可以轻松理解、回放和调试整个过程。
- 使用缓存,提高执行效率: 使用缓存能力重放脚本,提高执行效率。
- MCP: 允许其他 MCP Client 直接使用 Midscene 的能力。
三种 API 类型
- 交互 API: 与用户界面交互。
- 数据提取 API: 从用户界面和 DOM 中提取数据。
- 实用 API: 实用函数,如
aiAssert()
(断言), aiLocate()
(定位), aiWaitFor()
(等待)。
演示案例
我们准备了一些演示案例供你学习 Midscene.js 的使用。
- 使用 JS 代码驱动任务编排,收集周杰伦演唱会信息,并写入 Google Docs(使用 UI-TARS 模型)
- 控制 Android 上的地图应用(使用 Qwen-2.5-VL 模型)
- 使用 midscene mcp 浏览页面 ( https://www.saucedemo.com/ ),执行登录、添加产品、下订单,最后基于 mcp 执行步骤和 playwright 示例生成测试用例
零代码快速体验
模型选择
Midscene.js 支持多模态 LLM 模型,如 gpt-4o
,以及视觉语言模型,如 Qwen2.5-VL
、Doubao-1.5-thinking-vision-pro
、gemini-2.5-pro
和 UI-TARS
。
推荐使用视觉语言模型进行 UI 自动化。
了解更多关于选择 AI 模型
两种自动化风格
自动规划
Midscene 将自动规划步骤并执行。这可能会比较慢,并且严重依赖 AI 模型的质量。
await aiAction('逐一点击所有记录。如果某个记录包含文本"completed",则跳过它');
工作流风格
将复杂逻辑拆分为多个步骤,以提高自动化代码的稳定性。
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)
}
}
有关工作流风格的更多详细信息,请参阅 Blog - 使用 JavaScript 优化 AI 自动化代码
与其他工具比较
-
调试体验: 你很快就会发现,调试和维护自动化脚本才是真正的痛点。无论模型多么强大,你仍然需要调试过程以确保其保持长期稳定。Midscene.js 提供了可视化报告、内置的 Playground 和 Chrome 插件,以调试整个运行过程。这是大多数开发者真正需要的特性,我们也在持续努力改进调试体验。
-
开源、免费、部署灵活: Midscene.js 是一个开源项目。它与云服务和模型提供商解耦,你可以选择公共或私有部署。总会有一个适合你的方案。
-
与 Javascript 集成: 你可以永远相信 Javascript 😎
资源
社区
致谢
我们要感谢以下项目:
License
Midscene.js 使用 MIT 许可协议。