ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

别再追着选择器跑:Midscene.js 跨平台 UI 自动化快速上手指南

别再追着选择器跑:Midscene.js 跨平台 UI 自动化快速上手指南 别再追着选择器跑Midscene.js 跨平台 UI 自动化快速上手指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneUI 测试脚本刚写好前端一换组件类名整个用例集当场全红。你刚把选择器修好弹层、跨域 iframe、canvas 画出来的控件又让它们集体失灵——这是每个写 UI 自动化的人都躲不掉的日常。Midscene.js 是一个用视觉理解来驱动屏幕的 GUI 自动化项目你用自然语言说清楚要做什么、做完该看到什么它自己截图、自己找目标、替你点击、输入和校验。浏览器页面、安卓手机、iPhone、鸿蒙设备到桌面应用一套 Agent API 全部覆盖。 靠看屏幕干活的数字同事传统脚本更像背下了页面第三行有个按钮的人界面一挪位就找不着北。Midscene.js 则像一个每轮都先看屏幕的新同事观察当前画面判断点哪里能达成目标做完动作后再看一眼确认效果。全程不依赖类名和 DOM 结构所以同一类脚本能从浏览器原样搬到手机屏幕上只有图标的按钮、canvas 绘制的内容、跨域 iframe 里的元素它都找得到。⏱️ 一份 YAML 脚本就能跑起来最短路径是官方 CLI把流程写成 YAML一条命令直接执行。# bing-search.yaml page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息运行前先在执行目录下放好模型配置四个变量服务地址、Key、模型名、模型系列详见仓库内的脚本运行器文档# 执行目录下创建 .envdotenv 约定无 export 前缀 echo MIDSCENE_MODEL_BASE_URL你的模型服务地址 .env echo MIDSCENE_MODEL_API_KEY你的 API Key .env echo MIDSCENE_MODEL_NAME你的模型名称 .env echo MIDSCENE_MODEL_FAMILY你的模型系列 .env npm i -g midscene/cli midscene ./bing-search.yaml环境要求 Node.js 20.19、22.12 或 24。跑完后会在输出目录生成一份可视化 HTML 报告每一步的截图、动作和断言结果都在里面失败了直接打开报告看哪一步走偏网页场景加--headed还能看着浏览器把全程演一遍。 它能帮你接手的三件小事不怕换肤的 Web 回归。在现有 Playwright 项目里加几句自然语言打开站点、搜索headphones、确认结果列表每条都有价格。过去半天耗在选择器维护上的功夫省下来CSS 怎么改脚本都不红。不动代码的移动端走查。手机用 adb 连上打开 Android Playground口述打开地图搜索杭州西湖开始导航屏幕上的全过程你能亲眼看着。指令验证通过后原样写进脚本行为完全一致。批量抽结构化数据。一句aiQuery就能把商品列表的名称 价格抽成 JSON 数组不写任何选择器竞品分析、价格巡检这类活直接能接。第一次用的避坑经验别盲写指令。先用 Playground 验证网页装 Chrome 扩展手机跑npx midscene/android-playground。指令在 Playground 里通过后再粘进脚本行为一致省掉两头调试的工夫。.env放错地方白忙。它必须位于工具的执行目录与 YAML 在哪无关且默认不覆盖已存在的同名系统环境变量需要时用--dotenv-override显式声明。长流程交给aiAct。别用aiTap一步一步硬拆目标元素小、容易和邻居混淆时加deepLocate提高定位准确度等待用aiWaitFor盯界面到达预期状态而不是固定 sleep 猜秒数。适合谁上手入口怎么选团队里已有 Playwright 或 Puppeteer 框架的直接装midscene/web复用现有测试运行器和 fixtures框架不用换。还没想好写不写代码的先装 Chrome 扩展在自己的管理后台上验证几条指令跑顺了再沉淀成脚本。想自托管模型的模型系列列表里包含 UI-TARS、Qwen 等开源选项可以直接接自己的服务。完整的模型清单和各平台指南在仓库内的中文文档里。建议从单页面的搜索流程起步跑通一次再往多平台扩。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表