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 是一款基于视觉AI的UI自动化测试框架GUI Agent for E2E Testing。它不依赖 DOM 结构和 CSS 选择器而是让多模态视觉语言模型就是能看懂截图的AI直接读屏幕截图完成元素定位、操作执行和结果验证一套 Agent API 同时覆盖 Web、Android、iOS、HarmonyOS 和桌面应用适合受够了选择器维护成本的开发者和测试工程师。一句话说清它凭什么给程序装上一双眼睛。人做 UI 测试的方式是看屏幕、找目标、动手点、再确认结果。Midscene.js 就是让 AI 按同样的方式工作——你只描述做什么和应该看到什么它自己看截图决定点哪里、算不算通过。视觉AI自动化能干什么Web、移动端、桌面端三个场景Web 浏览器自动化。配合 Playwright 使用把 AI 能力接到你现有的page对象上测试代码从写选择器变成写人话。下面这段代码在一个已有页面上完成搜索、筛选和价格断言import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(Search for headphones, then filter the results to under $100); await agent.aiWaitFor(The filtered search results are displayed); await agent.aiAssert(Every product in the search results has a price below $100);移动端自动化。Android 侧通过 ADB 连上真机创建 Agent 的方式和 Web 基本一致动作和断言仍然是自然语言。这段代码拿到第一台连接的设备让它打开设置并核对版本号import { agentFromAdbDevice, getConnectedDevices } from midscene/android; const devices await getConnectedDevices(); const agent await agentFromAdbDevice(devices[0].udid); await agent.aiAct(打开设置应用进入关于手机页面); await agent.aiAssert(页面显示系统版本号);桌面端自动化。midscene/computer让 AI 直接操作本地桌面截屏、鼠标、键盘全部由它接管Electron 应用、原生客户端这类没有 Web DOM 的程序也能自动化。import { agentForComputer } from midscene/computer; const agent await agentForComputer(); await agent.aiAct(打开计算器); await agent.aiAssert(计算器窗口已显示);老办法 vs 新玩法选择器方案与视觉AI的差异维度选择器方案Midscene.js 视觉AI方案定位方式CSS / XPath依赖 DOM 结构读截图按外观和位置定位够不到的元素Canvas、跨域 iframe、纯图标按钮屏幕上可见即可识别平台覆盖Web、Android、iOS 各一套技术栈同一套 Agent API 跨 Web/Android/iOS/HarmonyOS/桌面脚本形态代码 选择器前端重构即批量失效自然语言描述界面改版不慌验证能力只能查 DOM 节点是否存在能断言看起来对不对颜色、高亮、布局说白了选择器方案赌的是DOM 结构稳定视觉AI方案赌的是人眼能看到什么AI 就能操作什么。前者省 token、跑得确定后者多花一次视觉推理换来对任意渲染方式的兼容。 5分钟跑起第一个视觉AI测试安装 SDK 和浏览器驱动npm install midscene/web playwright配置多模态模型三个环境变量MIDSCENE_MODEL_BASE_URL模型服务地址、MIDSCENE_MODEL_API_KEY密钥、MIDSCENE_MODEL_NAME模型名用new PlaywrightAgent(page)创建 Agent调一次aiAct(点击登录按钮)运行后打开自动生成的 HTML 报告逐步核对截图、元素位置和断言结果 进阶三招缓存加速、多模型切换与CI流水线集成缓存加速。设置MIDSCENE_CACHEtrue后重复执行的步骤会复用之前的定位结果同一条回归用例第二遍明显更快模型调用费用同步下降。多模型切换。改环境变量就能在 Qwen3.x、Doubao-Seed-2.1、GLM-4.6V、gemini-3.5-flash、UI-TARS 之间切换开源模型支持自建服务部署规划模型和视觉模型也可以分开配置按任务负载组合。CI 流水线集成。Midscene 走 Playwright / Puppeteer 的既有集成路径把 SDK 装进现有测试工程即可HTML 报告作为构建产物归档失败时截图、AI 决策过程、断言结论都查得到排查不用猜。上手资源与行动指引一句话总结Midscene.js 用视觉AI把维护选择器这件最耗人力的事从 UI 自动化测试里删掉了跨平台只写一套自然语言脚本。仓库GitHub 上的 web-infra-dev/midsceneMIT 协议可git clone后看示例工程文档源码apps/site/docsWeb SDKpackages/web-integrationAndroid SDKpackages/android【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表