2026/8/20 1:36:05
FEATURED · 精选文章 
AI视觉自动化测试怎么落地我用 Midscene.js 重写了三个项目的测试脚本【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款面向端到端测试的 GUI Agent它完全靠截图理解界面用自然语言就能驱动 Web、Android、iOS、HarmonyOS 和桌面端应用完成自动化测试不用再维护任何选择器。这篇文章会从我的真实踩坑经历出发带你一步步把它接进自己的项目。当产品重构了三次我的选择器碎了一地先讲个真实经历。去年我负责一个在线教育平台的登录与选课流程测试用的还是传统方案——靠 CSS 选择器和 XPath 定位元素。第一个版本上线后一切正常直到产品经理说登录按钮要换成语义图标。改一次选择器十分钟导航重构半天。半年里产品重构了三次我维护选择器的时间比写测试逻辑的时间还多。更让我崩溃的是那块画出来的课程封面墙。运营想要一个canvas渲染的轮播图传统定位方式对它完全无感——DOM 里只有一个空荡荡的canvas标签。那一刻我意识到我们一直用看结构的方式去测试看屏幕的界面这条路从根上就偏了。后来我找到了 Midscene.js一个把思路完全倒过来的工具既然人是用眼睛看界面的为什么不能让 AI 也只看截图与其记坐标不如让 AI 当你的眼睛打个比方。传统自动化像闭着眼在书架里摸书你得记住每本书在第几排第几列选择器书架一挪动所有记忆全部失效。视觉方案则像睁着眼找书你只需说帮我拿那本红色封面的《设计模式》AI 看一眼书架就能定位。Midscene.js 干的就是这件事。它把界面截图丢给多模态视觉模型模型直接看出你要找的元素——纯图标按钮、自定义控件、canvas、跨域 iframe甚至原生 App 里的界面只要人眼能看见它就能定位。这也带来了三个连锁反应UI 改版时脚本不用跟着改验证的不再是DOM 节点存不存在而是用户真正看到的效果对不对比如按钮变灰、高亮状态Web、移动端、桌面端共享同一套视觉引擎API 完全一致。三个步骤跑通你的第一个视觉脚本上手比想象中简单前提是先准备好一个支持视觉定位的模型 API Key比如 Qwen-VL、Gemini 或 UI-TARS 这类多模态模型。第一步克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install第二步写一个极简的 YAML 脚本。我拿打开学习中心首页举例target: serve: ./demo-site url: index.html tasks: - name: 打开首页并确认加载 flow: - aiTap: 点击页面顶部的“开始学习”按钮 - aiAssert: 页面出现课程列表区域第三步用一条命令跑起来npx midscene/web run first-lesson.yaml屏幕上会实时回放每一步AI 看到了什么、点了哪里、断言是否通过。从零到第一个脚本跑通我实际只花了一个下午——其中半小时还是在找模型 Key 放哪了。能力是分层的看得见会操作能判断可规模化用了两周后我总结出 Midscene.js 的四层能力每一层都对应一类真实需求。第一层看得见——把界面变成可查询的数据aiQuery能直接从截图里提取信息比如课程卡片上的标题、价格、销量一次拿回结构化 JSON。我用它做过一个竞品课价巡检每天把同行的课程列表截图丢给它自动算出价格变动。数据是 JSON 格式的接进报表系统就行。const rows await agent.aiQuery({ prompt: 列出页面上所有课程的标题和当前价格返回 JSON 数组, });第二层会操作——用一句话代替十行定位代码点击、输入、滚动、拖拽全部是自然语言指令。我测过一个智能家居控制面板滑块调亮度这种自定义控件以前根本没法稳定定位现在一行aiTap搞定await agent.aiAction(把“客厅灯”的亮度滑块拖到 60%); await agent.aiInput(在“房间名称”输入框里填入 书房);第三层能判断——断言的是用户看到的样子aiAssert不只检查元素存不存在而是验证真实渲染效果。比如保存成功后出现绿色对勾提示、登录按钮在提交期间变灰不可点。这类视觉断言恰恰是传统方案最容易漏掉、又最能代表用户体验的部分。第四层可规模化——一套脚本跑遍所有平台同样的流程Web 用 Playwright/Puppeteer 跑Android 通过 scrcpy 投影跑iOS 走 WebDriverAgent桌面端也有对应通道。我在智能家居项目里把开关灯-调亮度-设定时这套用例在 Web 管理后台、Android App、iOS App 上各跑了一遍脚本结构几乎没变只换了启动器。落地心得避开的坑和算得清的账好东西也要用得对这里有四件我在真实项目里学到的经验。第一提示词写得越具体AI 越不迷糊。点击那个按钮和点击右上角灰色的保存草稿按钮后者的成功率明显更高。把限定词位置、颜色、文字加进去相当于给 AI 指了条明路。第二动效和弹窗是主要翻车点。页面加载动画没结束、弹窗挡住了目标AI 截图里看到的就是错位的画面。我的做法是在操作前先给一句等待指令比如等待课程列表加载完成后再点击第一张卡片。第三账要算总账。视觉定位每次调用都消耗模型额度单次成本确实比本地选择器高。但把每次 UI 改版的人肉修复成本算进去通常一两次重构就回本了——维护成本从每两周一次变成了几乎为零。第四三个高频问题提前回答你弱网下视觉定位会卡吗截图传输和模型推理都有网络开销弱网会变慢但不会失败本地部署开源模型可以彻底绕开延迟问题。多个项目能共享一套视觉词库吗可以。把返回按钮确认弹窗这类通用说法整理成统一的提示词模板团队按规范写指令就是最轻量的共享方式。AI 会点错吗偶尔会尤其是两个长得很像的卡片并排时。对策是给 aiTap 加上文字限定并在关键步骤后加一条 aiAssert 兜底。给新手的起步清单照着勾就行如果你也想试试别急着读完整本文档按下面这张清单走每个勾都能带来正反馈准备一个支持视觉定位的多模态模型 KeyQwen-VL、Gemini、UI-TARS 都行用上面的三步骤跑通第一个 YAML 脚本亲眼看到 AI 点对了按钮挑一个你最常改动的页面写一条 aiAssert 验证它的真实渲染效果用 aiQuery 从页面里提取一次结构化数据感受截图即数据库把你的脚本接进 CI让每次提交都自动跑一遍视觉回归做完这五件事你会发现自己再也不用追着选择器修测试了。换个思路之后测试这件事其实没那么难。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
AI视觉自动化测试怎么落地？我用 Midscene.js 重写了三个项目的测试脚本
AI视觉自动化测试怎么落地我用 Midscene.js 重写了三个项目的测试脚本【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款面向端到端测试的 GUI Agent它完全靠截图理解界面用自然语言就能驱动 Web、Android、iOS、HarmonyOS 和桌面端应用完成自动化测试不用再维护任何选择器。这篇文章会从我的真实踩坑经历出发带你一步步把它接进自己的项目。当产品重构了三次我的选择器碎了一地先讲个真实经历。去年我负责一个在线教育平台的登录与选课流程测试用的还是传统方案——靠 CSS 选择器和 XPath 定位元素。第一个版本上线后一切正常直到产品经理说登录按钮要换成语义图标。改一次选择器十分钟导航重构半天。半年里产品重构了三次我维护选择器的时间比写测试逻辑的时间还多。更让我崩溃的是那块画出来的课程封面墙。运营想要一个canvas渲染的轮播图传统定位方式对它完全无感——DOM 里只有一个空荡荡的canvas标签。那一刻我意识到我们一直用看结构的方式去测试看屏幕的界面这条路从根上就偏了。后来我找到了 Midscene.js一个把思路完全倒过来的工具既然人是用眼睛看界面的为什么不能让 AI 也只看截图与其记坐标不如让 AI 当你的眼睛打个比方。传统自动化像闭着眼在书架里摸书你得记住每本书在第几排第几列选择器书架一挪动所有记忆全部失效。视觉方案则像睁着眼找书你只需说帮我拿那本红色封面的《设计模式》AI 看一眼书架就能定位。Midscene.js 干的就是这件事。它把界面截图丢给多模态视觉模型模型直接看出你要找的元素——纯图标按钮、自定义控件、canvas、跨域 iframe甚至原生 App 里的界面只要人眼能看见它就能定位。这也带来了三个连锁反应UI 改版时脚本不用跟着改验证的不再是DOM 节点存不存在而是用户真正看到的效果对不对比如按钮变灰、高亮状态Web、移动端、桌面端共享同一套视觉引擎API 完全一致。三个步骤跑通你的第一个视觉脚本上手比想象中简单前提是先准备好一个支持视觉定位的模型 API Key比如 Qwen-VL、Gemini 或 UI-TARS 这类多模态模型。第一步克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene npm install第二步写一个极简的 YAML 脚本。我拿打开学习中心首页举例target: serve: ./demo-site url: index.html tasks: - name: 打开首页并确认加载 flow: - aiTap: 点击页面顶部的“开始学习”按钮 - aiAssert: 页面出现课程列表区域第三步用一条命令跑起来npx midscene/web run first-lesson.yaml屏幕上会实时回放每一步AI 看到了什么、点了哪里、断言是否通过。从零到第一个脚本跑通我实际只花了一个下午——其中半小时还是在找模型 Key 放哪了。能力是分层的看得见会操作能判断可规模化用了两周后我总结出 Midscene.js 的四层能力每一层都对应一类真实需求。第一层看得见——把界面变成可查询的数据aiQuery能直接从截图里提取信息比如课程卡片上的标题、价格、销量一次拿回结构化 JSON。我用它做过一个竞品课价巡检每天把同行的课程列表截图丢给它自动算出价格变动。数据是 JSON 格式的接进报表系统就行。const rows await agent.aiQuery({ prompt: 列出页面上所有课程的标题和当前价格返回 JSON 数组, });第二层会操作——用一句话代替十行定位代码点击、输入、滚动、拖拽全部是自然语言指令。我测过一个智能家居控制面板滑块调亮度这种自定义控件以前根本没法稳定定位现在一行aiTap搞定await agent.aiAction(把“客厅灯”的亮度滑块拖到 60%); await agent.aiInput(在“房间名称”输入框里填入 书房);第三层能判断——断言的是用户看到的样子aiAssert不只检查元素存不存在而是验证真实渲染效果。比如保存成功后出现绿色对勾提示、登录按钮在提交期间变灰不可点。这类视觉断言恰恰是传统方案最容易漏掉、又最能代表用户体验的部分。第四层可规模化——一套脚本跑遍所有平台同样的流程Web 用 Playwright/Puppeteer 跑Android 通过 scrcpy 投影跑iOS 走 WebDriverAgent桌面端也有对应通道。我在智能家居项目里把开关灯-调亮度-设定时这套用例在 Web 管理后台、Android App、iOS App 上各跑了一遍脚本结构几乎没变只换了启动器。落地心得避开的坑和算得清的账好东西也要用得对这里有四件我在真实项目里学到的经验。第一提示词写得越具体AI 越不迷糊。点击那个按钮和点击右上角灰色的保存草稿按钮后者的成功率明显更高。把限定词位置、颜色、文字加进去相当于给 AI 指了条明路。第二动效和弹窗是主要翻车点。页面加载动画没结束、弹窗挡住了目标AI 截图里看到的就是错位的画面。我的做法是在操作前先给一句等待指令比如等待课程列表加载完成后再点击第一张卡片。第三账要算总账。视觉定位每次调用都消耗模型额度单次成本确实比本地选择器高。但把每次 UI 改版的人肉修复成本算进去通常一两次重构就回本了——维护成本从每两周一次变成了几乎为零。第四三个高频问题提前回答你弱网下视觉定位会卡吗截图传输和模型推理都有网络开销弱网会变慢但不会失败本地部署开源模型可以彻底绕开延迟问题。多个项目能共享一套视觉词库吗可以。把返回按钮确认弹窗这类通用说法整理成统一的提示词模板团队按规范写指令就是最轻量的共享方式。AI 会点错吗偶尔会尤其是两个长得很像的卡片并排时。对策是给 aiTap 加上文字限定并在关键步骤后加一条 aiAssert 兜底。给新手的起步清单照着勾就行如果你也想试试别急着读完整本文档按下面这张清单走每个勾都能带来正反馈准备一个支持视觉定位的多模态模型 KeyQwen-VL、Gemini、UI-TARS 都行用上面的三步骤跑通第一个 YAML 脚本亲眼看到 AI 点对了按钮挑一个你最常改动的页面写一条 aiAssert 验证它的真实渲染效果用 aiQuery 从页面里提取一次结构化数据感受截图即数据库把你的脚本接进 CI让每次提交都自动跑一遍视觉回归做完这五件事你会发现自己再也不用追着选择器修测试了。换个思路之后测试这件事其实没那么难。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
