Midscene.js - 视觉驱动的 UI 测试与自动化

Midscene 是一个用于视觉驱动 UI 测试与自动化的开源 SDK。你用自然语言描述每一步,Midscene 会驱动多模态模型为你规划并操作界面。它覆盖 Web、移动端、桌面端,甚至 <canvas> 场景。

准备动手?

前往 快速开始,几分钟内跑通你的第一个自动化;或者通过 Chrome 插件 零代码体验。

为什么选择 Midscene

大多数 UI 自动化都依赖页面结构,包括读取 DOM 或无障碍树的 AI 工具。页面结构既脆弱又不完整:选择器一重构就失效;缺少语义化标注的元素,如纯图标按钮、自定义渲染的控件和 <canvas>,对它们是“看不见”的;原生应用和跨域 iframe 也难以触达;页面结构还无法判断界面实际看起来是否正确。

Midscene 走了一条不同的路:它仅凭截图、借助多模态模型工作,你只需像真人测试那样用自然语言描述每一步。这会改变 UI 测试的体验:

  • 不再因每次重构而失效。 标记或样式变化时无需再追着改选择器,用例的维护成本大幅下降。
  • 触达每个元素、每种界面。 只要人眼能看到,Midscene 就能定位。没有语义化标注的元素、<canvas>、原生应用,以及基于结构的工具够不到的跨域 iframe,都可以处理。
  • 校验用户真正看到的效果。 验证视觉结果,包括颜色、高亮、布局和渲染状态,而不只是判断某个节点是否存在于 DOM 中。
  • 两种测试方式。 把 Midscene 接入你现有的 Playwright 或 Vitest 测试,或让 AI Agent 通过 SkillsMCP 自主测试你的应用。
  • 可读的失败信息。 每次运行都会生成可逐步回放的可视化报告。

Midscene 首先为 UI 测试而生,但同一套视觉驱动引擎也能胜任任意 UI 自动化任务。你可以按自己的工作流使用它。

能自动化什么

只要能截图,Midscene 就能工作。Web 浏览器、Android、iOS、HarmonyOS、桌面应用,以及任意自定义界面,全部通过同一套 API。每个平台在侧边栏都有各自的上手指南。

你可以用 JavaScript SDK 或 YAML 编写自动化,并在 API 参考 中查阅 aiActaiQueryaiAssert 等所有方法。

两种自动化风格

自动规划

AI 自主规划并执行流程,完成任务。

await aiAct('逐一点击所有记录。如果某个记录包含文本"completed",则跳过它');

工作流风格

将复杂逻辑拆分为多个步骤,以提高自动化代码的稳定性。

const recordList = await agent.aiQuery('string[], the record list')
for (const record of recordList) {
  const hasCompleted = await agent.aiBoolean(`check if the record ${record}" contains the text "completed"`)
  if (!hasCompleted) {
    await agent.aiTap(record)
  }
}

关于工作流风格的更多内容,请参阅 使用 JavaScript 优化 AI 自动化代码

多模态模型驱动

Midscene 支持众多具备极强 UI 定位能力的常用多模态模型。你可以选用最容易获取的模型,也可以选择可自托管的开源模型:Qwen3.xDoubao-Seed-2.0GLM-4.6Vgemini-3.5-flashUI-TARS

查看 模型策略 选择合适的模型。

案例展示

在 Web 浏览器中自主注册 GitHub 表单,并通过所有字段校验:

更多 iOS、Android、桌面端与 MCP 的实战案例,见 案例展示

资源与社区

致谢

Midscene 构建于众多优秀的开源项目之上,包括 UI-TARS、Qwen、Playwright、Puppeteer、scrcpy、appium、WebDriverAgent、YADB 和 libnut-core。完整列表请见 README

License

Midscene.js 使用 MIT 许可协议