ARTICLE DETAIL

资讯详情

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

Midscene.js 快速上手指南:AI 视觉做浏览器自动化,不写一个选择器

Midscene.js 快速上手指南:AI 视觉做浏览器自动化,不写一个选择器 Midscene.js 快速上手指南AI 视觉做浏览器自动化不写一个选择器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene写 UI 自动化脚本时最耗时的往往不是操作本身而是定位元素写好一个 CSS 选择器等页面一改版整段脚本就失效。Midscene.js 是一个 AI 视觉驱动的 UI 自动化工具——你用自然语言描述任务比如“点击登录按钮”它基于截图识别界面元素并直接执行全程不依赖 DOM 结构。和传统选择器有什么区别传统做法Midscene.js元素怎么找到手写 CSS 选择器或 XPathAI 看截图直接定位页面改版后脚本跟着失效要逐个修走纯视觉路径不受布局影响Canvas、游戏界面没有 DOM基本做不了截图能看清就能操作 先试后学三个零门槛体验入口Chrome 扩展不写代码。装好扩展打开任意网页在提示框里输入想做的事Midscene 截图并代你执行。不用装依赖也不用写一行代码。Android Playground控制真机。手机用 USB 连上电脑打开内置的 Android Playground。它通过 adb 控制本地设备你输入自然语言指令就能操作屏幕上的应用。iOS Playground真机与模拟器。iOS 侧有对应的 Playground走 WebDriverAgent 控制本地 iOS 设备和模拟器使用方式与前两个一致。⚡ 安装与第一段代码安装 Web 包npm install midscene/web最小可运行示例用自然语言驱动浏览器import { AgentOverPlaywright } from midscene/web; const agent new AgentOverPlaywright(); await agent.launch({ headless: false }); await agent.aiAction(打开 GitHub 并搜索 Midscene.js); await agent.aiAction(点击第一个搜索结果);桥接模式复用本机浏览器。如果你要用已打开的 Chrome 里现成的登录态和 Cookie不必新起浏览器在本地终端跑起 Midscene SDK连接到现有桌面浏览器再下发指令即可。需要复用 Cookie 或做复杂浏览器操作时这个模式比较合适。️ 能力一览各平台能做什么平台接入方式适用情况WebPuppeteer / Playwright / 桥接模式浏览器页面自动化、端到端测试AndroidJavaScript SDK adb本地安卓真机iOSJavaScript SDK WebDriverAgent本地 iOS 设备与模拟器任意自定义界面JavaScript SDK内部系统、游戏界面API 分三类交互 API 负责点击、输入、滚动等操作数据提取 API 从界面和 DOM 中取出结构化信息工具函数如aiAssert()、aiLocate()、aiWaitFor()覆盖断言、定位和等待。 它怎么工作只看截图Midscene.js 的元素定位和交互走纯视觉路径把截图交给视觉语言模型模型直接返回元素位置不读取任何 DOM。Canvas 和游戏这类没有 DOM 的界面因此也能操作。目前支持的模型包括 Qwen3-VL、Doubao-1.6-vision、gemini-3-pro 和 UI-TARS。源码按职责拆分核心引擎在 packages/core/src/负责视觉定位与任务执行Web、Android、iOS 的接入层分别在 packages/web-integration/src/、packages/android/src/、packages/ios/src/回放与可视化界面在 packages/visualizer/src/。两个机制值得了解。一是缓存同一个脚本重复执行时复用之前算好的结果重跑更快也更省开销。二是可视化回放报告按时间轴回放每一步的描述、执行时间和截图出问题时容易定位在哪一步。适合谁与典型用法电商回归测试。商品页经常改版选择器脚本寿命短。把搜索、筛选、加购、下单这类流程用自然语言写成脚本页面改版后只要元素还能被看清流程就能继续跑维护量小很多。移动应用流程验证。安卓或 iOS 版本更新后用 Playground 走一遍核心路径设置、登录、支付。不必为每种设备维护一套测试脚本直接验证用户实际会走的路径。跨界面数据提取。Web 看板和移动端应用都能用数据提取 API把屏幕上的信息抓成结构化数据方便做业务监控和数据分析。⚙️ 上手前的建议按场景选模型。不同视觉语言模型在成本、速度、准确率上有差异先在自己的页面上跑几个样例再定。重复执行打开缓存。重复任务复用已有结果省时间也省算力。MCP 服务对接上层代理。Midscene 能把 Agent 的原子操作暴露为 MCP 工具让其他代理用自然语言检查和操作 UI。调试靠现成工具。用 Playground 或扩展下发小指令单步验证执行完打开回放报告核对过程。 资源入口官方文档英文apps/site/docs/en/快速开始apps/site/docs/en/quick-start.mdxAPI 参考apps/site/docs/en/reference/Android 入门apps/site/docs/en/platforms/android.mdxiOS 入门apps/site/docs/en/platforms/ios.mdxPlaywright 集成apps/site/docs/en/integrate-with-playwright.mdx建议从 Chrome 扩展开始装好扩展打开任意页面把想做的事用一句话发出去。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表