凌晨两点还在补CSS选择器？用AI视觉自动化，把UI测试维护时间压缩90%

凌晨两点还在补CSS选择器用AI视觉自动化把UI测试维护时间压缩90%【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene凌晨一点你盯着满屏飘红的自动化报告打开编辑器给第十七个选择器对暗号。这不是巧合而是每个测试工程师都反复经历的循环UI 一改版脚本就集体罢工。Midscene.js想终结这种循环——它是一款基于视觉AI的跨平台UI自动化工具用自然语言就能驱动 Web、Android、iOS、HarmonyOS 和桌面端的测试。它不翻 DOM、不记坐标而是让脚本像人一样看截图、认界面、执行操作。这篇文章不想写长篇教程只想聊清楚四件事传统自动化到底痛在哪、视觉AI怎么改写规则、三分钟内如何跑起来、落地时有哪些坑值得提前绕开。一、先说说那个让你破防的瞬间为什么传统UI自动化总在维护上翻车1. 按门牌号找朋友选择器为什么这么脆想象你按门牌号去朋友家地址写的是3栋502结果朋友搬去了5栋302你自然扑空。传统UI自动化里的 CSS 选择器、XPath 就是这个门牌号——前端只要把btn-primary改成btn-main你的脚本就集体迷路。更崩溃的是改完还要跑一遍全量用例确认这次真修对了改一个坏三个是常态。2. 无语义元素看得见却测不到纯图标按钮、canvas绘制的图表、没有可访问性标签的自定义控件——这些元素在 DOM 里只剩一堆坐标和样式没有稳定的名字。传统工具要么测不了要么把坐标硬编码进脚本UI 稍微挪个位置就立刻报废。3. 原生应用与跨域 iframe脚本进不去的盲区Web 测试还能靠 DevTools 协议但原生 Android/iOS 应用、桌面客户端、跨域 iframe 里的内容传统的 DOM 驱动工具几乎束手无策。于是你被迫换工具、换语言、维护多套脚本测试资产四分五裂。一句话总结传统方案的处境写测试的时间还没修测试的时间多。二、换个思路让脚本看界面而不是翻代码Midscene.js 的解法是把人眼识图的能力搬进测试脚本把当前界面截图喂给视觉大模型让模型理解界面长什么样、按钮在哪、当前是什么状态再结合你用自然语言写下的指令输出点哪里、输什么、对不对。上图是 Midscene.js 的 Playground左侧输入一句自然语言指令比如点击搜索框右侧网页就真的执行了对应操作。没有#id、没有data-testid人和脚本之间的共同语言就是一句话。这套思路带来三个连锁反应前端重构不再恐慌只要页面看起来还是原来那样脚本就不需要改因为它从没记过门牌号盲区被补齐图标、canvas、自定义控件只要人眼能看见模型就能定位一套逻辑走全端Web、移动端、桌面端共用同一套看图办事的机制测试资产可以跨端复用。三、三分钟跑通第一个视觉测试脚本先克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install再准备一个最小脚本把要做的操作用大白话写出来以 Web 为例name: 登录回归 steps: - action: aiAction params: 点击登录页面的用户名输入框 - action: aiInput params: [用户名输入框, demomidscene.com] - action: aiAssert params: 验证登录成功并显示欢迎语配好视觉模型云端多模态大模型或本地部署模型都支持环境变量里填上 key 与模型名即可最后一条命令跑起来npx midscene/web run login.yaml --report从安装到看到第一份报告通常用不了一顿饭的时间。脚本里没有等待逻辑——Midscene.js 会在元素还没出现时自动等待把先 sleep 3 秒再断言这种脆弱写法彻底扔进历史。四、核心能力拆解一句话一张画面能力它在做什么通俗类比视觉元素定位通过描述找到元素右上角那个齿轮图标看图识物而不是翻通讯录自然语言操作一句话驱动点击、输入、滚动、拖拽像对同事发消息一样指挥测试智能断言验证文本、状态与视觉表现按钮变灰验收只看结果不查源码多端覆盖Web / Android / iOS / HarmonyOS / 桌面端统一入口一套方言走遍全平台上面是 Android Playground左边是模型规划出的操作步骤打开设置、查看版本号、返回上一页右边是真实设备的实时画面。移动端测试从此不必再把坐标写死在脚本里。五、两个有画面感的落地场景场景一后台报表导出每周发版前的体检某 SaaS 团队的核心链路是筛选条件 → 生成报表 → 导出 Excel。过去每次前端调整筛选器组件旧脚本就碎一次。改用视觉方案后脚本只描述业务动作在时间范围里选最近30天点击导出按钮断言出现下载完成提示。前端内部怎么重构都无所谓只要界面看起来还是那个样子脚本就一路绿灯。原本每轮发版要花一个下午补脚本现在只需 20 分钟跑完加人工抽查。场景二多端签到打卡一次编写处处复用一家做企业服务的公司同一套签到功能要同时发布 iOS、Android 和桌面端。过去三个端三套脚本、三种维护节奏改版时三倍工作量。现在他们用同一套自然语言步骤分别指向不同端的浏览器与设备视觉模型按各端实际界面去理解。界面布局不同没关系——点击签到按钮这句话在哪个端上都成立。六、落地避坑模型选型、速度与CI/CD接入1. 模型选型没有最好只有合适视觉模型决定识别准确率与成本。追求稳定和中文理解能力可以选云端多模态大模型在意数据不出内网或预算有限可以部署本地小模型如 UI-TARS 系列。建议先在 Playground 里用真实页面做一轮口语测试看哪种模型对你们业务界面的理解最顺。2. 提速让模型少看图同样是识别一个页面缓存开与不开耗时可能差出数倍。对变化不频繁的页面开启结果缓存重复操作直接命中高频小操作优先用一步一问而不是长任务一口气跑完出错也更容易定位。3. 接入 CI/CD把报告当成交付物Midscene.js 支持生成结构化报告与失败截图建议把报告上传为流水线产物并把关键断言失败设为门禁条件。团队拿到的不再是一句红了而是能直接定位到是哪一步、当时界面长什么样的现场记录。上图是 Bridge 模式连接真实浏览器后SDK 可以直接接管桌面 Chrome 执行视觉操作。这意味着你已有的 Playwright / Puppeteer 工程不必推倒重来可以在关键步骤里植入视觉理解能力存量资产平滑过渡。七、结尾从怕改版到盼改版回到开头那个凌晨两点的夜晚。改用视觉驱动之后剧情大概率会变成UI 改版当天你打开 CI跑一遍 Midscene 脚本喝杯咖啡回来看到的是全部通过和一份按步骤拆解的报告。偶尔有失败报告里也带着当时的界面截图一眼就能看出是产品改了交互还是模型认错了按钮。如果你也想让测试脚本从按门牌号找朋友升级成看图识人现在就可以动手克隆仓库、安装依赖、跑一个官方示例感受一下说一句话测试就跑起来的体验。觉得方向对了就给它点个 Star——你的一票会让更多测试工程师不再熬夜。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考