2026/9/11 12:52:16
FEATURED · 精选文章 
Midscene.js 实践指南让 AI 驱动的跨平台 UI 自动化跑起来【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是面向 E2E 测试的 AI 驱动跨平台自动化框架。它不依赖页面结构靠截图加多模态模型定位元素你用自然语言描述操作即可Web、Android、iOS、HarmonyOS 和桌面端都能覆盖。 它能替你干什么只要任务能用一句自然语言讲清楚就可以交给 Midscene 去执行。你常交给它做的是下面这几件事。跑通一条回归流程。登录、搜索、加购、下单过去要一步步写选择器现在直接写打开站点并完成注册第一步模型自己规划点击路径。跨平台复用同一套流程。同一个购物流程需要在 Web、Android、iOS 上分别验证。你只换设备配置流程描述可以原样保留。验证用户真正看到的东西。不只判断DOM 节点存在不存在还能断言价格是否高亮、布局是否正常这些检查直接基于截图完成。 第一次跑起来最小路径只有三步准备模型配置、选一个起点、看报告判断成败。第一步准备模型配置。Midscene 需要一个有 UI 定位能力的多模态模型Qwen、豆包、GLM、Gemini、UI-TARS 都可以。导出下面四个变量即可export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed第二步选一个起点。想立刻体验安装 Chrome 扩展就行不用写任何项目代码。想从源码运行先执行git clone https://gitcode.com/GitHub_Trending/mid/midscene再依次运行pnpm install和pnpm build。第三步判断成功。首条指令跑完后midscene_run/目录会生成报告文件。用浏览器打开能看到分步时间线和截图说明模型真的点到了正确的按钮。 三种典型用法按复杂度分三种用法浏览器里说人话、YAML 脚本、接入代码工程。用法一浏览器里直接下指令。打开 Midscene 扩展的侧边栏输入点击登录按钮。它等价于调用aiAct模型自己规划并执行。也可以让它提取数据aiQuery或检查界面aiAssert。用法二YAML 脚本。把流程写进一个.yaml文件用命令行运行不需要搭测试框架page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - name: 检查结果 flow: - aiAssert: 结果中展示了天气信息用法三接进自己的测试工程。如果你已经用 Playwright 或 Puppeteer给脚本挂一个 Agent测试代码里这样调用await agent.aiAct(搜索耳机并把第一件加入购物车); const items await agent.aiQuery Array{ name: string; price: number } (购物车中的商品{name: string, price: number}[]); await agent.aiAssert(购物车中有一件商品并且页面显示了小计金额); 一个完整案例以 Android 上的一条真实回归流程为例四步能跑完并产出报告。背景。某车类 App 每周发版每次都要人工验证启动应用 → 搜索车型 → 查看参数页。目标。把这条流程变成一条命令回归通过就放行出问题立刻报红并附上报告给发版会议。步骤。用 adb 连接设备确认模型环境变量已导出写一份 Android 的 YAML把流程描述写成自然语言句子在 agent 配置里开启缓存并指定固定的缓存 ID命令行运行 YAML让它生成报告结果。报告里能看到每一步的截图和耗时第二次执行命中缓存整条流程明显变快。可优化点。参数标签是个小按钮容易点偏可单独开启deepLocate精确定位CI 环境建议改用只读缓存策略避免并发写缓存互相覆盖。⚡ 把成本与速度调优起来核心思路只有一条重复的交给缓存精确的用即时 API。问题同一流程反复跑每次都重新做 AI 规划费用和耗时一起涨。手段开启缓存。AI 规划结果以指令为键存下来Web 场景还会缓存元素 XPath 定位。 收益官方示例里同一条流程从 51 秒降到 28 秒缓存失效时自动回退给模型重新规划不会卡死。问题点一下、填一次这类单步操作却走了多步规划。手段固定单步操作用aiTap、aiInput这类即时交互 API把aiAct留给路径不确定的多步任务。 收益一次调用完成一个动作token 和时间都省下来。问题小元素、易混淆元素定位不准。手段在单次调用上开deepLocate更精准定位或deepThink更强的任务拆解。 收益定位准确率提升代价是每次多一轮模型调用按需使用。缓存文件落在midscene_run/cache目录扩展名.cache.yaml可以直接查看和管理。 高频问题速查最常遇到三个问题每个按三行讲清楚。设备连接超时现象adb devices看不到设备或设备状态显示 offline原因USB 调试没开或设备上的授权弹窗没点确认解决开发者选项里开启 USB 调试在设备上确认授权后重试本地 Ollama 模型报 403现象扩展或脚本调用模型失败返回 403原因Ollama 默认禁止来自扩展的跨域访问解决设置环境变量OLLAMA_ORIGINS*后重启 Ollama扩展提示 Cannot access a chrome-extension:// URL现象扩展里第一次运行就报错信息含 chrome-extension原因其他扩展往页面注入了 iframe 或脚本产生冲突解决开发者工具里按扩展 ID 找到注入来源禁用后刷新页面 继续深入想改而不只是用按这个顺序读源码。核心引擎Agent 主循环、任务调度与报告生成AI 模型管理模型配置与调用策略YAML 执行脚本如何变成任务Web 集成Playwright、Puppeteer 适配与 CDP 桥接Android 支持、iOS 支持、桌面端支持设备接入与输入驱动报告应用、Chrome 扩展、交互式 Playground学习建议先读基本概念理解 aiAct、aiQuery、aiAssert 三类 API 的分工再读缓存文档最后试Playwright 集成。Midscene.js 的思路不复杂用截图代替选择器用自然语言目标代替逐步脚本。对测试套件的维护成本来说值得一试。挑一条你最常回归的流程把选择器改写成一句自然语言先在 Chrome 扩展里把它跑通。【免费下载链接】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/midsceneMidscene.js 是面向 E2E 测试的 AI 驱动跨平台自动化框架。它不依赖页面结构靠截图加多模态模型定位元素你用自然语言描述操作即可Web、Android、iOS、HarmonyOS 和桌面端都能覆盖。 它能替你干什么只要任务能用一句自然语言讲清楚就可以交给 Midscene 去执行。你常交给它做的是下面这几件事。跑通一条回归流程。登录、搜索、加购、下单过去要一步步写选择器现在直接写打开站点并完成注册第一步模型自己规划点击路径。跨平台复用同一套流程。同一个购物流程需要在 Web、Android、iOS 上分别验证。你只换设备配置流程描述可以原样保留。验证用户真正看到的东西。不只判断DOM 节点存在不存在还能断言价格是否高亮、布局是否正常这些检查直接基于截图完成。 第一次跑起来最小路径只有三步准备模型配置、选一个起点、看报告判断成败。第一步准备模型配置。Midscene 需要一个有 UI 定位能力的多模态模型Qwen、豆包、GLM、Gemini、UI-TARS 都可以。导出下面四个变量即可export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed第二步选一个起点。想立刻体验安装 Chrome 扩展就行不用写任何项目代码。想从源码运行先执行git clone https://gitcode.com/GitHub_Trending/mid/midscene再依次运行pnpm install和pnpm build。第三步判断成功。首条指令跑完后midscene_run/目录会生成报告文件。用浏览器打开能看到分步时间线和截图说明模型真的点到了正确的按钮。 三种典型用法按复杂度分三种用法浏览器里说人话、YAML 脚本、接入代码工程。用法一浏览器里直接下指令。打开 Midscene 扩展的侧边栏输入点击登录按钮。它等价于调用aiAct模型自己规划并执行。也可以让它提取数据aiQuery或检查界面aiAssert。用法二YAML 脚本。把流程写进一个.yaml文件用命令行运行不需要搭测试框架page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - name: 检查结果 flow: - aiAssert: 结果中展示了天气信息用法三接进自己的测试工程。如果你已经用 Playwright 或 Puppeteer给脚本挂一个 Agent测试代码里这样调用await agent.aiAct(搜索耳机并把第一件加入购物车); const items await agent.aiQuery Array{ name: string; price: number } (购物车中的商品{name: string, price: number}[]); await agent.aiAssert(购物车中有一件商品并且页面显示了小计金额); 一个完整案例以 Android 上的一条真实回归流程为例四步能跑完并产出报告。背景。某车类 App 每周发版每次都要人工验证启动应用 → 搜索车型 → 查看参数页。目标。把这条流程变成一条命令回归通过就放行出问题立刻报红并附上报告给发版会议。步骤。用 adb 连接设备确认模型环境变量已导出写一份 Android 的 YAML把流程描述写成自然语言句子在 agent 配置里开启缓存并指定固定的缓存 ID命令行运行 YAML让它生成报告结果。报告里能看到每一步的截图和耗时第二次执行命中缓存整条流程明显变快。可优化点。参数标签是个小按钮容易点偏可单独开启deepLocate精确定位CI 环境建议改用只读缓存策略避免并发写缓存互相覆盖。⚡ 把成本与速度调优起来核心思路只有一条重复的交给缓存精确的用即时 API。问题同一流程反复跑每次都重新做 AI 规划费用和耗时一起涨。手段开启缓存。AI 规划结果以指令为键存下来Web 场景还会缓存元素 XPath 定位。 收益官方示例里同一条流程从 51 秒降到 28 秒缓存失效时自动回退给模型重新规划不会卡死。问题点一下、填一次这类单步操作却走了多步规划。手段固定单步操作用aiTap、aiInput这类即时交互 API把aiAct留给路径不确定的多步任务。 收益一次调用完成一个动作token 和时间都省下来。问题小元素、易混淆元素定位不准。手段在单次调用上开deepLocate更精准定位或deepThink更强的任务拆解。 收益定位准确率提升代价是每次多一轮模型调用按需使用。缓存文件落在midscene_run/cache目录扩展名.cache.yaml可以直接查看和管理。 高频问题速查最常遇到三个问题每个按三行讲清楚。设备连接超时现象adb devices看不到设备或设备状态显示 offline原因USB 调试没开或设备上的授权弹窗没点确认解决开发者选项里开启 USB 调试在设备上确认授权后重试本地 Ollama 模型报 403现象扩展或脚本调用模型失败返回 403原因Ollama 默认禁止来自扩展的跨域访问解决设置环境变量OLLAMA_ORIGINS*后重启 Ollama扩展提示 Cannot access a chrome-extension:// URL现象扩展里第一次运行就报错信息含 chrome-extension原因其他扩展往页面注入了 iframe 或脚本产生冲突解决开发者工具里按扩展 ID 找到注入来源禁用后刷新页面 继续深入想改而不只是用按这个顺序读源码。核心引擎Agent 主循环、任务调度与报告生成AI 模型管理模型配置与调用策略YAML 执行脚本如何变成任务Web 集成Playwright、Puppeteer 适配与 CDP 桥接Android 支持、iOS 支持、桌面端支持设备接入与输入驱动报告应用、Chrome 扩展、交互式 Playground学习建议先读基本概念理解 aiAct、aiQuery、aiAssert 三类 API 的分工再读缓存文档最后试Playwright 集成。Midscene.js 的思路不复杂用截图代替选择器用自然语言目标代替逐步脚本。对测试套件的维护成本来说值得一试。挑一条你最常回归的流程把选择器改写成一句自然语言先在 Chrome 扩展里把它跑通。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
