Midscene.js用自然语言做端到端 UI 测试最快 10 分钟跑通【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是面向 E2E 测试的 GUI Agent它只靠截图和多模态模型识别界面元素你写自然语言指令它替你完成点击、输入、断言和取数覆盖浏览器、Android、iOS 和桌面应用。它解决什么问题适合谁大多数 UI 自动化依赖 DOM 选择器一旦界面重构选择器就失效纯图标按钮、canvas 画布、原生 App 里的控件对读取 DOM 或无障碍树的工具来说是看不见的。Midscene 换了一条路它把当前屏幕截图交给具备 UI 定位能力的多模态模型如 Qwen、UI-TARS、Doubao-Seed 等也支持自托管开源模型人眼看得见的地方它就能定位和断言还能校验颜色、高亮、布局这类视觉状态。它适合三类人需要维护 E2E 用例的测试工程师不想追着改选择器做数据抓取和自动化脚本的开发者希望用一句话描述目标而不写定位代码以及需要验证用户实际看到什么的团队。不适合的场景是暂时无法准备多模态模型 API 的情况它每一步都要调模型以及追求单次操作极致低延迟的高频任务。第一次跑通4 步从零到报告 最短路径是装好仓库、配好模型、写一份 YAML、一条命令运行。第 1 步克隆仓库并构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build看到各包构建成功、packages/*/dist目录生成即为通过。构建工具链要求 Node.js 20.19、22.12 或 24见 package.json 的engines字段。第 2 步准备多模态模型配置export MIDSCENE_MODEL_BASE_URL你的模型服务地址/v1 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAME模型名称 export MIDSCENE_MODEL_FAMILY模型系列env | grep MIDSCENE能看到这四条变量即为成功。不同厂商模型的取值差异参考 模型配置文档。第 3 步写第一份 YAML 脚本page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息保存为bing-search.yaml。ai是交互指令aiAssert是断言都是自然语言。第 4 步运行并查看报告midscene ./bing-search.yaml终端出现Midscene - report file updated: .../midscene_run/report/xxx.html即为成功用浏览器打开这个 HTML能看到每一步的截图、耗时和操作轨迹失败步骤一目了然。核心能力逐个看 挑出四个对日常价值最大的能力按能做什么→怎么用→实际效果讲。自然语言三件套交互、取数、断言能做什么覆盖操作、提取、校验三类需求是全部平台的统一 API。 怎么用在代码里拿一个 Agent 实例后调用对应方法await agent.aiAct(点击登录按钮); const items await agent.aiQuery{ name: string; price: number }[]( 页面中的商品{name: string, price: number}[], ); await agent.aiAssert(页面顶部显示导航栏);实际效果aiAct会自动规划并执行多步操作aiQuery直接返回结构化数据aiAssert用视觉判断界面状态。三者配合一条登录流程或一次列表取数都不用写选择器。YAML 脚本 命令行运行器能做什么不搭测试框架也能跑完整流程Web、Android、iOS 换一下配置段即可。 怎么用page:/android:/ios:段描述目标tasks:段写流程midscene 脚本.yaml直接执行也支持.env文件管理模型密钥YAML 脚本运行器。 实际效果一份脚本跨平台复用新人不用理解框架就能读、改、跑。AI 规划与定位缓存能做什么把 AI 规划出的步骤和 Web 元素的定位信息存成缓存文件./midscene_run/cache命中时跳过模型调用。 怎么用给 Agent 配置cache: { id: my-cache-id }即默认读写模式CI 场景可用read-only策略并在测试通过后手动flushCache()。 实际效果官方文档给出的示例中同一脚本执行耗时从 51 秒降到 28 秒模型调用次数同步下降。注意查询类操作aiQuery、aiAssert永不缓存页面结构变化时缓存自动失效并回退到模型重算详见 缓存文档。可视化执行报告能做什么每次运行生成独立 HTML 报告含截图时间线、每步耗时、成功/失败标记。 怎么用默认开启终端直接打印报告路径接入 Playwright 时通过 reporter 可合并多个用例为一份报告。 实际效果排查失败不用翻日志对着截图时间线找那一步的现场即可。一个真实场景走一遍商品搜索与价格提取目标打开电商类页面搜索关键词等待结果加载提取商品标题和价格并断言结果符合预期。步骤基于 Playwright 集成指南 的示例流程用 Playwright 启动 Chromium 并打开目标页面等页面加载完成new PlaywrightAgent(page)创建 Agent——它就是页面级的 Midscene 代理aiAct(type Headphones in search box, hit Enter)完成输入搜索这一步不需要知道搜索框的选择器aiWaitFor(there is at least one headphone item on page)用自然语言等待条件替代固定 sleep结果出来就继续aiQuery({itemTitle: string, price: number}[])提取结构化商品列表aiBoolean(Is the price ... more than 1000?)做业务判断aiAssert(There is a category filter on the left)校验页面布局。结果终端打印出商品标题、价格、价格区间判断等字段报告文件里能看到从搜索框输入到结果列表的完整截图链。整个过程没有一行 CSS 选择器页面改版后只要元素长得不一样到认不出脚本才需要调整措辞。踩坑与解决⚠️ 三个高频问题每个都是现象→原因→解法。1. Android 设备识别不到adb devices 列表为空现象YAML 里配了deviceId运行报设备找不到。原因手机 USB 调试未开启或连接后弹出的授权框没有点允许。解法开发者选项中打开 USB 调试重新插线并在手机上确认允许调试再执行adb devices确认设备在列Android 平台指南 有完整检查清单。2. 下拉框点了没反应截图里看不到选项现象aiTap点了下拉框但报告截图里没有出现选项面板自然点不到目标项。原因页面用的是原生select展开面板由操作系统渲染不在浏览器截图范围内。解法Midscene 默认开启forceChromeSelectRendering强制由 Chrome 渲染下拉框使其进入截图若你显式关掉了它恢复为true即可。3. Ollama 本地模型返回 403现象Chrome Extension 或脚本里配 Ollama 时请求被拒。原因Ollama 默认不允许来自扩展/跨源地址的请求。解法设置环境变量OLLAMA_ORIGINS*后重启 Ollama 再试。接下来去哪 跑通第一份脚本后按需求选方向深入想控制成本和提速精读 缓存文档学会read-only策略和 CI 缓存提交想接入已有测试体系看 Playwright 集成 和 Puppeteer 集成把aiAct系列方法塞进现有用例想扩展到手机端和桌面端分别对照 Android、iOS、HarmonyOS 指南准备设备环境同一套 API 不变想看每个方法的完整参数查 API 参考以及正在演进的新版 Test Runner。Midscene 的价值在于把定位元素这件事从你的职责里拿走你负责描述目标和预期它负责看屏幕、动手、留证。先用一条 YAML 脚本建立信心再逐步把缓存、报告和多平台能力拼进自己的工作流即可。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Midscene.js：用自然语言做端到端 UI 测试，最快 10 分钟跑通
Midscene.js用自然语言做端到端 UI 测试最快 10 分钟跑通【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是面向 E2E 测试的 GUI Agent它只靠截图和多模态模型识别界面元素你写自然语言指令它替你完成点击、输入、断言和取数覆盖浏览器、Android、iOS 和桌面应用。它解决什么问题适合谁大多数 UI 自动化依赖 DOM 选择器一旦界面重构选择器就失效纯图标按钮、canvas 画布、原生 App 里的控件对读取 DOM 或无障碍树的工具来说是看不见的。Midscene 换了一条路它把当前屏幕截图交给具备 UI 定位能力的多模态模型如 Qwen、UI-TARS、Doubao-Seed 等也支持自托管开源模型人眼看得见的地方它就能定位和断言还能校验颜色、高亮、布局这类视觉状态。它适合三类人需要维护 E2E 用例的测试工程师不想追着改选择器做数据抓取和自动化脚本的开发者希望用一句话描述目标而不写定位代码以及需要验证用户实际看到什么的团队。不适合的场景是暂时无法准备多模态模型 API 的情况它每一步都要调模型以及追求单次操作极致低延迟的高频任务。第一次跑通4 步从零到报告 最短路径是装好仓库、配好模型、写一份 YAML、一条命令运行。第 1 步克隆仓库并构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build看到各包构建成功、packages/*/dist目录生成即为通过。构建工具链要求 Node.js 20.19、22.12 或 24见 package.json 的engines字段。第 2 步准备多模态模型配置export MIDSCENE_MODEL_BASE_URL你的模型服务地址/v1 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAME模型名称 export MIDSCENE_MODEL_FAMILY模型系列env | grep MIDSCENE能看到这四条变量即为成功。不同厂商模型的取值差异参考 模型配置文档。第 3 步写第一份 YAML 脚本page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息保存为bing-search.yaml。ai是交互指令aiAssert是断言都是自然语言。第 4 步运行并查看报告midscene ./bing-search.yaml终端出现Midscene - report file updated: .../midscene_run/report/xxx.html即为成功用浏览器打开这个 HTML能看到每一步的截图、耗时和操作轨迹失败步骤一目了然。核心能力逐个看 挑出四个对日常价值最大的能力按能做什么→怎么用→实际效果讲。自然语言三件套交互、取数、断言能做什么覆盖操作、提取、校验三类需求是全部平台的统一 API。 怎么用在代码里拿一个 Agent 实例后调用对应方法await agent.aiAct(点击登录按钮); const items await agent.aiQuery{ name: string; price: number }[]( 页面中的商品{name: string, price: number}[], ); await agent.aiAssert(页面顶部显示导航栏);实际效果aiAct会自动规划并执行多步操作aiQuery直接返回结构化数据aiAssert用视觉判断界面状态。三者配合一条登录流程或一次列表取数都不用写选择器。YAML 脚本 命令行运行器能做什么不搭测试框架也能跑完整流程Web、Android、iOS 换一下配置段即可。 怎么用page:/android:/ios:段描述目标tasks:段写流程midscene 脚本.yaml直接执行也支持.env文件管理模型密钥YAML 脚本运行器。 实际效果一份脚本跨平台复用新人不用理解框架就能读、改、跑。AI 规划与定位缓存能做什么把 AI 规划出的步骤和 Web 元素的定位信息存成缓存文件./midscene_run/cache命中时跳过模型调用。 怎么用给 Agent 配置cache: { id: my-cache-id }即默认读写模式CI 场景可用read-only策略并在测试通过后手动flushCache()。 实际效果官方文档给出的示例中同一脚本执行耗时从 51 秒降到 28 秒模型调用次数同步下降。注意查询类操作aiQuery、aiAssert永不缓存页面结构变化时缓存自动失效并回退到模型重算详见 缓存文档。可视化执行报告能做什么每次运行生成独立 HTML 报告含截图时间线、每步耗时、成功/失败标记。 怎么用默认开启终端直接打印报告路径接入 Playwright 时通过 reporter 可合并多个用例为一份报告。 实际效果排查失败不用翻日志对着截图时间线找那一步的现场即可。一个真实场景走一遍商品搜索与价格提取目标打开电商类页面搜索关键词等待结果加载提取商品标题和价格并断言结果符合预期。步骤基于 Playwright 集成指南 的示例流程用 Playwright 启动 Chromium 并打开目标页面等页面加载完成new PlaywrightAgent(page)创建 Agent——它就是页面级的 Midscene 代理aiAct(type Headphones in search box, hit Enter)完成输入搜索这一步不需要知道搜索框的选择器aiWaitFor(there is at least one headphone item on page)用自然语言等待条件替代固定 sleep结果出来就继续aiQuery({itemTitle: string, price: number}[])提取结构化商品列表aiBoolean(Is the price ... more than 1000?)做业务判断aiAssert(There is a category filter on the left)校验页面布局。结果终端打印出商品标题、价格、价格区间判断等字段报告文件里能看到从搜索框输入到结果列表的完整截图链。整个过程没有一行 CSS 选择器页面改版后只要元素长得不一样到认不出脚本才需要调整措辞。踩坑与解决⚠️ 三个高频问题每个都是现象→原因→解法。1. Android 设备识别不到adb devices 列表为空现象YAML 里配了deviceId运行报设备找不到。原因手机 USB 调试未开启或连接后弹出的授权框没有点允许。解法开发者选项中打开 USB 调试重新插线并在手机上确认允许调试再执行adb devices确认设备在列Android 平台指南 有完整检查清单。2. 下拉框点了没反应截图里看不到选项现象aiTap点了下拉框但报告截图里没有出现选项面板自然点不到目标项。原因页面用的是原生select展开面板由操作系统渲染不在浏览器截图范围内。解法Midscene 默认开启forceChromeSelectRendering强制由 Chrome 渲染下拉框使其进入截图若你显式关掉了它恢复为true即可。3. Ollama 本地模型返回 403现象Chrome Extension 或脚本里配 Ollama 时请求被拒。原因Ollama 默认不允许来自扩展/跨源地址的请求。解法设置环境变量OLLAMA_ORIGINS*后重启 Ollama 再试。接下来去哪 跑通第一份脚本后按需求选方向深入想控制成本和提速精读 缓存文档学会read-only策略和 CI 缓存提交想接入已有测试体系看 Playwright 集成 和 Puppeteer 集成把aiAct系列方法塞进现有用例想扩展到手机端和桌面端分别对照 Android、iOS、HarmonyOS 指南准备设备环境同一套 API 不变想看每个方法的完整参数查 API 参考以及正在演进的新版 Test Runner。Midscene 的价值在于把定位元素这件事从你的职责里拿走你负责描述目标和预期它负责看屏幕、动手、留证。先用一条 YAML 脚本建立信心再逐步把缓存、报告和多平台能力拼进自己的工作流即可。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考