ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/9/11 14:54:42 拓冰建站 浏览量
让AI替你点网页:Midscene.js 自然语言驱动 UI 自动化上手 让AI替你点网页Midscene.js 自然语言驱动 UI 自动化上手【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款视觉驱动的 UI 自动化开源工具你只需用一句自然语言描述要做什么它就能驱动网页、安卓、iOS 和桌面应用完成点击、输入和数据提取全程不用写选择器。适合测试工程师、前端开发以及想自动化浏览器操作的新手。别再追着选择器跑了做过 UI 自动化的人多半都有过同一种痛苦页面一改选择器全废。图标按钮没有稳定的 classCanvas 画出来的控件压根读不到 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考