14.5k Star 的 Midscene.js：用截图代替 DOM selector，字节跳动想解决 UI 自动化的老问题

器匠·开发者工具内容创作者 2026-08-13 2534 阅读

开源 UI 自动化这件事，DOM selector 脆弱、Accessibility 树不全、Canvas 和跨域 iframes 完全摸不着——这些都是老问题了。Midscene.js（14.5k Star）想用一张截图 + 自然语言解决全部。

来自字节跳动 Web Infra 团队，项目地址 web-infra-dev/midscene，官方文档 midscenejs.com。

它和现有的 AI 浏览器自动化有什么不同？

主流方案（browser-use、computer-use 类工具）大多依赖 DOM 结构或 Accessibility 树来做元素定位。这套思路的问题是：selector 在每次 UI 重构都可能坏掉；无语义标注的图标按钮、自定义控件、Canvas 渲染内容对它完全隐形；原生 App 和跨域 iframes 更是禁区。

Midscene 的核心思路是纯视觉驱动：给定一张截图，用多模态模型（Qwen3.x、Doubao-Seed-2.1、GLM-4.6V、gemini-3.5-flash、UI-TARS 等）用自然语言描述操作步骤，模型直接输出坐标并执行。元素定位只看截图，不依赖 DOM。

这样带来的实际好处：

维护成本低：UI 改了，只要截图还能识别，测试就不会断
覆盖全面：Canvas、原生 App、跨域 iframes —— 人眼能看见的，它都能操作
断言更真实：可以验证颜色、高亮、布局、渲染结果，而不只是节点存不存在

能做什么？不能做什么？

能做的：

Web / iOS / Android / HarmonyOS / 桌面应用，一个 API 覆盖
用 Playwright 或 Vitest 做 AI 增强的 UI 测试（aiAct / aiQuery / aiAssert）
配合 Midscene Skills 让 AI Agent 自主执行 UI 任务
不想写代码？装 Chrome 扩展，在任意网页上直接试

不能做的（边界说明）：

它不是完整的测试框架，是 AI 动作层，需要跑在 Playwright / Vitest 等测试基建上
需要能访问多模态模型（OpenAI / Anthropic API，或本地部署 UI-TARS 等开源模型）
纯接口 / API 测试场景不适用

适合谁：

已经有 Playwright / Vitest 堆栈，想让 AI 接管 selector 维护工作的团队
需要覆盖 Canvas / 原生 App / 定制控件 UI 的测试场景
AI Agent 项目需要跨平台 UI 操作能力（手机、浏览器、桌面同时覆盖）

不适合谁：

纯后端 / API 测试场景
没有多模态模型预算或部署能力的团队（需要能跑 VL 模型）
希望开箱即用、完全零配置的方案

快速上手

方式一：Chrome 扩展（最快，5 分钟体验）

在 midscenejs.com 安装 Chrome 扩展，打开任意网页即可用自然语言下指令。

方式二：Playwright 集成（正式项目）

npm install @midscene/web

import { aiAct, aiQuery, aiAssert } from '@midscene/web';
import { test } from '@playwright/test';

test('register github account', async ({ page }) => {
  await page.goto('https://github.com/signup');

  // 自然语言操作
  await aiAct(page, 'fill email as test@example.com');
  await aiAct(page, 'select "Join as an individual"');

  // 自然语言断言
  await aiAssert(page, 'the email field contains test@example.com');
});

方式三：本地部署多模态模型

文档 midscenejs.com/model-strategy 详细列出了支持的开源自托管方案（UI-TARS、Qwen-VL 等），可以完全在本地跑，不走 API。

社区生态

核心 SDK 是 JavaScript，但社区已经补了主要语言的 bindings：

midscene-ios — iOS 镜像自动化
midscene-pc — Windows/macOS/Linux 桌面操作
Midscene-Python — Python SDK
midscene-java — Java SDK（两个不同实现）
midscene-pc-docker — Docker 一键环境

Discord 社区：discord.gg/2JyBHxszE4，飞书交流群也有官方入口。

下一步建议

今天就试：装 Chrome 扩展，在自己产品页面上跑一遍 aiAct / aiAssert，感受一下 vs selector 的差异
集成进 Playwright：如果团队已有 Playwright 测试，加 aiAssert 替换最脆弱的几个 DOM 断言，看能省多少维护工作
看社区 Skills：关注 midscene-skills 仓库，看如何用 OpenClaw 等 Agent 框架驱动 Midscene 做跨平台自动化
考虑开源自托管：如果你有 GPU 资源，部署 UI-TARS 跑完全本地化的视觉驱动测试床

GitHub：web-infra-dev/midscene · 文档：midscenejs.com · Discord：discord.gg/2JyBHxszE4

评论区

0 条评论

登录后可评论。

它和现有的 AI 浏览器自动化有什么不同？

能做什么？不能做什么？

快速上手

社区生态

最近动态

下一步建议

评论区