Midscene.js 完整指南不写一行选择器搞定跨平台UI自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene一个完全不看 DOM、只靠截图、并且直接接受自然语言指令的 UI 自动化框架——Midscene.js 就是为此而生。它的定位是「GUI Agent for E2E Testing」把屏幕截一张图交给多模态大模型替你看界面找到按钮、点进输入框、确认页面是否呈现了预期的状态。Web、Android、iOS、HarmonyOS 到桌面端全部由同一套 API 驱动。不写选择器的测试思路aiAct、aiAssert、aiQuery 三件套传统自动化给每个按钮写一个选择器一次前端重构就可能让几十行用例集体失效带语义缺失的元素——纯图标按钮、canvas 画布、跨域 iframe——传统手段基本够不着。Midscene 的做法是把判断权交给视觉只要人眼能看见的东西它就能定位。日常写用例基本只用到三个调用。aiAct接收一句自然语言目标比如搜索耳机并把第一件商品加入购物车框架会观察屏幕、自行拆解步骤、逐个执行中途还能验证你附带的断言条件aiAssert用一句话校验界面状态不满足时直接抛错并附上模型给出的原因aiQuery则让模型从截图中提取结构化数据例如返回每个商品的名称和价格。实际跑起来你会发现两个开关特别好用元素很小或和周围长得太像时开启deepLocate多做一轮定位流程复杂容易跑偏时开启deepThink把规划和定位拆成两次独立的模型调用。代价是更长的耗时和更多 token换回来的是稳定性。3分钟上手浏览器里跑通第一条自然语言指令想先感受效果最快的路是 Chrome 扩展。不用搭项目装完扩展后把模型配置一个能看图的多模态模型的服务地址和密钥粘贴进侧边栏设置然后打开任意网页在侧边栏输入点击登录按钮这类指令即可。⚡ 在这里验证过的每一条指令之后都能原样搬进代码里用 SDK 调用相当于零成本试错。详细的配置步骤可以看官方文档 apps/site/docs/zh/quick-start.mdx。用一份 YAML 描述完整流程命令行直接执行把验证过的指令沉淀成脚本时YAML 格式非常顺手——写流程的人甚至不需要懂 JavaScript。克隆仓库git clone https://gitcode.com/GitHub_Trending/mid/midscene后把模型密钥配成环境变量写一个脚本文件page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索今日天气 - sleep: 3000 - name: 检查结果 flow: - aiAssert: 结果中展示了天气信息然后执行midscene run ./demo.yaml跑完会自动生成执行报告。头部是目标环境page指向网页换成android、ios、computer就切换到对应端tasks下面是分步骤的流程。CLI 的实现位于 packages/cli/tests 目录下还有一批现成的样例脚本可以参考。一套代码跑多端Web、手机、桌面通用同一份脚本逻辑换个头部配置就能换平台平台接入方式实现位置WebPlaywright / Puppeteer / Chrome 扩展packages/web-integration/Androidadb 加 scrcpy 投屏packages/android/iOSWebDriverAgentpackages/ios/HarmonyOShdc 工具链packages/harmony/桌面Win/macOS/Linux系统级键鼠控制packages/computer/各个平台包的 API 几乎一致因为真正的大脑——截图准备、任务规划、缓存、报告生成——都集中在 packages/core/src/agent/ 里端上只负责把画面投进来、把动作打出去。坑在于设备准备Android 需要配好 adb 和授权iOS 得先把模拟器或真机跑起来这部分环境搭建比写用例本身花的时间多。缓存怎么开才省 token重复执行的脚本最该开缓存。在 YAML 的agent段里加上cache: { id: my-cache }即可开启读写模式同一条指令在相似页面上第二次运行时直接复用上次缓存的执行计划Web 场景下元素定位结果还会存成 XPath下次先验证有效性再决定是否重新问模型。缓存失效时会自动回退到模型重新规划并清掉这条过期记录不会卡死。缓存文件落在midscene_run/cache目录官方文档里的对比案例命中缓存后单轮执行从 51 秒降到了 28 秒。✅ 对每天跑几十遍的回归脚本来说这笔 token 和时间的账很划算。每次执行都留痕看报告里模型是怎么想的每次运行结束都会生成一份报告每一步的截图、模型给出的规划和理由都排在里面失败时能直接看到卡在哪个画面、为什么判断失败。报告相关的渲染逻辑在 apps/report/模板和数据都在仓库里想自定义报告样式也有现成入口。排障时这份报告比翻日志快得多——不用猜模型当时看到了什么、想做什么白纸黑字。如果今天就想动手建议从最烦人的那条流程入手先用浏览器扩展把指令跑通再把它搬进 YAML 文件配上一个 cache id第二次执行时你就能直观感受到这套视觉驱动方式的差别。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考