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 的使用。

  1. 使用 JS 代码驱动任务编排,收集周杰伦演唱会信息,并写入 Google Docs(使用 UI-TARS 模型)
  1. 控制 Android 上的地图应用(使用 Qwen-2.5-VL 模型)
  1. 使用 midscene mcp 浏览页面 ( https://www.saucedemo.com/ ),执行登录、添加产品、下订单,最后基于 mcp 执行步骤和 playwright 示例生成测试用例

零代码快速体验

模型选择

Midscene.js 支持多模态 LLM 模型,如 gpt-4o,以及视觉语言模型,如 Qwen2.5-VLDoubao-1.5-thinking-vision-progemini-2.5-proUI-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 😎

资源

社区

致谢

我们要感谢以下项目:

  • Rsbuild 提供构建工具。
  • UI-TARS 提供开源智能体模型 UI-TARS。
  • Qwen2.5-VL 提供开源 VL 模型 Qwen2.5-VL。
  • scrcpyyume-chan 让我们能够用浏览器控制 Android 设备。
  • appium-adb 提供 adb 的 javascript 桥接。
  • YADB 提供 yadb 工具,提升文本输入性能。
  • Puppeteer 提供浏览器自动化和控制。
  • Playwright 提供浏览器自动化、控制和测试。

License

Midscene.js 使用 MIT 许可协议