简体中文

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-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 😎

资源

社区

致谢

我们要感谢以下项目：

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

License

Midscene.js 使用 MIT 许可协议。