Midscene.js 实战入门:AI 视觉驱动的跨平台自动化,5 分钟跑通第一个脚本 Midscene.js 实战入门AI 视觉驱动的跨平台自动化5 分钟跑通第一个脚本【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 AI 驱动的跨平台自动化框架它先用视觉理解读懂一张界面截图再由 AI 决策规划出操作序列最后把动作下发到对应设备。网页、安卓手机、iOS、桌面同一套自然语言指令基本可以复用。如果你也被选择器半夜改坏脚本坑过这篇就是给你看的10 分钟内跑通第一个脚本并知道踩坑时该去哪儿查。先说痛点写死定位的脚本为什么总在关键时刻挂掉先说结论因为脚本和界面实现耦合太紧。传统自动化Selenium、Appium 这类靠类名、XPath 等选择器找元素页面类名一改、广告位一插、布局一挪脚本就断往往偏偏断在回归测试跑批的时候。移动端更痛苦定位信息要从设备里导视图树一条条人肉核对。写脚本、改脚本、排查失败三件事成本都不低。Midscene.js 的做法是把按坐标找元素换成让 AI 看懂屏幕。你只写业务意图比如搜索无线耳机打开第一个商品至于怎么点、点哪里由框架在运行时现算。3 分钟搞懂原理AI 视觉理解和传统自动化差在哪Midscene.js 的核心是一个截图 → 理解 → 执行的循环每一轮三步截图抓取当前界面画面交给多模态模型就是能看懂图片的模型。理解与规划模型描述界面上的元素——搜索框在哪、登录按钮是哪个——并规划下一步操作。执行Midscene.js 把规划翻译成点击、输入、滑动等动作按平台走对应通道浏览器走 CDP安卓走 adbiOS 走 WebDriverAgent再截一张图验证结果进入下一轮。和传统方案的差别一句话就能说清传统方式你写死怎么做快但脆Midscene.js 你只写做什么AI 运行时现算怎么做稳但依赖模型质量所以选对模型很关键。代价也要有预期每步都可能调用模型比纯脚本慢、还有 API 费用。对回归冒烟、跨端验证这类场景这笔账通常划得来。最小可用示例一条命令驱动浏览器完成搜索先确认 Node.js 版本是 20.19、22.12 或 24太旧的版本会被工具链拒绝启动。在工作目录下建一个.env文件写入模型配置四个值在模型服务商控制台都能找到MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的-api-key MIDSCENE_MODEL_NAME你的模型名称 MIDSCENE_MODEL_FAMILY你的模型系列密钥怎么配才不泄露三条原则Key 只放.env或系统环境变量绝不写进 YAML 脚本或代码.env加入.gitignore团队协作时每人本地配自己的 Key脚本里用${变量名}引用。CLI 会按 dotenv 约定自动加载.env注意它必须放在工具运行目录下。然后写最小脚本bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息装 CLI 并执行npm i -g midscene/cli midscene ./bing-search.yaml终端逐步输出进度完成后在输出目录生成可视化报告HTML和 JSON 结果。浏览器被启动、搜索、验证结果全程没有写一个选择器。三个场景演练跨平台自动化的最小路径场景一浏览器里零代码先试。不想写代码就先装 Midscene Chrome 扩展把同一份模型配置粘贴到设置页然后在任意网页的侧边栏输入指令点按钮aiAct、提取页面数据aiQuery、检查界面aiAssert。Playground 里验证过的指令可以直接原样搬进代码调用两边共享同一套底层实现。场景二怎么 5 分钟连上安卓设备。开发者选项里打开 USB 调试数据线连上后adb devices -l能看到设备号就算通了。然后一条命令启动安卓 Playgroundnpx --yes midscene/android-playground在窗口齿轮图标处粘贴模型配置就能直接在手机画面上输入指令。连上之后YAML 脚本把开头从page换成android填上自己的 deviceIdflow 仍然全是自然语言android: deviceId: s4ey59 tasks: - name: 地图导航 flow: - ai: 打开地图应用 - ai: 在搜索栏输入 杭州西湖然后点击搜索按钮iOS需配置好 WebDriverAgent和 HarmonyOS 的写法同构按 Android 平台指南 同目录下的对应文档替换配置段即可。场景三失败了去哪儿看。跑完打开输出目录里的可视化报告每步的截图、AI 的规划思路、定位结果、耗时都在里面。排查时看三样东西——最后成功的一步、失败那步模型的 thought 字段、对应的截图。报告里出问题的那一步还能点 Open in Playground 回放调试这就是 Midscene.js 报告回放 的用法。稳定性调优让脚本从能跑到跑得稳调优的核心思路一句话不稳时拿速度换稳定稳了拿稳定换成本。现象原因一招解决设备连不上、超时USB 调试没开或驱动缺失打开 USB 调试、换数据线再adb devices -l复查模型调用报 401/403Key 拼错、过期或权限不足逐个核对.env四个值留意多余引号与换行定位漂移、偶发失败界面动态变化或模型输出不稳定CLI 加--retry 2小目标元素开deepLocate跑批慢、API 贵每步都重新调模型启用缓存相同指令加相似页面直接复用结果补充三点重试midscene ./a.yaml --retry 2只对失败的脚本重试是抹平大模型输出抖动的最省事手段。并发互不依赖的脚本用--concurrent 4 --continue-on-error一起跑多个脚本都要登录态时把登录写成 setup 前置任务并共享浏览器上下文。缓存规划与定位结果缓存在./midscene_run/cache查询和断言类结果永不缓存。界面大改后缓存误伤删掉缓存目录即可自动重建详见 缓存 AI 规划和定位。不同角色往哪深入做测试先吃透 YAML 脚本运行器学会报告分析和并发、重试的写法把回归套件搬进 CI。做开发从 基本概念 的 Agent API 入手aiAct / aiTap / aiQuery / aiAssertPlayground 验证通过后写进 Playwright 或 Puppeteer 脚本选模型时重点看模型配置文档里的MIDSCENE_MODEL_FAMILY。看架构视觉理解与规划在packages/core设备适配层在packages/android、packages/web-integration跨平台能力就从这两处来。别等需要同时跑三台设备才动手——今天先把浏览器上一个脚本跑通稳了再扩到手机上快速开始 和 YAML 脚本运行器 两篇值得常驻你的书签栏。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考