ARTICLE DETAIL

资讯详情

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

Midscene.js 实战:用自然语言和 AI 视觉驱动跨平台 UI 自动化

Midscene.js 实战:用自然语言和 AI 视觉驱动跨平台 UI 自动化 Midscene.js 实战用自然语言和 AI 视觉驱动跨平台 UI 自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 GUI Agent定位一句话用自然语言驱动 AI 视觉完成 UI 自动化。它覆盖 Web、Android、iOS 和桌面四个平台全程不需要你写一行 CSS 选择器或 XPath。它能替你干哪几类活一句话概括只要人类能看着屏幕完成的操作它都能做。具体拆开是四类活操作aiAct(在搜索框输入 Headphones 并回车)自然语言就是指令读数据aiQuery让模型把界面内容解析成结构化 JSON比如商品名和价格列表断言aiAssert/aiBoolean校验界面状态可以直接当测试断言用等待aiWaitFor(页面加载完成)等待某个状态出现除了写脚本它还有个 Playground 网页界面可以打字执行单个动作。每次执行都会产出一份 HTML 报告逐步截图、耗时、模型决策全在里面。为什么它不依赖选择器传统 UI 自动化是结构依赖的先解析 DOM找到选择器再执行点击。这条路线有两个绕不开的问题——页面一重构选择器就悄悄失效遇到 Canvas、游戏界面这类没有语义结构的元素选择器根本无从写起。Midscene 把方向反过来了。每一步它先截图把当前画面连同你的自然语言指令一起交给视觉语言模型由模型判断点哪里、输什么再由平台适配层把这个决定翻译成真实的点击或按键。维护对象从此变成你的指令文案UI 重构之后你要检查的只是指令描述是否仍然准确。代价也是真实的每一步都要过一遍模型有 token 开销有模型延迟偶尔还会看走眼。适不适合你的场景放到后面的边界一节说。最小上手路径装依赖配三个模型环境变量云 API 或本地部署的开源模型都可以npm i midscene/web playwright tsximport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; import dotenv/config; const browser await chromium.launch({ headless: true }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in the search box and hit Enter); await agent.aiWaitFor(at least one headphone item on the page); console.log(await agent.aiQuery({title: string, price: number}[]));npx tsx demo.ts几秒到十几秒后结果打印执行报告同步生成。第一个任务就这么点代码。Web、Android、iOS、桌面一套 API同一套aiAct/aiQuery四个平台通用只是构造的 Agent 不同平台包底层连接方式Webmidscene/webPlaywright / Puppeteer 页面对象Androidmidscene/androidadb 连真机或模拟器iOSmidscene/iosWebDriverAgent桌面midscene/computerWindows / macOS / Linux 桌面应用还有一个模式值得单独提Bridge 模式。本地终端的 SDK 通过 WebSocket 连上你已经打开的浏览器直接控制当前标签页——登录态不用管直接复用已登录会话的 Cookie。在登录状态下操作收件箱这类场景它省掉了很多麻烦。机制精选它凭什么能跑想知道稳定性从哪来看三处就够。第一处是 packages/core/src/agent/ 里的 Agent 主循环每一步截图后做规划 → 定位元素 → 执行动作 → 验证循环到任务完成。报告里 Planning、Locate、Tap 的流程就是它。第二处是 packages/core/src/ai-model/ 的模型层。Qwen3-VL、UI-TARS 这类开源模型和各家商业 API 都能接Agent 不关心模型从哪来——私有化部署省成本这件事靠的就是这个抽象。第三处是 packages/web-integration/src/ 的平台适配层。Web、Android、iOS 各自实现同一套接口抽象上层指令完全一致跨平台三个字的地基在这儿。端到端实战一次电商查价回归走一个完整流程在 eBay 搜耳机按价格排序断言第一件商品低于 100 美元。const agent new PlaywrightAgent(page); // 搜索并等待结果出现 await agent.aiAct(type Headphones in the search box and hit Enter); await agent.aiWaitFor(at least one headphone item on the page); // 按价格排序取结构化数据 await agent.aiAct(click the price filter to sort from low to high); const items await agent.aiQuery( {title: string, price: number}[], list the first 5 items, ); // 这一步就是测试断言 await agent.aiAssert( the first item is a headphone and its price is under 100 dollars, );跑完后报告文件里每一步都挂着截图模型看到了什么、决定做什么、耗时多久。测试挂掉时你看的是具体画面而不是selector not found哪一步走偏一眼就能定位。说实话这部分调试体验比传统报错友好得多。边界与局限什么时候别用它讲清楚不适合高频、零容错的断言模型看走眼的概率不为零CI 里每天跑几千次的断言用选择器脚本更稳Midscene 更适合视觉校验和复杂交互成本和速度是实打实的每步都过一次视觉模型简单单步动作几秒多步任务几十秒外加 token 开销截图是唯一输入字号太小、对比度低、被遮挡的元素都会拉低识别率模型看不见就等于不存在动态内容靠状态等待aiWaitFor等的是某个状态出现复杂加载逻辑可能还得配合显式 sleep对测试工程师来说合理的分工是稳定部分留给选择器脚本Midscene 负责选择器写不动的部分——Canvas、复杂 UI、跨平台回归。下一步给你个具体的第一步拿上面那段最小样例配上你自己的模型账号把搜索 → 取数完整跑一遍总共 30 分钟。然后做两件事把仓库克隆下来翻packages/web-integration/demo/里的真实样例git clone https://gitcode.com/GitHub_Trending/mid/midscene通读 Playwright 集成文档报告生成和模型配置的细节都在里面这个工具不是噱头但也不是万能的。把它放在选择器搞不定的地方账是划算的。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表