Midscene.js 上手教程10 分钟安装并跑通第一个 AI 视觉自动化脚本【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene电商后台一改版几百个 XPath 集体失效App 升个版写死的坐标又对不上。Midscene.js 是一个 AI 视觉驱动的跨平台自动化框架多模态大模型直接看截图理解界面你用一句自然语言描述任务它就在 Web、Android、iOS、桌面端完成点击、输入和验证脚本里不写任何选择器和坐标。Midscene.js 和传统自动化的区别不看 DOM只看截图一句话区分传统自动化靠选择器或屏幕坐标找元素Midscene.js 靠 AI 看截图找元素。所谓视觉驱动就是让模型像人一样看着界面操作而不是在代码里维护一堆 XPath。元素没有语义标记也没关系纯图标按钮、canvas 画布、原生 App人眼能看到它就能定位到界面改版后通常只需改一句自然语言不用追着选择器满仓库改断言的是用户实际看到的内容高亮、布局、渲染状态而不只是某个 DOM 节点存在代价是每步多一次模型调用速度和成本要权衡对跨端、弱语义的界面这笔账通常划算。想先感受差异下面直接跑起来。 10 分钟完成 Midscene.js 安装并跑通第一个 demo以 Web 场景为例这也是最常见的 AI 自动化测试入口。第一步是建项目、装依赖、配模型——环境变量只需关心 API Key、模型名和 Base URL 这三项它们告诉 Midscene.js 调谁家的模型、用哪把钥匙mkdir midscene-demo cd midscene-demo pnpm init pnpm add midscene/web playwright tsx export MIDSCENE_MODEL_BASE_URLhttps://dashscope.aliyuncs.com/compatible-mode/v1 export MIDSCENE_MODEL_API_KEY你的Key export MIDSCENE_MODEL_NAMEqwen3.7-plus export MIDSCENE_MODEL_FAMILYqwen3接着写第二个文件demo.ts只干三件事打开页面、下指令、取数据import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并按回车); const items await agent.aiQuery({title: string, price: number}[]列出前 5 件商品); console.log(搜索结果, items);运行一下npx tsx demo.ts你应该看到两样东西终端打印出商品标题和价格数组同时输出Midscene - report file updated: /xxx/report-xxx.html。浏览器打开这个 HTML能看到每一步的截图、AI 的规划过程和实际点击位置——这是 Midscene.js 自带的执行报告后面排查问题全靠它。不想写代码的话Quick Start 里有 Chrome 扩展和 Playground 的免代码玩法写代码的完整细节看 Playwright 接入文档。Web 跑通之后我们把它搬到手机上。真实任务让手机 App 自己打开设置并验证结果移动端是跨平台自动化脚本的硬骨头。以 Android 为例目标很朴素验证我的设备页面能正确显示设备信息。操作一句aiAct告诉它路径——打开设置进入我的设备页面它自己规划先定位设置图标点击再进子页面全程没有坐标验证aiAssert下断言页面显示了设备名称和存储容量不通过时脚本直接失败截图标红留档await agent.aiAct(打开设置进入我的设备页面); await agent.aiAssert(页面显示了设备名称和存储容量);手机上跑之前模型配置填在 Playground 右上角的齿轮里格式是KEYVALUE每行一个数据只存在你本地浏览器不会上传任务能跑通不代表环境没问题。下面三个是新手最容易撞上的墙。连接或执行失败先查这 3 个地方 模型报错 401 / 403→ 最可能是环境变量没导出到当前终端 → 在跑脚本的同一个终端里echo $MIDSCENE_MODEL_API_KEY确认非空再执行aiAct 反复重试、找不到元素→ 多半是页面没加载完或指令与当前画面不符比如在首页让它点登录成功页的按钮→ 打开执行报告的截图时间线看模型当时到底看到了什么Android 连接超时、设备列表为空→ USB 调试没开或手机上的授权弹窗没点允许 → 终端跑adb devices看到设备序列号且状态是authorized就对了三个都排掉了还跑不通再看报告里每步的报错详情通常答案就在第一张截图里。✅ 带走清单跑通之后往哪走能一句话说清 aiAct做、aiQuery取、aiAssert验各干什么模型相关的 4 个环境变量在当前终端都能echo出来跑通过至少一次 Web 脚本并打开过它生成的执行报告知道 Android 要先过adb devices这关收藏了 模型配置与支持的模型 和 Playground 各平台启动方式 这两篇文档下一步很简单把 demo 里那句aiAct换成你业务里的真实流程再配合 Playwright 接入文档 写进现有测试套件。等下次界面改版你会发现要改的是那一句自然语言而不是几百个选择器——这就是视觉驱动自动化省下来的时间。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
