Midscene.js 快速上手从模型配置到真机操作的完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneE2E 测试不用写一行选择器也能跑起来吗Midscene.js 是一个 GUI Agent 驱动的 AI 自动化测试框架GUI Agent 指能看屏幕、自己做操作的 AI 程序你用自然语言描述任务它截图看屏、自己规划步骤再完成点击、输入和结果验证。读完这篇你能在浏览器里发出第一条自动化指令连上 Android 真机并让脚本接管已登录的桌面 Chrome全程不需要 clone 仓库。先搞懂 Midscene.js 是什么靠看来定位元素传统自动化依赖 DOM 选择器Midscene 让多模态模型看截图找元素。只有图标的按钮、canvas 里画的内容它点得到。一套 API 打通多端同一个aiAct执行操作和aiAssert断言界面在 Web、Android、iOS、桌面端通用。报告随跑随有每次执行都会生成 HTML 报告每步截图、AI 决策过程、耗时都有记录挂了哪里一眼可见。快速上手5 分钟浏览器路径最简单的入口是 Chrome 扩展它是内置的 Playground不用搭任何项目。配模型相当于给 AI 发工牌哪个服务、叫什么名、用什么密钥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把your-api-key换成你自己的密钥。以上是豆包示例千问、GLM 等其他模型见支持的模型与配置。装扩展从 Chrome 应用商店安装 Midscene装完浏览器右侧扩展列表里出现它的图标即安装成功。贴配置在扩展列表里点开它浏览器右侧出现侧边栏点侧边栏的设置图标把上一步 4 个值粘贴进去保存。发指令打开任意网页在侧边栏输入点击登录按钮并运行。AI 会在侧边栏里逐步展示规划并执行点击看到动作发生即成功。看报告执行完自动生成 HTML 报告逐步查看截图和断言结果回放整段操作。扩展与midscene/webSDK 共享同一套代码实现侧边栏里跑通的指令换成脚本行为完全一致。两个进阶方向 连 Android 真机让 AI 操作手机什么场景用你想让 AI 操作手机 App而不只是网页。怎么做手机开发者选项开启 USB 调试并用数据线连电脑执行adb devices -l终端出现设备序列号即连接成功执行npx --yes midscene/android-playground在窗口齿轮图标里粘贴 API Key 配置输入打开浏览器搜索 SU7这类指令做完得到什么AI 在手机上自动执行报告里每次点击、滚动都有截图留痕。跑通后照着Android 平台指南把同样指令写进正式测试脚本即可。 桥接模式接管已登录的 Chrome什么场景用测试卡在登录态上。桥接模式让本地脚本直接控制桌面 Chrome复用 cookies 和插件状态。怎么做项目里执行npm install midscene/web tsx -D再写一个小脚本import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.aiAct(type AI 101 and hit Enter); await agent.aiAssert(there are some search results); await agent.destroy();用npx tsx demo-new-tab.ts运行扩展弹出确认窗口点 Allow 后 Chrome 自动新开标签页交给脚本你还能在旁边手动补操作这就是自动化领域说的人在回路。做完得到什么脚本跑在你自己的登录浏览器里省去重复登录。YAML 脚本里加一行bridgeMode: newTabWithUrl也能接管。排障速查5 个常见现象adb devices只显示unauthorized→ 设备没授权 → 手机上点一次允许 USB 调试报Cannot access a chrome-extension:// URL→ 其他扩展注入脚本产生冲突 → 在开发者工具里找到扩展 ID到chrome://extensions页面禁用它Ollama 本地模型报 403 → 来源被限制 → 设环境变量OLLAMA_ORIGINS*配了缓存却没有缓存文件 → 没配id→ 配置cache: { id: 任务名 }本地命中缓存、CI 全部重算 → 缓存目录没进仓库 → 把./midscene_run/cache目录提交上去配置参数速查表参数推荐值何时用MIDSCENE_MODEL_NAME/FAMILY支持 UI 定位的多模态模型如 Doubao-Seed-2.1-turbo所有场景必配MIDSCENE_MODEL_BASE_URL/API_KEY对应模型供应商的地址与密钥与模型名配套填写cache{ id: 任务名 }调试期复用 AI 规划省模型调用cache.strategyread-only生产环境防缓存被改写bridgeModenewTabWithUrlYAML 脚本接管本地 Chrome延伸学习快速开始指南覆盖扩展安装、三类指令示例和各平台入口适合第一次跑通全流程的新手缓存机制说明讲清读写、只读、只写三种策略的取舍适合想降低模型开销和执行耗时的人桥接模式详解含远程访问配置与 YAML 脚本用法适合桌面浏览器自动化进阶【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Midscene.js 快速上手：从模型配置到真机操作的完整指南
Midscene.js 快速上手从模型配置到真机操作的完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneE2E 测试不用写一行选择器也能跑起来吗Midscene.js 是一个 GUI Agent 驱动的 AI 自动化测试框架GUI Agent 指能看屏幕、自己做操作的 AI 程序你用自然语言描述任务它截图看屏、自己规划步骤再完成点击、输入和结果验证。读完这篇你能在浏览器里发出第一条自动化指令连上 Android 真机并让脚本接管已登录的桌面 Chrome全程不需要 clone 仓库。先搞懂 Midscene.js 是什么靠看来定位元素传统自动化依赖 DOM 选择器Midscene 让多模态模型看截图找元素。只有图标的按钮、canvas 里画的内容它点得到。一套 API 打通多端同一个aiAct执行操作和aiAssert断言界面在 Web、Android、iOS、桌面端通用。报告随跑随有每次执行都会生成 HTML 报告每步截图、AI 决策过程、耗时都有记录挂了哪里一眼可见。快速上手5 分钟浏览器路径最简单的入口是 Chrome 扩展它是内置的 Playground不用搭任何项目。配模型相当于给 AI 发工牌哪个服务、叫什么名、用什么密钥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把your-api-key换成你自己的密钥。以上是豆包示例千问、GLM 等其他模型见支持的模型与配置。装扩展从 Chrome 应用商店安装 Midscene装完浏览器右侧扩展列表里出现它的图标即安装成功。贴配置在扩展列表里点开它浏览器右侧出现侧边栏点侧边栏的设置图标把上一步 4 个值粘贴进去保存。发指令打开任意网页在侧边栏输入点击登录按钮并运行。AI 会在侧边栏里逐步展示规划并执行点击看到动作发生即成功。看报告执行完自动生成 HTML 报告逐步查看截图和断言结果回放整段操作。扩展与midscene/webSDK 共享同一套代码实现侧边栏里跑通的指令换成脚本行为完全一致。两个进阶方向 连 Android 真机让 AI 操作手机什么场景用你想让 AI 操作手机 App而不只是网页。怎么做手机开发者选项开启 USB 调试并用数据线连电脑执行adb devices -l终端出现设备序列号即连接成功执行npx --yes midscene/android-playground在窗口齿轮图标里粘贴 API Key 配置输入打开浏览器搜索 SU7这类指令做完得到什么AI 在手机上自动执行报告里每次点击、滚动都有截图留痕。跑通后照着Android 平台指南把同样指令写进正式测试脚本即可。 桥接模式接管已登录的 Chrome什么场景用测试卡在登录态上。桥接模式让本地脚本直接控制桌面 Chrome复用 cookies 和插件状态。怎么做项目里执行npm install midscene/web tsx -D再写一个小脚本import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.aiAct(type AI 101 and hit Enter); await agent.aiAssert(there are some search results); await agent.destroy();用npx tsx demo-new-tab.ts运行扩展弹出确认窗口点 Allow 后 Chrome 自动新开标签页交给脚本你还能在旁边手动补操作这就是自动化领域说的人在回路。做完得到什么脚本跑在你自己的登录浏览器里省去重复登录。YAML 脚本里加一行bridgeMode: newTabWithUrl也能接管。排障速查5 个常见现象adb devices只显示unauthorized→ 设备没授权 → 手机上点一次允许 USB 调试报Cannot access a chrome-extension:// URL→ 其他扩展注入脚本产生冲突 → 在开发者工具里找到扩展 ID到chrome://extensions页面禁用它Ollama 本地模型报 403 → 来源被限制 → 设环境变量OLLAMA_ORIGINS*配了缓存却没有缓存文件 → 没配id→ 配置cache: { id: 任务名 }本地命中缓存、CI 全部重算 → 缓存目录没进仓库 → 把./midscene_run/cache目录提交上去配置参数速查表参数推荐值何时用MIDSCENE_MODEL_NAME/FAMILY支持 UI 定位的多模态模型如 Doubao-Seed-2.1-turbo所有场景必配MIDSCENE_MODEL_BASE_URL/API_KEY对应模型供应商的地址与密钥与模型名配套填写cache{ id: 任务名 }调试期复用 AI 规划省模型调用cache.strategyread-only生产环境防缓存被改写bridgeModenewTabWithUrlYAML 脚本接管本地 Chrome延伸学习快速开始指南覆盖扩展安装、三类指令示例和各平台入口适合第一次跑通全流程的新手缓存机制说明讲清读写、只读、只写三种策略的取舍适合想降低模型开销和执行耗时的人桥接模式详解含远程访问配置与 YAML 脚本用法适合桌面浏览器自动化进阶【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
 应用部署到 Vercel 并配置 bunVersion)
