Midscene.js 视觉 AI UI 自动化测试：用一句自然语言驱动浏览器、手机和桌面应用

Midscene.js 视觉 AI UI 自动化测试用一句自然语言驱动浏览器、手机和桌面应用【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene写 UI 自动化最怕两件事一次界面重构全仓库的选择器跟着报错以及永远测不到 Canvas 游戏、原生 App 和跨域 iframe。Midscene.js 是一款基于视觉 AI 的 UI 自动化测试框架思路完全不同——它不看 DOM只看屏幕截图你用自然语言描述点哪里、做什么、验证什么它自己规划并执行操作一套 API 同时覆盖 Web、Android、iOS、HarmonyOS 和桌面应用。一句话定位会看屏幕的 GUI AgentMidscene.js 把自己定义为 GUI Agent for E2E Testing。你可以把它理解成一个会用眼睛的测试机器人每执行一步它先截图把截图交给多模态大模型模型根据你写的自然语言指令比如点击右上角的登录按钮定位元素并执行点击、输入等动作界面验证也不是查 DOM 节点存不存在而是真正检查页面看起来对不对——颜色、高亮、布局、渲染状态都能断言。只要人眼能看见的元素包括纯图标按钮、canvas绘制的内容、原生 App 控件它都能定位到。模型方面支持 Qwen3.x、Doubao-Seed-2.1、GLM-4.6V、gemini-3.5-flash、UI-TARS 等多模态模型也可以部署开源模型自托管。零代码上手先用 Chrome 扩展试一句指令不想搭工程这是最低门槛的路径在 Chrome 中安装 Midscene 扩展扩展市场安装或从项目 Release 里手动加载离线包打开扩展侧边栏的设置页粘贴一组模型配置并保存打开任意网页在侧边栏输入一句符合当前页面内容的指令比如点击登录按钮、页面中的商品 {name: string, price: number}[]。跑通之后你看到的不是日志而是操作过程Midscene 会圈出它定位到的元素、展示规划步骤和执行结果。同一句话之后可以直接搬进代码里的 Agent API 使用不用重新验证。三步安装并跑通第一个脚本准备源码和环境仓库地址https://gitcode.com/GitHub_Trending/mid/midscene核心就是三步装依赖 → 配模型 → 写脚本。第一步装依赖Web 场景npm install midscene/web playwright playwright/test tsx --save-dev第二步配模型。Midscene 只认 OpenAI 兼容接口需要 4 个环境变量以豆包为例export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key # 换成你自己的 Key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed # 决定坐标换算方式别漏第三步写脚本并运行。下面的最小示例启动浏览器 → 打开页面 → 用自然语言搜索并提取结果import { 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); // 把页面交给 Agent await agent.aiAct(在搜索框输入 Headphones 并回车); // 自然语言描述操作 const items await agent.aiQuery({itemTitle: string, price: number}[], 找出列表中的商品和价格); console.log(items); await browser.close();npx tsx demo.ts跑完命令行会打印出识别到的商品标题和价格。想集成到 Puppeteer或者换 Android/iOS 等平台仓库apps/site/docs/下有对应的集成文档integrate-with-puppeteer、platforms 各平台指南照着配置即可。自然语言指令分三类各解决一个测试问题跑通脚本后你日常用的其实就三类 API分别对应测试里的操作、取数、断言1. 操作类aiAct / aiTap / aiInputaiTap(购物车中的结账按钮)这类即时交互一次只做一个动作快且稳。aiAct则适合多步骤任务搜索耳机把第一件商品加入购物车并确认购物车数量变为 1——它会边观察界面边规划遇到弹窗之类的意外也能自己调整路径。对定位不准的小图标可以加{ deepLocate: true }多走一轮精确定位。2. 取数类aiQuery / aiBoolean / aiNumber / aiString这是传统框架很难做到的让 AI 直接读屏返回结构化数据。页面中的商品{name: string, price: number}[] 会直接返回数组第一个耳机价格是否超过 1000 返回布尔值。爬虫、报表、跨页面对比都适用。3. 断言类aiAssertaiAssert(购物车中有一件商品并且页面显示了小计金额)条件不成立时抛错并在错误信息里附上模型判断的原因方便定位是界面问题还是业务逻辑问题。配合截图报告里能看到断言发生时的实际画面。一套代码换平台只换 AgentMidscene 的跨平台能力体现在同一套aiAct/aiAssert等 API只是创建 Agent 的方式随平台变化。Web 用 Playwright/Puppeteer 接页面Android 走 ADB需要设备开 USB 调试iOS 走 WebDriverAgent桌面端直接截屏模拟键鼠任何 Electron、Qt、WPF 应用都能操作。每个平台还配有对应的 Playground可以先在可视界面里验证指令再落回脚本。除了写 JS 脚本项目还提供 YAML 脚本运行器把测试步骤写进.yaml文件批量执行适合不想写代码、只想描述流程的团队。几个实际用得到的坑缓存能省一半时间默认关闭缓存每次执行都调用模型。给 Agent 配上cache: { id: xxx }后规划步骤和 Web 元素定位会写入./midscene_run/cache官方案例中重复执行耗时从 51 秒降到 28 秒。缓存失效会自动回退到模型重新规划不用担心脏数据。MIDSCENE_MODEL_FAMILY必填它决定坐标换算逻辑漏配会导致点不准。aiAct 更贵更慢它按最新界面状态持续规划token 消耗高于即时交互 API步骤固定、路径确定的操作用aiTap/aiInput就够了。查询类不缓存aiQuery、aiAssert等每次都会实时调用模型断言结果永远反映当前界面。从哪里继续文档、API 参考和各平台上手指南都在仓库的apps/site/docs/目录下zh为中文版apps/chrome-extension是零代码扩展的源码packages/web-integration、packages/android、packages/ios分别是对应平台的实现。先装好 Chrome 扩展试一句点击登录按钮是体验这个视觉 AI UI 自动化框架最快的方式。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考