news 2026/8/15 15:55:07

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/15 15:10:12

揭秘沛县建设局网站背后的民生温度:一个普通市民眼中的信息透明与城市变迁

本文关键词:沛县建设局网站在这个信息爆炸的时代,我们习惯了用手指滑动屏幕来获取一切想要的资讯。从天气预告到快递追踪,从社交动态到新闻资讯,互联网像空气一样渗透进生活的每一个角落。然而,对于许多像我们这样扎根在古老城镇、看着它一点点变新的普通人来说,有时候我…

作者头像 李华
网站建设 2026/8/14 13:14:09

深圳网站建设 东毅虎如何以匠心重塑企业数字门面打造极致用户体验与转化

在深圳这座被誉为中国科技之都的城市里,每一秒都有新的想法诞生,每一个街角都可能隐藏着下一个独角兽企业的雏形。对于在这里打拼的企业主和创业者来说,拥有一张精美的“数字名片”——也就是企业官网,早已不再是锦上添花的可选项目,而是生死攸关的生存必需品。然而,在实…

作者头像 李华
网站建设 2026/8/15 15:48:04

深度解析中国铁路建设投资公司网站熊学军:揭秘高铁背后的硬核力量与行业变革

中国铁路建设投资公司网站熊学军当我们谈论中国铁路的时候,脑海中总会浮现出一幅幅震撼人心的画面:飞驰的银龙穿行在崇山峻岭之间,跨越江河湖海,将原本遥远的距离瞬间缩短。这不仅仅是一项交通基础设施的建设奇迹,更是国家经济实力、技术水平和意志力的集中体现。在这一宏…

作者头像 李华
网站建设 2026/8/15 15:31:50

【TensorRTtSharp v4.0】TensorRT CSharp API v4.0 系列案例总览与学习路线

TensorRT CSharp API v4.0 的 samples/ 不是一组互不相关的代码片段&#xff0c;而是一条从 CUDA 基础、TensorRT 输入输出、动态 Shape&#xff0c;到 ONNX 构建、Refit、回调、并发和真实图像分类的学习路线。每个案例都保持小而专注&#xff0c;并通过公开的 JYPPX.TensorRT…

作者头像 李华
网站建设 2026/8/15 15:48:01

网页设计与网站建设完全学习手册pdf下载及核心内容深度解析指南

在这个移动互联网普及到每一个角落的年代,网页设计已经不再仅仅是程序员或者设计师的专属技能,它逐渐成为了一种通用的商业语言,甚至是一种生存技能。很多刚入行或者想要转行的小伙伴,总是问这样一个问题:“老师,我该从哪里开始?市面上那么多书,我看花了眼,到底哪本才…

作者头像 李华
网站建设 2026/8/15 15:32:02

网站建设如何跑单子:从接单到交付的全流程实战指南及核心技巧

今天咱们不整那些虚头巴脑的理论,就聊聊很多刚入行或者在小工作室摸爬滚打的朋友,心里最犯嘀咕的那个问题。说实话,我也经历过那个阶段。技术写得挺溜,代码敲得飞起,但一到谈钱,一到谈单子,心里就没底了。看着同行明明做的样式还没自己好,却能把单子轻松拿走,心里那个…

作者头像 李华