尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Midscene.js视觉自动化测试实战:一句话操控全平台UI

Midscene.js视觉自动化测试实战:一句话操控全平台UI Midscene.js视觉自动化测试实战一句话操控全平台UI【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene周五下午五点测试工程师小周收到一条消息下周一发版脚本里所有选择器要重查。他翻出那 300 行用例一半是#login-btn、.submit-icon这种。周一 UI 重构上线28 个用例挂了 26 个他花两天逐条修修完第三周UI 又变了。这条改不完的轮回每个做过 UI 自动化的团队都懂。Midscene.js 就是冲着这个轮回来的——开源、纯视觉驱动的 UI 自动化测试引擎。它不看 DOM、不写选择器只靠截图用自然语言描述做什么就能像人一样操作界面跨平台覆盖 Web、Android、iOS、HarmonyOS 和桌面应用。为什么看得见比找得到更可靠传统自动化依赖页面结构按钮得有 id图标得有 aria-label。可现实里图标按钮没有语义标记canvas里的内容根本读不出来跨域 iframe 和原生 App 更是够不着。最要命的是你断言了这个元素存在却永远验证不了它看起来对不对——颜色、高亮、布局错了测试照样绿。Midscene.js 换了个思路界面长什么样就按什么样处理。它只截一张图交给多模态模型判断搜索框在哪、该点什么。人类能看到什么它就能操作什么。重构改了样式没关系图变了你重说一遍就行。零代码起步装个扩展当场跑通视觉自动化测试最快的一条路是 Chrome 扩展。装好、点开面板、填好模型配置服务商和 API Key在任意网页上输入一句人话比如在搜索框输入 Midscene.js 并点击搜索回车就能看到它一步步定位、点击、回显结果。整个过程不用写一行代码是体验自然语言驱动 UI 自动化最直观的一课。✨三行代码接入你的测试流程体验够了就把自动化写进真实流程。用 CLI 一键建项目配好模型环境变量后核心逻辑其实只有三个方法aiAction描述操作、aiQuery提取信息、aiAssert断言结果。await agent.aiAction(在搜索框输入 Midscene.js 并回车) const title await agent.aiQuery(页面标题是什么) await agent.aiAssert(搜索结果里包含 Midscene 官网入口)这段代码能跑在 Playwright、Puppeteer或桥接模式连接的桌面浏览器上也能直接放进 CI。它和你平时写的测试只有一个差别里面没有一条选择器。原理不神秘截图当眼睛模型当大脑你可能会问不读 DOM它凭什么知道该点哪打个比方你接手一个陌生软件不会先要它的源码而是打开界面看一眼就懂了。Midscene.js 同理——截图就是眼睛多模态模型就是大脑定位元素靠的是看不是查。这一点还带来额外好处模型是可替换的。Qwen、Doubao、GLM 等商用模型开箱即用UI-TARS 这类开源模型还能自托管数据不出内网。对测试环境敏感的公司这是一条很实际的退路。不止网页跨平台UI自动化手机和桌面同样一句话同一套心智模型换平台只是换眼睛的接法。接上 ADB 就是 Android 自动化接上 WebDriverAgent 就是 iOS 自动化桌面端能直接操控 Windows、macOS 和 Linux 应用。核心引擎在packages/core/各平台实现相互独立统一由一套 API 调度。新手最容易踩的3个坑模型没配对。报错十有八九是服务商、模型名或 API Key 不一致先让单次调用跑通再写完整脚本。指令说得太含糊。看一下页面和告诉我右上角按钮叫什么执行效果天差地别目标越具体模型越稳。设备端环境没就绪。手机自动化前先确认 Android 开了 USB 调试、iOS 的 WebDriverAgent 正常启动别让脚本替环境问题背锅。写在最后视觉自动化测试正在从查结构走向看结果过去十年UI 自动化一直在跟页面结构较劲结构一变脚本就废。Midscene.js 展示的是一条新路——不翻译结构只描述意图把维护的负担从人身上挪开。这是从用代码操作界面到用语言描述操作的范式切换。现在就去装个扩展随便打开一个网页输入一句人话点运行。三十秒后你会明白为什么越来越多测试工程师开始把选择器写进告别清单。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表