Midscene.js 上手指南三步跑通你的第一次 AI 视觉驱动 UI 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene网页上一个按钮换了样式写好的选择器就全部失效UI 自动化脚本随之报废。Midscene.js 是一个面向 E2E 测试的 GUI Agent它让 AI 直接看屏幕截图来定位元素、执行操作、验证结果你用自然语言描述测试意图不必再维护一堆脆弱的选择器。同一套 Agent API 覆盖 Web、Android、iOS、HarmonyOS 和桌面端。选择器失效时换一种测试思路传统 UI 测试依赖选择器class 名一变、结构一调脚本就要跟着改。更麻烦的是纯图标按钮、canvas绘制的内容、跨域 iframe 里的元素写选择器本身就很难。Midscene 的做法仿照人的操作习惯观察屏幕根据看到的内容操作再检查界面上可见的结果。它根据元素的外观和位置做定位完成点击、输入、滚动断言同样是看一眼屏幕用自然语言描述预期外观即可例如选中的套餐带有蓝色边框和勾选标记。第一次体验在浏览器里跑通一条指令最快的路径是 Chrome 扩展版 Playground不需要搭项目安装 Midscene Chrome Extension在扩展侧边栏的设置页粘贴一组多模态模型配置需要一个具备 UI 定位能力的视觉模型参考 快速开始文档打开任意网页在侧边栏输入自然语言指令比如点击登录按钮、提取页面中的商品列表、页面顶部显示导航栏观察 AI 如何理解页面、执行操作并返回结果。成功的样子是你不用写任何代码AI 自己找到按钮并点击或者按你要求的结构返回了页面数据。想从源码跑完整项目则执行git clone https://gitcode.com/GitHub_Trending/mid/midscene克隆后在根目录执行pnpm install即可开始浏览各平台模块。 一套 API所有平台Android 真机开 USB 调试就能连手机开启 USB 调试含安全设置装好 adb 并用adb devices -l确认设备可见然后启动 Playgroundnpx --yes midscene/android-playground在窗口里的齿轮按钮中粘贴 API Key 配置即可在真机上输入自然语言指令。文档中的演示任务打开懂车帝搜索 SU7 车型查看参数配置就是直接对真实手机执行的。Playground 与midscene/androidSDK 共享同一套实现你在界面上验证过的流程写成脚本行为完全一致。各平台细节见 Android 指南。从 Playground 到测试脚本在浏览器里跑通的指令可以直接搬进 Playwright 脚本。Agent 完成操作后还能等待条件、断言结果await agent.aiAct(搜索耳机然后将结果筛选为价格低于 100 美元); await agent.aiWaitFor(筛选后的搜索结果已显示); await agent.aiAssert(搜索结果中的每件商品价格都低于 100 美元); 测试跑完你得到什么可回放的 HTML 报告每次运行都会生成 HTML 报告打开后可以像回放录像一样逐步查看每一步的截图、元素定位框、AI 的决策过程、操作与断言结果失败在哪一步一目了然。运行产物报告、日志、缓存统一放在项目下的midscene_run目录包含report/、log/、cache/三个子目录。⚙️ 跑生产前的三条实用建议模型先选一个简单的先用一个能定位 UI 的多模态模型把流程跑通再考虑按场景组合规划模型与视觉模型文档有专门的模型策略说明。重复任务开缓存相同指令在相似页面上重复执行时命中缓存可跳过模型调用。官方文档给出的案例中同一段脚本执行时间从 51 秒降到 28 秒详见缓存文档。固定操作用即时接口确定的动作直接用aiTap、aiInput比走完整规划的aiAct更快适当调低截图分辨率也能降低 token 消耗。⚠️ 新手最容易踩的坑扩展冲突运行时报Cannot access a chrome-extension:// URL of different extension通常是其他扩展向页面注入了 iframe 或脚本。按文档找到冲突扩展的 ID 并禁用后刷新页面即可。本地 Ollama 报 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型。Android 连不上设备先确认 USB 调试和USB 调试安全设置都已开启再检查 adb 驱动adb devices -l能看到设备才算连通。midscene_run目录出现在项目里这是正常的运行产物目录介意位置的话用MIDSCENE_RUN_DIR环境变量改到别处。 下一步先做这两件事第一件事装好 Chrome 扩展在一个你熟悉的网页上各跑一条aiAct、aiQuery和aiAssert体会自然语言变操作的完整闭环。第二件事把报告打开回放一遍看 AI 是如何定位元素的这会直接影响你之后写断言的措辞。更多平台接入和 API 细节都在仓库内的文档站中核心能力实现集中在packages/core的 Agent 与模型适配层。官方文档apps/site/docs/ 核心源码packages/core/【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 上手指南：三步跑通你的第一次 AI 视觉驱动 UI 测试
Midscene.js 上手指南三步跑通你的第一次 AI 视觉驱动 UI 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene网页上一个按钮换了样式写好的选择器就全部失效UI 自动化脚本随之报废。Midscene.js 是一个面向 E2E 测试的 GUI Agent它让 AI 直接看屏幕截图来定位元素、执行操作、验证结果你用自然语言描述测试意图不必再维护一堆脆弱的选择器。同一套 Agent API 覆盖 Web、Android、iOS、HarmonyOS 和桌面端。选择器失效时换一种测试思路传统 UI 测试依赖选择器class 名一变、结构一调脚本就要跟着改。更麻烦的是纯图标按钮、canvas绘制的内容、跨域 iframe 里的元素写选择器本身就很难。Midscene 的做法仿照人的操作习惯观察屏幕根据看到的内容操作再检查界面上可见的结果。它根据元素的外观和位置做定位完成点击、输入、滚动断言同样是看一眼屏幕用自然语言描述预期外观即可例如选中的套餐带有蓝色边框和勾选标记。第一次体验在浏览器里跑通一条指令最快的路径是 Chrome 扩展版 Playground不需要搭项目安装 Midscene Chrome Extension在扩展侧边栏的设置页粘贴一组多模态模型配置需要一个具备 UI 定位能力的视觉模型参考 快速开始文档打开任意网页在侧边栏输入自然语言指令比如点击登录按钮、提取页面中的商品列表、页面顶部显示导航栏观察 AI 如何理解页面、执行操作并返回结果。成功的样子是你不用写任何代码AI 自己找到按钮并点击或者按你要求的结构返回了页面数据。想从源码跑完整项目则执行git clone https://gitcode.com/GitHub_Trending/mid/midscene克隆后在根目录执行pnpm install即可开始浏览各平台模块。 一套 API所有平台Android 真机开 USB 调试就能连手机开启 USB 调试含安全设置装好 adb 并用adb devices -l确认设备可见然后启动 Playgroundnpx --yes midscene/android-playground在窗口里的齿轮按钮中粘贴 API Key 配置即可在真机上输入自然语言指令。文档中的演示任务打开懂车帝搜索 SU7 车型查看参数配置就是直接对真实手机执行的。Playground 与midscene/androidSDK 共享同一套实现你在界面上验证过的流程写成脚本行为完全一致。各平台细节见 Android 指南。从 Playground 到测试脚本在浏览器里跑通的指令可以直接搬进 Playwright 脚本。Agent 完成操作后还能等待条件、断言结果await agent.aiAct(搜索耳机然后将结果筛选为价格低于 100 美元); await agent.aiWaitFor(筛选后的搜索结果已显示); await agent.aiAssert(搜索结果中的每件商品价格都低于 100 美元); 测试跑完你得到什么可回放的 HTML 报告每次运行都会生成 HTML 报告打开后可以像回放录像一样逐步查看每一步的截图、元素定位框、AI 的决策过程、操作与断言结果失败在哪一步一目了然。运行产物报告、日志、缓存统一放在项目下的midscene_run目录包含report/、log/、cache/三个子目录。⚙️ 跑生产前的三条实用建议模型先选一个简单的先用一个能定位 UI 的多模态模型把流程跑通再考虑按场景组合规划模型与视觉模型文档有专门的模型策略说明。重复任务开缓存相同指令在相似页面上重复执行时命中缓存可跳过模型调用。官方文档给出的案例中同一段脚本执行时间从 51 秒降到 28 秒详见缓存文档。固定操作用即时接口确定的动作直接用aiTap、aiInput比走完整规划的aiAct更快适当调低截图分辨率也能降低 token 消耗。⚠️ 新手最容易踩的坑扩展冲突运行时报Cannot access a chrome-extension:// URL of different extension通常是其他扩展向页面注入了 iframe 或脚本。按文档找到冲突扩展的 ID 并禁用后刷新页面即可。本地 Ollama 报 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型。Android 连不上设备先确认 USB 调试和USB 调试安全设置都已开启再检查 adb 驱动adb devices -l能看到设备才算连通。midscene_run目录出现在项目里这是正常的运行产物目录介意位置的话用MIDSCENE_RUN_DIR环境变量改到别处。 下一步先做这两件事第一件事装好 Chrome 扩展在一个你熟悉的网页上各跑一条aiAct、aiQuery和aiAssert体会自然语言变操作的完整闭环。第二件事把报告打开回放一遍看 AI 是如何定位元素的这会直接影响你之后写断言的措辞。更多平台接入和 API 细节都在仓库内的文档站中核心能力实现集中在packages/core的 Agent 与模型适配层。官方文档apps/site/docs/ 核心源码packages/core/【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考