
3 步跑通 Midscene.js AI 自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene它到底在解决什么问题Midscene.js是一个GUI Agent框架把界面截图交给多模态大模型你用一句自然语言描述想干什么它自己规划步骤、定位元素、执行操作并断言结果。传统 UI 自动化依赖选择器和 DOM 结构页面一重构、图标按钮一换脚本就全线失效Midscene.js 只认画面人能看到的东西它就能点到同一套 API 覆盖 Web、Android、iOS、HarmonyOS 和桌面端。读完这篇你可以做到用一份 YAML 脚本驱动浏览器完成搜索和断言拿到带截图的执行报告用环境变量改脚本行为一份脚本跑多个用例批量并行执行脚本并复用已登录的浏览器会话这就是 Midscene.js 的核心定位AI 驱动的界面自动化专为端到端测试而生。先从最笨的办法开始把仓库拉下来本地跑通它。克隆仓库并搭好本地环境先拿到源码git clone https://gitcode.com/GitHub_Trending/mid/midscene你会看到标准 monorepo 结构packages/是各包的核心实现apps/是各种端应用。拉源码的意义在于之后每个 API 的实现位置你都能直接查到。进入midscene目录后安装依赖pnpm install完成后packages/下各工作区都会出现 node_modules。这一步的前提是 Node 为 20.19/22.12/24、pnpm 为 9.3先确认版本再执行。然后构建全部包pnpm build你会看到各包依次输出构建结果完成后每个包下都会多出dist/目录。为什么要构建完再跑因为 CLI、核心引擎和多平台适配器都是从源码编译出来的示例依赖它们的产物。如果不打算读源码只想直接用可以跳过上面三步直接装官方发布的包npm i -g midscene/cli装完就有了midscene命令。最后写一份最小脚本bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气再在同目录放一个.env存模型配置只需这 4 个字段其余保持默认即可MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的 API Key MIDSCENE_MODEL_NAME模型名称 MIDSCENE_MODEL_FAMILY模型系列执行它midscene ./bing-search.yaml你会在终端看到执行进度结束后生成midscene_run/目录里面有总结 JSON 和本次脚本的 HTML 报告浏览器打开就能看到每一步的截图。想零代码先体验一遍可以装 Chrome 扩展在侧边栏下指令方法见快速开始。跑通第一个脚本只是热身下面三种用法才是日常里最值钱的。三个典型任务单脚本、带变量、批量并行想让 AI 自己走完多步流程时你想达成的效果是不写任何选择器AI 自己看屏幕、把目标拆成步骤完成搜索—等待—核对。核心思路是把若干ai步骤串在脚本里每步都是一句自然语言目标等价于 SDK 里的aiAct模型基于最新截图持续规划结尾用aiAssert让模型按验收条件检查画面。page: url: https://www.bing.com tasks: - name: 搜索并核对 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果页显示了天气信息效果验证脚本跑完aiAssert不抛错HTML 报告里能逐步看到模型的决策和截图。想让一份脚本跑多个用例时你想达成的效果是同一份脚本按用例换搜索词不用复制一堆文件。做法是在 YAML 里用${topic}引用环境变量——替换在任务执行前完成改.env就换用例脚本本身保持不动相当于把数据从流程里剥离出来。# .env topic无线耳机- ai: 在搜索框输入 ${topic}点击搜索按钮效果验证把topic改成别的值再跑一次脚本一个字没改报告里的搜索词和截图却跟着变了。如果还想要结构化数据比如商品名和价格SDK 的aiQuery能直接返回 JSON。想复用已登录的浏览器、批量跑任务时你想达成的效果是用例依赖登录态Cookies、插件又要并行跑好几个脚本。这是两个能力的组合桥接模式让脚本驱动你现成的桌面浏览器前提是装好 Midscene 的 Chrome 扩展不再另起无头浏览器--files通配符加--concurrent批量并行--continue-on-error保证一个失败不拖垮整批。page: url: https://www.bing.com bridgeMode: newTabWithUrlmidscene --files ./scripts/search-*.yaml --concurrent 4 --continue-on-error效果验证日常浏览器弹出新标签被自动操作结束后总结 JSON 里逐个记录脚本状态个别失败也不影响其余结果。完整参数见 YAML 脚本运行器 文档。同一套 YAML 流程搬到 Android 也一样成立把脚本头部从page换成android并填上设备 ID 即可。流程顺了之后真正考验经验的是排障。跑不通时先查这张常见问题速查表以下问题覆盖了 80% 的初次使用报错现象最常见原因一条解决动作启动就报模型连接错误MIDSCENE_MODEL_FAMILY没填或与模型名不匹配对照支持的模型与配置逐项核对.env明明配了却不生效.env不在工具运行目录或带了export前缀把.env挪到运行目录并去掉export报Unsupported Node.js versionNode 版本过旧升级到 20.19/22.12/24 后重装 CLI元素没找到、点偏了元素太小或易与相邻元素混淆开启deepLocate深度定位或把元素描述写得更具体Android 脚本报设备未找到USB 调试未开启或未授权插线后执行adb devices在手机上重新点授权如果上面都没命中先去仓库 issue 区搜同样的报错原文或翻文档里的 FAQ 与 Changelog 看是不是当前版本的已知问题提交 issue 时附上执行日志和 HTML 报告别人能更快帮你定位。下一步往哪走三个方向各适合不同的人想把自动化放进 CI 的看 Test Runner 概览文档它是下一代测试框架想弄清截图→规划→动作整条链路的翻 packages/core/ 源码想给自己业务找灵感的过一遍官方 showcases 案例清单。打开你的终端把第二段的命令复制一遍十分钟拿到你的第一份 Midscene.js 报告。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考