尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

十分钟跑通 Midscene.js:AI 自动化驱动跨平台 UI 测试的完整上手指南

发布时间:2026/9/11 9:28:30

资讯中心
01
ARTICLE

十分钟跑通 Midscene.js:AI 自动化驱动跨平台 UI 测试的完整上手指南

十分钟跑通 Midscene.js:AI 自动化驱动跨平台 UI 测试的完整上手指南
十分钟跑通 Midscene.jsAI 自动化驱动跨平台 UI 测试的完整上手指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 AI 驱动的跨平台自动化框架它靠视觉理解读懂截图再用自然语言指令操作 Web、Android、iOS 和桌面端界面。你只要会写几行脚本就能让机器替你完成看界面、找元素、点按钮、验结果这一整套跨平台 UI 测试。它解决什么问题先说一个场景。你负责一个 Web 后台的回归测试页面里有个只有图标没有文字的加购物车按钮还有一块用 canvas 画出来的价格标签。传统写法靠选择器和 DOM 结构找元素前端同学一重构你的脚本就集体失灵canvas 里画出来的东西DOM 里压根不存在选择器再准也够不着。Midscene.js 的做法是绕过这套逻辑每一步操作都建立在截图之上。人眼能看到的按钮、图标、高亮、布局状态它都能定位你只管用自然语言写下点击价格排序。界面改一版脚本大概率不用动。移动端同理同一套 API 能指到 Android 和 iOS 设备上的元素写一套流程多个平台复用。十分钟跑起来把仓库拉到本地装依赖构建三步git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build构建跑完后各核心包都会产出 dist 目录。跑任何脚本前先在环境变量里配好模型相关的 key官方文档 apps/site/docs/ 里有分平台的配置说明。跟着做一个真实场景电商站登录 抓数据仓库里自带现成脚本可以直接参考packages/cli/tests/multi_yaml_scripts/login.yaml 演示了一个完整闭环登录一个电商测试站、把商品列表抓成结构化数据、再校验某个商品的价格。关键部分长这样tasks: - name: login flow: - aiAction: type standard_user in user name input, type secret_sauce in password, click Login - aiWaitFor: there are products displayed on the page - name: extract items info flow: - aiQuery: {name, price, actionBtnName}[] 商品名、价格、按钮名 name: items - aiAssert: The price of Sauce Labs Fleece Jacket is 49.99四个动词覆盖绝大多数需求aiAction执行操作aiWaitFor等条件成立aiQuery把页面信息按结构抠出来aiAssert做断言。想一次跑多个文件用一个索引 YAML 指定并发数和文件清单仓库里的 index.yaml 就是现成例子。进阶看点Chrome 桥接模式怎么用装好 Midscene 的 Chrome 插件后你可以用本地 Node.js 脚本直接接管自己桌面上正在用的 Chrome——新开标签页或者附着到当前激活的标签页。好处是复用本地浏览器里的 cookie、插件和登录态不用每次重新走一遍认证。注意一点模型配置写在 Node 侧的环境变量里不在浏览器侧。const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(type AI 101 and hit Enter); await agent.aiAssert(there are some search results);缓存怎么开、能省多少事Midscene.js 的视觉定位每次都依赖模型重复执行同一条脚本会反复花钱。打开缓存后第二次跑同一个任务可以直接取上次的结果不再重复请求模型既快又省钱。启用时需要一个显式的 cache id策略支持只读、读写、仅写入三档具体字段可以看 packages/core/src/agent/cache-config.ts文档页 apps/site/docs 里的 caching 章节有完整示例。报告长什么样每次执行都会生成带截图和时间线的报告每一步操作了什么、耗时多少、断言结果如何都能回看定位失败不用重跑。报告模板在 apps/report/。卡住了怎么办设备连不上adb 一直报错三步排查adb devices里有没有设备开发者选项里的 USB 调试是否打开手机上弹的授权窗有没有点允许。文档 apps/site/docs/ 的 Android 平台页有对应截图。AI 响应特别慢先跑一个只有一两个动作的小脚本确认是网络、模型配置还是脚本本身的问题再检查有没有把可以缓存的任务开了缓存。元素定位失败给操作前加一个aiWaitFor等界面就绪然后打开报告看失败那一步的截图——视觉定位靠的是看得见页面没加载完、被弹窗挡住都会导致找不到。学习地图建议的顺序是先用 packages/cli/ 的命令行加 YAML 脚本跑通一个页面再进 apps/site/docs/ 按平台补齐 Android、iOS、桌面端文档最后读 packages/core/ 的源码AI agent、模型调用和缓存策略都在这。想动 Web 集成逻辑就翻 packages/web-integration/想改界面报告就去 apps/report/ 看看。跑通上面那个电商脚本你就已经有了第一个能用的 AI 自动化回归。下一步把你自己产品的一条核心流程搬进来让它替你在每次发版前把界面走一遍。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。