让AI替你点网页：Midscene.js 自然语言驱动 UI 自动化上手

让AI替你点网页：Midscene.js 自然语言驱动 UI 自动化上手

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene.js 是一款视觉驱动的 UI 自动化开源工具，你只需用一句自然语言描述要做什么，它就能驱动网页、安卓、iOS 和桌面应用完成点击、输入和数据提取，全程不用写选择器。适合测试工程师、前端开发，以及想自动化浏览器操作的新手。

别再追着选择器跑了

做过 UI 自动化的人，多半都有过同一种痛苦：页面一改，选择器全废。图标按钮没有稳定的 class，Canvas 画出来的控件压根读不到 DOM，跨域 iframe 更是碰都碰不到。每上一次重构，就有一批脚本跟着变红。

Midscene.js 换了个思路。它不看 DOM，只看截图。你把步骤用大白话写出来，比如"点击登录按钮"，它就自己盯着画面找到那个按钮，再点下去。人眼能看见的，它就能操作，选择器这种东西，从此可以不用维护。

装个扩展，先跑通一条指令

不用搭项目，装好 Chrome 扩展就能玩。它自带一个 Playground 侧边栏，配置好一个多模态模型的 API Key 之后，打开任意网页，在侧边栏里输入一句指令，回车就能看到 AI 在页面上动手。

日常最常用的就三种指令：

• 执行操作：点击登录按钮
• 提取数据：页面里的商品，{name, price}[]
• 断言界面：页面顶部有导航栏

跑通这一条，你就已经体会到"用说话代替写代码"是什么感觉了。

跟着场景走一遍

把商品列表抓成一张数据表

想把某个电商页的商品名称和价格都抓下来，不用一行行写定位逻辑。用aiQuery告诉它你要什么结构：

const products = await agent.aiQuery( '页面中的商品，{name: string, price: number}[]' );

执行完，products里就是一组结构化的对象，直接喂给下游的表格或接口都行，省掉了最烦人的解析环节。

用一份 YAML 脚本跑通回归测试

更省事的是把整个流程写成 YAML，交给命令行工具跑。一个检查 Bing 搜索的脚本长这样：

page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气" - aiAssert: 结果中展示了天气信息

命令行工具在packages/cli/里，装好之后一条命令就能跑：

midscene ./bing-search.yaml

它会自动跑完流程、输出进度，最后生成一份可视化报告。你不用关心任何测试框架的搭建，专注写流程本身就行。

手机上跑同样的自然语言

同一套写法也能驱动真机。YAML 里把page换成android或ios，指向连上 adb 的设备，"打开地图、搜个地点、开始导航"这类流程，照样用自然语言写。相关能力分别在packages/android/和packages/ios/里。

网页、手机、桌面走一套 API，切换平台几乎不用改逻辑，这是它最省心的地方。

它凭什么不一样

不靠 DOM，靠截图定位。元素定位完全基于画面，所以没有语义标记的图标按钮、Canvas 控件、跨域 iframe 都能点中。这套纯视觉的定位逻辑，集中在packages/core/。

一套 API 跨所有平台。网页、Android、iOS、HarmonyOS、桌面走的是同一组方法，换个目标只改配置，不用换语言，也不用重新学一套 API。

每一步都有可视化回放。跑完自动生成报告，操作序列、截图、耗时一目了然，哪一步出了问题，翻报告就能定位，不用反复复现。

顺手就能用的技巧

先用扩展验证，再写进代码。在 Chrome 扩展里把一句指令调通，再原样搬进 SDK 或 YAML，省掉大量来回试错的成本。

整段任务交给 aiAct，关键节点用 aiAssert 兜底。大流程让它自主规划，只在你真正关心的地方单独断言，比全写死要稳得多。

模型按任务选。简单页面用轻量多模态模型省钱，复杂定位需求再上更强的模型，配置统一写在.env里管理，换模型只改一行。

出发吧

到这里，你已经能看到 Midscene.js 的样子了：一句人话，替你把网页、手机、桌面都点一遍。

• 想深入玩法，读官方文档里的快速开始和 API 参考
• 想直接抄作业，看仓库里的示例脚本和 YAML demo
• 有卡壳的地方，去社区问一句，通常很快有人回

上手不难，难的是把第一个流程跑通。现在就去试试吧。

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene