Midscene.js AI 视觉 UI 自动化实战指南：不写选择器也能操控任意界面

Midscene.js AI 视觉 UI 自动化实战指南不写选择器也能操控任意界面【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene跑 E2E 测试时最先劝退你的往往是失效的选择器一处 CSS 类名改动旧用例就全挂了。Midscene.js 是一款面向 E2E 测试的 GUI Agent它凭截图看懂界面再用自然语言驱动 UI 自动化测试让你不必编写和维护任何选择器。 一句话认识它Midscene.js 是由多模态模型能看懂图片的大模型驱动的跨平台 UI 自动化框架核心卖点有三个纯视觉、零选择器元素定位只依赖截图纯图标按钮、canvas 内容也能找到跨平台、同一套 API网页、Android、iOS、HarmonyOS、桌面应用通用多种写法JS/TS SDK、YAML 脚本、零代码的 Chrome 扩展任选其一 核心能力拆解 自然语言执行任务aiAct给aiAct一句自然语言目标它会观察界面、规划步骤、定位元素并执行直到目标完成。类似把任务交给同事具体路径由对方自行判断await agent.aiAct(搜索无线耳机将第一件商品加入购物车并确认购物车数量变为 1);单步且明确的操作用aiTap点击、aiInput输入这类即时交互 API开销比aiAct小await agent.aiTap(购物车中的结账按钮); 结构化数据提取aiQueryaiQuery只观察界面不执行操作按你指定的结构返回数据适合把页面信息转成 JSONconst items await agent.aiQuery( 页面中的商品{name: string, price: number}[] ); // 例如[{ name: 无线耳机, price: 99.9 }]✅ 视觉断言aiAssertaiAssert校验的是用户真正看到的画面。条件成立则正常结束不成立会抛出错误并附上模型给出的原因。颜色、高亮、布局都能断言而不只是判断 DOM 节点是否存在。 一套 API 覆盖全平台同一句aiAct既能在网页里跑也能跑在 USB 连接的 Android 设备、iOS 真机与桌面应用上。下面是 Android 端的控制界面 从零跑起来安装依赖npm install midscene/web。配置模型需要一个具备 UI 定位能力的多模态模型以豆包为例千问、GLM、Gemini 等均可列表见模型配置export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed最小脚本存为demo.ts。Playwright 是微软开源的浏览器自动化库这里用它启动浏览器把页面交给 Agentimport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); 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, hit Enter); const items await agent.aiQuery( {itemTitle: string, price: number}[], find items and prices ); console.log(items); await browser.close();运行与查看结果执行npx tsx demo.ts。命令行会打印抓取到的商品同时midscene_run目录生成一个 HTML 报告逐步展示截图、耗时与成败。️ 设计与模块仓库按核心引擎 平台适配器划分全部 MIT 协议开源模块职责路径核心引擎Agent 逻辑、多模态模型调用、报告生成packages/coreWeb 集成Playwright / Puppeteer / Chrome 扩展桥接packages/web-integration移动端Android、iOS、HarmonyOS 设备适配packages/android、packages/ios、packages/harmony桌面端Windows / macOS / Linux 键鼠控制packages/computerCLI批量运行 YAML 脚本packages/cli文档站官方文档与案例展示apps/site各平台执行链路一致Agent 收到自然语言目标 → 截图 → 发给模型 → 模型返回元素坐标 → 对应适配器执行动作。 场景实操场景一电商价格巡检背景每天早上要确认核心商品价格没变。操作用aiAct进入商品搜索再用下面的代码取价并断言const price await agent.aiNumber(第一件商品的价格是多少); await agent.aiAssert(第一件商品价格应为 ${expected} 元);产出命令行输出结构化 JSON可直接写入监控表价格异常时断言会直接失败并留痕。场景二Android 发版冒烟测试背景每次发版前验证打开应用 → 进入设置 → 查看版本号。操作USB 连接手机并开启 USB 调试创建 Android 设备 Agent调用的仍是aiAct/aiQuery这套 API。产出版本号返回命令行报告里留存每一步截图。️ 上手建议与常见疑问避坑经验单步操作用即时 APIaiAct每步都要重新规划时间和 token 开销更高固定动作用aiTap、aiInput。先在扩展里试指令Chrome 扩展是零代码 Playground验证效果后再搬进 SDK。模型定位能力是关键选官方文档推荐的、UI 定位能力强的模型能显著减少定位漂移。问断网能用吗 答需要调用模型服务。自部署 UI-TARS、Qwen-VL 等开源模型后可在全内网环境运行。问会向模型发送哪些数据 答默认只发送页面截图aiQuery等传入domIncluded: true时才会附带 DOM 信息详见数据隐私。问元素定位不稳定怎么办 答在对应调用上开启deepLocate多轮深度定位小尺寸或易混淆的元素会更稳。Midscene.js 适合测试工程师、QA 以及想自动化跨平台界面的开发者。下一步装好 Chrome 扩展跑通第一条自然语言指令再把它搬进 Playwright 测试。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考