尧图网站建设 
30分钟跑通Midscene.js视觉自动化测试让AI替你看屏幕、点按钮【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js是一款开源、基于AI视觉的UI自动化测试工具核心思路是让多模态大模型直接看屏幕截图来理解界面并执行操作而不是依赖脆弱的DOM选择器——这正是Midscene.js视觉自动化测试与传统方案最本质的区别。作为新手你不需要精通任何测试框架只需要会用自然语言描述想做什么30分钟就能跑通第一份跨平台UI自动化测试脚本。 先讲个故事周五晚上十点的选择器噩梦想象这样一个场景。周五下午前端同事把登录按钮的样式类名从.btn-login改成了.auth-submit。当晚十点你负责的38条端到端测试脚本挂了31条。功能其实没坏坏的是脚本里那行page.click(.btn-login)——选择器也就是用来按图索骥定位元素的那段代码一旦和页面结构对不上整个测试就崩溃。这是传统UI自动化测试绕不开的痛它依赖DOM结构、无障碍树这类页面内部信息来定位元素。内部信息一变测试就挂遇到纯图标按钮、canvas画布、跨域iframe它直接看不见换成原生App更是无从下手。你可能会问那让AI去读DOM树不就行了行但AI依然看不懂这个按钮看起来是什么样。 换个思路让AI看界面而不是找代码Midscene.js的做法很纯粹只要人眼能看到它就只靠截图工作。每次执行指令时它会把当前界面截图交给一个具备UI理解能力的多模态大模型就是能看图的AI模型看懂画面后再决定点击哪里、输入什么、验证什么。想象你带了一位新实习生。你不会告诉他按钮在坐标(320, 480)而是说点一下右上角的设置图标把用户名填进那个带锁图标的输入框。Midscene.js就是这位视觉型实习生——它不看代码只看画面于是带来了三个直接收益UI改版不再是灾难。换配色、改布局、删类名只要界面看起来没变AI 照常操作脚本不用改一行。能触达传统工具够不着的元素。图标按钮、canvas游戏界面、跨域iframe、原生App——只要屏幕上画得出来它就能定位。能验证用户真正看到的东西。按钮是不是真的高亮了、弹窗是不是真的盖在屏幕中央这些看起来对不对的问题它都能回答。️ 开动前10分钟给你的AI配上一双眼睛Midscene.js本身不内置模型它需要调用一个会看图的多模态大模型来驱动。好消息是选择很多云端的Qwen-VL、GLM、Gemini或可本地部署的开源模型UI-TARS都支持。配置方式也简单——在项目目录下建一个.env文件填上模型服务的地址和密钥即可# 告诉 Midscene 调用哪个视觉模型服务 MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的 API Key MIDSCENE_MODEL_NAME你的模型名称这段配置的作用Midscene.js执行每个步骤前会把当前界面截图发给这个模型过目再根据模型的判断操作界面。配置完成后就可以写第一份脚本了。 第一份脚本让AI自己去课程网站逛一圈我们以在线课程平台为例创建一个YAML文件让AI完成一次完整的搜索课程→进入详情页→核验信息流程# 文件course-check.yaml # 目标打开课程网站搜索课程进入详情页并核验关键信息 page: url: https://www.course-demo.com tasks: - name: 搜索并验证课程 flow: - ai: 在顶部搜索框输入 AI 入门课然后按回车 - aiWaitFor: 页面出现至少一门课程卡片 - ai: 点击第一门课程进入详情页 - aiAssert: 详情页显示课程价格和讲师姓名运行它只需要一条命令npm i -g midscene/cli # 第一次使用先全局安装命令行工具 midscene ./course-check.yaml执行过程中命令行会实时打印每一步的进度结束后自动生成一份可视化报告。全程你写的不是点击第几个元素而是做什么事——这正是Midscene.js视觉自动化测试脚本最直观的地方。上图是Midscene.js的Playground操作界面左侧是控制台可切换Action执行操作/ Query提取数据/ Assert断言验证三种模式右侧是当前页面的实时截图与AI识别出的UI上下文每一步做了什么一目了然。 不想写代码装个浏览器插件就能玩如果你想先体验用自然语言指挥AI操作网页连项目都不用建。Midscene.js提供Chrome扩展安装后在任意网页打开侧边栏直接输入指令即可比如type Midscene.js and click search在搜索框输入关键词并搜索click the login button点击登录按钮the page shows a navigation bar at the top断言页面顶部有导航栏如上图所示扩展面板就嵌在浏览器右侧AI会实时完成你交代的每一步操作。这种先在插件里验证指令、再复制到代码里跑自动化的流程能帮你以极低的成本迈过入门门槛。 同一套脚本手机平板桌面全通吃Midscene.js最有想象力的地方在于看截图这套机制与平台无关。Web、Android、iOS、HarmonyOS、Windows/macOS/Linux桌面应用全部走同一套视觉逻辑和相似的API。拿Android举例只要电脑连接了开启adb调试的手机再配合scrcpy投屏你就能在浏览器里实时看到手机画面并下发指令# 文件android-nav.yaml # 让 AI 在手机上打开地图应用并开始导航 android: deviceId: s4eys59 # 设备号可通过 adb devices 命令查询 tasks: - name: 地图导航 flow: - ai: 打开地图应用 - ai: 在搜索栏输入 杭州西湖点击搜索 - ai: 点击第一个搜索结果再点 路线 - ai: 点击 开始 按钮开始导航上图是Android Playground的实际效果右侧是手机屏幕的实时投影左侧是AI的规划与执行步骤列表。你会发现从Web切到移动端唯一的改动只是YAML顶部从page换成了android——这就是跨平台UI自动化测试最直观的体现。 跑完测试之后让AI交代刚才干了什么自动化测试最怕静默失败脚本跑完了但没人知道它到底做了什么、哪一步出了问题。Midscene.js每次执行都会自动生成一份图文报告把AI的思考过程完整摊开给你看。从上图可以看到报告包含完整的时间轴、每一步的规划Planning、界面理解Insight、元素定位Locate与点击Action耗时以及关键节点的页面截图。哪一步卡住了、为什么卡住扫一眼就清楚。报告还支持一键Open in Playground把失败现场直接搬回交互界面里排查。⚡ 更进一步把AI能力接进你的测试框架如果你已经有一套Playwright测试体系想把视觉能力接进去Midscene.js提供了完整SDK核心代码其实只有寥寥几行import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: true }); const page await browser.newPage(); await page.goto(https://www.course-demo.com); const agent new PlaywrightAgent(page); // 一句自然语言完成搜索 await agent.aiAct(在搜索框输入 AI 入门课 并回车); // 把页面里的课程信息提取成结构化数组 const courses await agent.aiQuery{ title: string; price: number }[]( 列出页面中的课程, ); // 视觉断言确认课程列表真的渲染出来了 await agent.aiAssert(页面显示了课程列表); await browser.close();这段代码演示了三件事aiAct负责执行操作aiQuery负责把页面内容提取成结构化数据aiAssert负责验证界面状态。三种能力组合起来你就能用人话编写完整的端到端测试并在CI里稳定复用。 还有几个值得一试的魔法除了上面这些Midscene.js还有几个加分项数据提取aiQuery可以直接把列表、表格、卡片信息变成JSON数组省掉写解析逻辑的功夫。智能等待类似aiWaitFor(购物车数量变为 2)的指令让AI等到条件满足再继续比固定sleep可靠得多。Agent自主执行配合Skills机制可以让AI Agent自己拆解任务、规划步骤并逐段执行适合探索性测试场景。不过要提醒一句视觉AI的定位并非100%精确复杂页面偶有误判。常规做法是AI跑主流程 少量关键断言兜底把它当作得力助手但关键节点仍保留验证。 写在最后它适合谁以及你现在该做什么如果你属于以下任一情况Midscene.js值得你花上一个周末被选择器维护折磨的测试工程师——视觉定位能大幅降低UI改动带来的脚本维护成本想给产品加自动化验收的非技术角色——YAML脚本加自然语言门槛低到几乎不需要编程需要在多端做回归的团队——Web、App、桌面一套思路复用学习成本被摊得很薄。而它的路线图同样清晰更聪明的视觉模型、更完整的Agent自主测试、更顺滑的团队协作能力。视觉驱动的自动化正在从新玩法变成UI测试的标配。现在轮到你了。装好依赖、配好模型从一份20行的YAML脚本开始让AI第一次替你看屏幕、点按钮——这30分钟花得一定值。如果想从源码层面研究它的实现可以拉取仓库动手探索git clone https://gitcode.com/GitHub_Trending/mid/midscene【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 30分钟跑通Midscene.js视觉自动化测试：让AI替你看屏幕、点按钮
30分钟跑通Midscene.js视觉自动化测试让AI替你看屏幕、点按钮【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js是一款开源、基于AI视觉的UI自动化测试工具核心思路是让多模态大模型直接看屏幕截图来理解界面并执行操作而不是依赖脆弱的DOM选择器——这正是Midscene.js视觉自动化测试与传统方案最本质的区别。作为新手你不需要精通任何测试框架只需要会用自然语言描述想做什么30分钟就能跑通第一份跨平台UI自动化测试脚本。 先讲个故事周五晚上十点的选择器噩梦想象这样一个场景。周五下午前端同事把登录按钮的样式类名从.btn-login改成了.auth-submit。当晚十点你负责的38条端到端测试脚本挂了31条。功能其实没坏坏的是脚本里那行page.click(.btn-login)——选择器也就是用来按图索骥定位元素的那段代码一旦和页面结构对不上整个测试就崩溃。这是传统UI自动化测试绕不开的痛它依赖DOM结构、无障碍树这类页面内部信息来定位元素。内部信息一变测试就挂遇到纯图标按钮、canvas画布、跨域iframe它直接看不见换成原生App更是无从下手。你可能会问那让AI去读DOM树不就行了行但AI依然看不懂这个按钮看起来是什么样。 换个思路让AI看界面而不是找代码Midscene.js的做法很纯粹只要人眼能看到它就只靠截图工作。每次执行指令时它会把当前界面截图交给一个具备UI理解能力的多模态大模型就是能看图的AI模型看懂画面后再决定点击哪里、输入什么、验证什么。想象你带了一位新实习生。你不会告诉他按钮在坐标(320, 480)而是说点一下右上角的设置图标把用户名填进那个带锁图标的输入框。Midscene.js就是这位视觉型实习生——它不看代码只看画面于是带来了三个直接收益UI改版不再是灾难。换配色、改布局、删类名只要界面看起来没变AI 照常操作脚本不用改一行。能触达传统工具够不着的元素。图标按钮、canvas游戏界面、跨域iframe、原生App——只要屏幕上画得出来它就能定位。能验证用户真正看到的东西。按钮是不是真的高亮了、弹窗是不是真的盖在屏幕中央这些看起来对不对的问题它都能回答。️ 开动前10分钟给你的AI配上一双眼睛Midscene.js本身不内置模型它需要调用一个会看图的多模态大模型来驱动。好消息是选择很多云端的Qwen-VL、GLM、Gemini或可本地部署的开源模型UI-TARS都支持。配置方式也简单——在项目目录下建一个.env文件填上模型服务的地址和密钥即可# 告诉 Midscene 调用哪个视觉模型服务 MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的 API Key MIDSCENE_MODEL_NAME你的模型名称这段配置的作用Midscene.js执行每个步骤前会把当前界面截图发给这个模型过目再根据模型的判断操作界面。配置完成后就可以写第一份脚本了。 第一份脚本让AI自己去课程网站逛一圈我们以在线课程平台为例创建一个YAML文件让AI完成一次完整的搜索课程→进入详情页→核验信息流程# 文件course-check.yaml # 目标打开课程网站搜索课程进入详情页并核验关键信息 page: url: https://www.course-demo.com tasks: - name: 搜索并验证课程 flow: - ai: 在顶部搜索框输入 AI 入门课然后按回车 - aiWaitFor: 页面出现至少一门课程卡片 - ai: 点击第一门课程进入详情页 - aiAssert: 详情页显示课程价格和讲师姓名运行它只需要一条命令npm i -g midscene/cli # 第一次使用先全局安装命令行工具 midscene ./course-check.yaml执行过程中命令行会实时打印每一步的进度结束后自动生成一份可视化报告。全程你写的不是点击第几个元素而是做什么事——这正是Midscene.js视觉自动化测试脚本最直观的地方。上图是Midscene.js的Playground操作界面左侧是控制台可切换Action执行操作/ Query提取数据/ Assert断言验证三种模式右侧是当前页面的实时截图与AI识别出的UI上下文每一步做了什么一目了然。 不想写代码装个浏览器插件就能玩如果你想先体验用自然语言指挥AI操作网页连项目都不用建。Midscene.js提供Chrome扩展安装后在任意网页打开侧边栏直接输入指令即可比如type Midscene.js and click search在搜索框输入关键词并搜索click the login button点击登录按钮the page shows a navigation bar at the top断言页面顶部有导航栏如上图所示扩展面板就嵌在浏览器右侧AI会实时完成你交代的每一步操作。这种先在插件里验证指令、再复制到代码里跑自动化的流程能帮你以极低的成本迈过入门门槛。 同一套脚本手机平板桌面全通吃Midscene.js最有想象力的地方在于看截图这套机制与平台无关。Web、Android、iOS、HarmonyOS、Windows/macOS/Linux桌面应用全部走同一套视觉逻辑和相似的API。拿Android举例只要电脑连接了开启adb调试的手机再配合scrcpy投屏你就能在浏览器里实时看到手机画面并下发指令# 文件android-nav.yaml # 让 AI 在手机上打开地图应用并开始导航 android: deviceId: s4eys59 # 设备号可通过 adb devices 命令查询 tasks: - name: 地图导航 flow: - ai: 打开地图应用 - ai: 在搜索栏输入 杭州西湖点击搜索 - ai: 点击第一个搜索结果再点 路线 - ai: 点击 开始 按钮开始导航上图是Android Playground的实际效果右侧是手机屏幕的实时投影左侧是AI的规划与执行步骤列表。你会发现从Web切到移动端唯一的改动只是YAML顶部从page换成了android——这就是跨平台UI自动化测试最直观的体现。 跑完测试之后让AI交代刚才干了什么自动化测试最怕静默失败脚本跑完了但没人知道它到底做了什么、哪一步出了问题。Midscene.js每次执行都会自动生成一份图文报告把AI的思考过程完整摊开给你看。从上图可以看到报告包含完整的时间轴、每一步的规划Planning、界面理解Insight、元素定位Locate与点击Action耗时以及关键节点的页面截图。哪一步卡住了、为什么卡住扫一眼就清楚。报告还支持一键Open in Playground把失败现场直接搬回交互界面里排查。⚡ 更进一步把AI能力接进你的测试框架如果你已经有一套Playwright测试体系想把视觉能力接进去Midscene.js提供了完整SDK核心代码其实只有寥寥几行import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: true }); const page await browser.newPage(); await page.goto(https://www.course-demo.com); const agent new PlaywrightAgent(page); // 一句自然语言完成搜索 await agent.aiAct(在搜索框输入 AI 入门课 并回车); // 把页面里的课程信息提取成结构化数组 const courses await agent.aiQuery{ title: string; price: number }[]( 列出页面中的课程, ); // 视觉断言确认课程列表真的渲染出来了 await agent.aiAssert(页面显示了课程列表); await browser.close();这段代码演示了三件事aiAct负责执行操作aiQuery负责把页面内容提取成结构化数据aiAssert负责验证界面状态。三种能力组合起来你就能用人话编写完整的端到端测试并在CI里稳定复用。 还有几个值得一试的魔法除了上面这些Midscene.js还有几个加分项数据提取aiQuery可以直接把列表、表格、卡片信息变成JSON数组省掉写解析逻辑的功夫。智能等待类似aiWaitFor(购物车数量变为 2)的指令让AI等到条件满足再继续比固定sleep可靠得多。Agent自主执行配合Skills机制可以让AI Agent自己拆解任务、规划步骤并逐段执行适合探索性测试场景。不过要提醒一句视觉AI的定位并非100%精确复杂页面偶有误判。常规做法是AI跑主流程 少量关键断言兜底把它当作得力助手但关键节点仍保留验证。 写在最后它适合谁以及你现在该做什么如果你属于以下任一情况Midscene.js值得你花上一个周末被选择器维护折磨的测试工程师——视觉定位能大幅降低UI改动带来的脚本维护成本想给产品加自动化验收的非技术角色——YAML脚本加自然语言门槛低到几乎不需要编程需要在多端做回归的团队——Web、App、桌面一套思路复用学习成本被摊得很薄。而它的路线图同样清晰更聪明的视觉模型、更完整的Agent自主测试、更顺滑的团队协作能力。视觉驱动的自动化正在从新玩法变成UI测试的标配。现在轮到你了。装好依赖、配好模型从一份20行的YAML脚本开始让AI第一次替你看屏幕、点按钮——这30分钟花得一定值。如果想从源码层面研究它的实现可以拉取仓库动手探索git clone https://gitcode.com/GitHub_Trending/mid/midscene【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考