5 分钟跑通第一次界面自动化Midscene.js 视觉自动化入门路径【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个视觉驱动的 E2E 测试框架你用自然语言描述操作它靠识别界面截图来执行动作、提取数据不用写一行选择器。本文带你从安装走到跑通第一个脚本最后附上一份常见报错的排查办法。传统 UI 自动化的选择器为什么总是坏用传统方式做界面自动化DOM 选择器或坐标录制痛点集中在三处选择器难维护界面一改版选择器就失效得逐个翻代码修补非语义元素是盲区只有图标的按钮、Canvas 渲染内容、跨域 iframeDOM 工具全都看不见断言不了视觉层只能检查节点是否存在检查不了颜色、布局、高亮状态是否正确。Midscene 的思路是把问题反过来不看代码看截图。人眼能看到的地方AI 就能点到。你写的都是自然语言定位交给多模态模型完成维护成本随之大幅下降。5 分钟跑通第一次自动化安装命令行工具CLI 需要 Node.js 20.19、22.12 或 24建议全局安装npm i -g midscene/cli配置 AI 模型Midscene 依赖一个能看图的多模态模型。在工具运行目录下建.env文件填四个变量即可完整配置见支持的模型与配置MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的API密钥 MIDSCENE_MODEL_NAME模型名称 MIDSCENE_MODEL_FAMILY模型系列注意.env要和命令运行目录一致放在 YAML 文件旁边是没用的。写第一个 YAML 脚本page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息再执行midscene ./bing-search.yaml终端会打印进度结束后生成一份可交互的可视化报告——每步截图、耗时和 AI 的推理都记录在里面。✅ 完整的首次上手步骤可以参考官方快速开始文档。三个最常用的用法干活、取数、校验aiAct让 AI 自己规划着干你能得到写一个目标AI 自动拆解步骤、定位元素并连续执行直到完成。最短示例await agent.aiAct(搜索耳机把第一件商品加入购物车)。坑aiAct每一步都在重新规划耗时和 token 消耗更高。单步动作如点击登录按钮用即时的aiTap、aiInput更快更省。aiQuery / aiAssert取数据、查结果aiQuery从画面里提取结构化数据aiAssert检查一个条件不成立就抛错。比如aiQuery(页面中的商品{name: string, price: number}[])能直接拿到可用的 JSON 数组。注意在提示词里把预期数据结构写清楚否则返回的字段结构会飘。桥接模式本地脚本控制你自己的 Chrome你能得到脚本直接复用本地浏览器的登录态和插件不用重新登录。装好 Midscene Chrome 扩展后把模型配置写在终端环境变量里脚本端两行代码即可附着到当前标签页const agent new AgentOverChromeBridge(); await agent.connectCurrentTab();坑首次连接时扩展会弹确认窗不点 Allow脚本会一直卡住等连接。端到端案例让 AI 替你处理飞书消息场景在 Playground 的 Command input 里输入自然语言指令比如打开飞书、搜索联系人、发送消息由 AI 在手机上连续执行。消息处理这类多步操作是移动端最有代表性的用法。步骤很简单手机开启 USB 调试用数据线连上电脑确认 adb 已识别设备按 Android 平台指南启动 Playground浏览器里会出现实时投屏在左侧输入框键入多步指令回车后 AI 开始逐步执行可随时 Stop 中止。跑完后报告页面按时间线记录每一步的规划、定位与动作耗时点Open in Playground还能回放进每一步精确追溯 AI 每次点击的决策依据常见报错对照表与排查动作错误现象可能原因排查动作点击位置偏移、点不中模型配置不匹配、截图分辨率不生效核对MIDSCENE_MODEL_FAMILY换 UI 定位能力更强的模型扩展报Cannot access a chrome-extension:// URL其他扩展向页面注入了 iframe开发者工具里找到对应扩展 ID禁用后刷新重试CLI 提示Unsupported Node.js versionNode 版本过旧升级到 20.19 / 22.12 / 24 后重装 CLIAndroid 找不到设备未开 USB 调试、adb 未连接执行adb devices检查首次连接在手机上点允许Midscene 的定位能力取决于多模态模型单步成本高于选择器式自动化更适合回归验证、跨端比对和复杂界面操作这类场景批量执行时建议配合缓存功能控制模型调用开销。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 5 分钟跑通第一次界面自动化：Midscene.js 视觉自动化入门路径
5 分钟跑通第一次界面自动化Midscene.js 视觉自动化入门路径【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个视觉驱动的 E2E 测试框架你用自然语言描述操作它靠识别界面截图来执行动作、提取数据不用写一行选择器。本文带你从安装走到跑通第一个脚本最后附上一份常见报错的排查办法。传统 UI 自动化的选择器为什么总是坏用传统方式做界面自动化DOM 选择器或坐标录制痛点集中在三处选择器难维护界面一改版选择器就失效得逐个翻代码修补非语义元素是盲区只有图标的按钮、Canvas 渲染内容、跨域 iframeDOM 工具全都看不见断言不了视觉层只能检查节点是否存在检查不了颜色、布局、高亮状态是否正确。Midscene 的思路是把问题反过来不看代码看截图。人眼能看到的地方AI 就能点到。你写的都是自然语言定位交给多模态模型完成维护成本随之大幅下降。5 分钟跑通第一次自动化安装命令行工具CLI 需要 Node.js 20.19、22.12 或 24建议全局安装npm i -g midscene/cli配置 AI 模型Midscene 依赖一个能看图的多模态模型。在工具运行目录下建.env文件填四个变量即可完整配置见支持的模型与配置MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的API密钥 MIDSCENE_MODEL_NAME模型名称 MIDSCENE_MODEL_FAMILY模型系列注意.env要和命令运行目录一致放在 YAML 文件旁边是没用的。写第一个 YAML 脚本page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息再执行midscene ./bing-search.yaml终端会打印进度结束后生成一份可交互的可视化报告——每步截图、耗时和 AI 的推理都记录在里面。✅ 完整的首次上手步骤可以参考官方快速开始文档。三个最常用的用法干活、取数、校验aiAct让 AI 自己规划着干你能得到写一个目标AI 自动拆解步骤、定位元素并连续执行直到完成。最短示例await agent.aiAct(搜索耳机把第一件商品加入购物车)。坑aiAct每一步都在重新规划耗时和 token 消耗更高。单步动作如点击登录按钮用即时的aiTap、aiInput更快更省。aiQuery / aiAssert取数据、查结果aiQuery从画面里提取结构化数据aiAssert检查一个条件不成立就抛错。比如aiQuery(页面中的商品{name: string, price: number}[])能直接拿到可用的 JSON 数组。注意在提示词里把预期数据结构写清楚否则返回的字段结构会飘。桥接模式本地脚本控制你自己的 Chrome你能得到脚本直接复用本地浏览器的登录态和插件不用重新登录。装好 Midscene Chrome 扩展后把模型配置写在终端环境变量里脚本端两行代码即可附着到当前标签页const agent new AgentOverChromeBridge(); await agent.connectCurrentTab();坑首次连接时扩展会弹确认窗不点 Allow脚本会一直卡住等连接。端到端案例让 AI 替你处理飞书消息场景在 Playground 的 Command input 里输入自然语言指令比如打开飞书、搜索联系人、发送消息由 AI 在手机上连续执行。消息处理这类多步操作是移动端最有代表性的用法。步骤很简单手机开启 USB 调试用数据线连上电脑确认 adb 已识别设备按 Android 平台指南启动 Playground浏览器里会出现实时投屏在左侧输入框键入多步指令回车后 AI 开始逐步执行可随时 Stop 中止。跑完后报告页面按时间线记录每一步的规划、定位与动作耗时点Open in Playground还能回放进每一步精确追溯 AI 每次点击的决策依据常见报错对照表与排查动作错误现象可能原因排查动作点击位置偏移、点不中模型配置不匹配、截图分辨率不生效核对MIDSCENE_MODEL_FAMILY换 UI 定位能力更强的模型扩展报Cannot access a chrome-extension:// URL其他扩展向页面注入了 iframe开发者工具里找到对应扩展 ID禁用后刷新重试CLI 提示Unsupported Node.js versionNode 版本过旧升级到 20.19 / 22.12 / 24 后重装 CLIAndroid 找不到设备未开 USB 调试、adb 未连接执行adb devices检查首次连接在手机上点允许Midscene 的定位能力取决于多模态模型单步成本高于选择器式自动化更适合回归验证、跨端比对和复杂界面操作这类场景批量执行时建议配合缓存功能控制模型调用开销。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
与VMD结合的MATLAB实现)
