尧图网站建设 
Midscene.js 快速上手发出你的第一条 AI E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 GUI Agent 驱动的 E2E 测试框架你用自然语言描述任务它看屏幕截图自己点击、自己输入、自己验证结果。这篇实操手册带你走完最短路径——先配好模型在 Chrome 扩展里发出第一条指令再依次深入 Android 真机自动化和复用已登录浏览器最后用执行报告定位失败步骤。为什么不用再写选择器传统 E2E 的累大概率你经历过页面改一层 div你手写的一排定位器全部失效断言里引用的文案产品今天就改了。维护测试的成本常常超过写测试本身。Midscene.js 换掉了输入方式——不看 DOM看屏幕。GUI Agent 到底在做什么GUI Agent 是能看屏幕并自己操作的 AI 程序。你给一句点击登录按钮它先给当前页面截图把图交给多模态模型由模型判断按钮在哪个位置再执行点击。点完它会再截一张图检查结果没达成就继续操作直到任务完成。整个流程就三件事感知截图并理解界面、决策模型输出该点哪、该输什么、执行框架真正完成点击和输入。任务结束每个步骤的截图与决策会写进一份 HTML 报告支持逐步回放。好处很直接选择器没了测试用例变成一句描述。代价是必须有一个能识别 UI 的多模态模型——这是你动手前唯一必须配对的环节。发出第一条指令目标在任意网页上让 Midscene.js 替你点一个按钮并产出一份可回放的报告。分四步做准备模型。设置四个环境变量指定一个支持 UI 定位的多模态模型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最后一行MIDSCENE_MODEL_FAMILY告诉框架你用的是哪一家族它会据此调整提示词与解析策略。完整的支持模型清单见模型配置文档。装扩展。在 Chrome 应用商店安装 Midscene浏览器右侧出现它的侧边栏。贴配置。点侧边栏的设置图标把上面四个值粘进设置页保存。发指令。打开任意网页输入一句点击登录按钮。怎么算成功侧边栏实时展示截图、每步 AI 决策与断言结果执行完自动生成 HTML 报告点开能逐步回放。这个扩展和 SDK 共享同一套实现侧边栏里跑通的行为写进脚本完全一致。如果扩展尝鲜已够可以直接看下一节更重的场景真机。adb 连上手机跑一条真机测试适用场景你要让 AI 操作 Android 手机上的 App而不是网页。前置条件开发机装好 adb手机在开发者选项里开启 USB 调试用数据线连上电脑。动作只有四个运行adb devices -l输出里出现设备序列号、状态为 device连接才成立。启动 Playgroundnpx --yes midscene/android-playground。在弹出的设置窗里贴入和扩展同一份的模型配置。输入指令打开浏览器搜索 SU7AI 会自行规划并逐步操作。如何确认跑通手机屏幕上能看到 AI 自己点击和滚动打开报告文件每次操作都有截图和耗时留痕。跑通后把同样的指令改写成midscene/android的 SDK 调用就是正式测试脚本的一部分。iOS、HarmonyOS 与桌面端的完整配置见平台指南。真机搞定后还有一个绕不开的痛点登录态。接管你已登录的 Chrome适用场景测试流程卡在登录上。无头浏览器每次都是新实例没有 cookies只能反复登录。前置条件装好 Midscene 扩展桥接握手发生在浏览器里一个 Node 项目。动作分四步安装依赖npm i -D midscene/web tsx。脚本里new AgentOverChromeBridge()再调connectNewTabWithUrl(url)桌面 Chrome 会新开标签页接入脚本。扩展弹出确认窗点 Allow 或 Always Allow。照常调aiAct、aiAssert——API 与浏览器内用法一致区别只是操作对象变成了你自己登录好的 Chromecookies 和插件状态全部复用。如何确认跑通Chrome 新开标签页自动执行任务期间你还能在旁边手动补操作这种人在回路协作正是桥接模式文档描述的核心用法。注意一点模型配置要写在 Node 侧环境变量里不是浏览器侧。扩展、真机、桥接无论哪条路失败总是要先找到挂在哪一步。看报告把失败步骤找出来适用场景AI 测试挂了你需要在一分钟内定位失败点而不是翻十分钟日志。前置条件任意一次运行完成通过或失败都行。三步定位找产物运行结果默认在midscene_run目录报告、日志、缓存分目录存放想整体挪位置就设MIDSCENE_RUN_DIR。打开 HTML 报告每个 AI 步骤的输入、输出、耗时、状态单独记录元素定位框也看得见。对比耗时数据模型调用占大头是响应慢动作占大头多半是页面慢答案直接写在报告里。报告生成的核心逻辑在报告模块想深入机制从这里读起。这些报错先别慌adb devices只出现 unauthorized手机还没确认配对。在手机屏幕上点一次允许 USB 调试重新执行命令即可。提示Cannot access a chrome-extension:// URL别的扩展和 Midscene 冲突了。在开发者工具里找到以chrome-extension://开头的那个注入 ID到chrome://extensions把对应扩展禁用。本地 Ollama 返回 403来源限制挡住了扩展。设OLLAMA_ORIGINS*放开。配了 cache 却没有缓存文件检查 cache 配置里有没有id写成{ id: 任务名 }。只读模式下还得手动调一次agent.flushCache()才会落盘。CI 里缓存全不命中CI 环境是干净工作区本地缓存目录没带过去。把./midscene_run/cache提交进仓库两边就能共享。Azure 上 GPT-5 点击坐标偏移点击位置会随分辨率偏移。用screenshotShrinkFactor预先缩小截图即可规避。读写、只读、只写三种缓存策略的取舍缓存文档里有完整说明。参数一览参数推荐值何时调整MIDSCENE_MODEL_NAME支持 UI 定位的多模态模型必配所有场景MIDSCENE_MODEL_TIMEOUT180000模型响应慢时上调MIDSCENE_MODEL_RETRY_COUNT1网络不稳时加到 2–3cache{ id: 任务名 }调试期加速cache.strategyread-only生产环境防缓存被改写MIDSCENE_RUN_DIR自定义路径报告与缓存集中管理bridgeModenewTabWithUrlYAML 脚本接管本地 Chrome接下来想批量跑 YAML 脚本读YAML 脚本运行器文档想让缓存真正省时间先把caching 文档里三种策略的取舍看完。验证任何改动最快的办法永远是改一个参数、重跑一次然后看报告。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 快速上手：发出你的第一条 AI E2E 测试
Midscene.js 快速上手发出你的第一条 AI E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 GUI Agent 驱动的 E2E 测试框架你用自然语言描述任务它看屏幕截图自己点击、自己输入、自己验证结果。这篇实操手册带你走完最短路径——先配好模型在 Chrome 扩展里发出第一条指令再依次深入 Android 真机自动化和复用已登录浏览器最后用执行报告定位失败步骤。为什么不用再写选择器传统 E2E 的累大概率你经历过页面改一层 div你手写的一排定位器全部失效断言里引用的文案产品今天就改了。维护测试的成本常常超过写测试本身。Midscene.js 换掉了输入方式——不看 DOM看屏幕。GUI Agent 到底在做什么GUI Agent 是能看屏幕并自己操作的 AI 程序。你给一句点击登录按钮它先给当前页面截图把图交给多模态模型由模型判断按钮在哪个位置再执行点击。点完它会再截一张图检查结果没达成就继续操作直到任务完成。整个流程就三件事感知截图并理解界面、决策模型输出该点哪、该输什么、执行框架真正完成点击和输入。任务结束每个步骤的截图与决策会写进一份 HTML 报告支持逐步回放。好处很直接选择器没了测试用例变成一句描述。代价是必须有一个能识别 UI 的多模态模型——这是你动手前唯一必须配对的环节。发出第一条指令目标在任意网页上让 Midscene.js 替你点一个按钮并产出一份可回放的报告。分四步做准备模型。设置四个环境变量指定一个支持 UI 定位的多模态模型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最后一行MIDSCENE_MODEL_FAMILY告诉框架你用的是哪一家族它会据此调整提示词与解析策略。完整的支持模型清单见模型配置文档。装扩展。在 Chrome 应用商店安装 Midscene浏览器右侧出现它的侧边栏。贴配置。点侧边栏的设置图标把上面四个值粘进设置页保存。发指令。打开任意网页输入一句点击登录按钮。怎么算成功侧边栏实时展示截图、每步 AI 决策与断言结果执行完自动生成 HTML 报告点开能逐步回放。这个扩展和 SDK 共享同一套实现侧边栏里跑通的行为写进脚本完全一致。如果扩展尝鲜已够可以直接看下一节更重的场景真机。adb 连上手机跑一条真机测试适用场景你要让 AI 操作 Android 手机上的 App而不是网页。前置条件开发机装好 adb手机在开发者选项里开启 USB 调试用数据线连上电脑。动作只有四个运行adb devices -l输出里出现设备序列号、状态为 device连接才成立。启动 Playgroundnpx --yes midscene/android-playground。在弹出的设置窗里贴入和扩展同一份的模型配置。输入指令打开浏览器搜索 SU7AI 会自行规划并逐步操作。如何确认跑通手机屏幕上能看到 AI 自己点击和滚动打开报告文件每次操作都有截图和耗时留痕。跑通后把同样的指令改写成midscene/android的 SDK 调用就是正式测试脚本的一部分。iOS、HarmonyOS 与桌面端的完整配置见平台指南。真机搞定后还有一个绕不开的痛点登录态。接管你已登录的 Chrome适用场景测试流程卡在登录上。无头浏览器每次都是新实例没有 cookies只能反复登录。前置条件装好 Midscene 扩展桥接握手发生在浏览器里一个 Node 项目。动作分四步安装依赖npm i -D midscene/web tsx。脚本里new AgentOverChromeBridge()再调connectNewTabWithUrl(url)桌面 Chrome 会新开标签页接入脚本。扩展弹出确认窗点 Allow 或 Always Allow。照常调aiAct、aiAssert——API 与浏览器内用法一致区别只是操作对象变成了你自己登录好的 Chromecookies 和插件状态全部复用。如何确认跑通Chrome 新开标签页自动执行任务期间你还能在旁边手动补操作这种人在回路协作正是桥接模式文档描述的核心用法。注意一点模型配置要写在 Node 侧环境变量里不是浏览器侧。扩展、真机、桥接无论哪条路失败总是要先找到挂在哪一步。看报告把失败步骤找出来适用场景AI 测试挂了你需要在一分钟内定位失败点而不是翻十分钟日志。前置条件任意一次运行完成通过或失败都行。三步定位找产物运行结果默认在midscene_run目录报告、日志、缓存分目录存放想整体挪位置就设MIDSCENE_RUN_DIR。打开 HTML 报告每个 AI 步骤的输入、输出、耗时、状态单独记录元素定位框也看得见。对比耗时数据模型调用占大头是响应慢动作占大头多半是页面慢答案直接写在报告里。报告生成的核心逻辑在报告模块想深入机制从这里读起。这些报错先别慌adb devices只出现 unauthorized手机还没确认配对。在手机屏幕上点一次允许 USB 调试重新执行命令即可。提示Cannot access a chrome-extension:// URL别的扩展和 Midscene 冲突了。在开发者工具里找到以chrome-extension://开头的那个注入 ID到chrome://extensions把对应扩展禁用。本地 Ollama 返回 403来源限制挡住了扩展。设OLLAMA_ORIGINS*放开。配了 cache 却没有缓存文件检查 cache 配置里有没有id写成{ id: 任务名 }。只读模式下还得手动调一次agent.flushCache()才会落盘。CI 里缓存全不命中CI 环境是干净工作区本地缓存目录没带过去。把./midscene_run/cache提交进仓库两边就能共享。Azure 上 GPT-5 点击坐标偏移点击位置会随分辨率偏移。用screenshotShrinkFactor预先缩小截图即可规避。读写、只读、只写三种缓存策略的取舍缓存文档里有完整说明。参数一览参数推荐值何时调整MIDSCENE_MODEL_NAME支持 UI 定位的多模态模型必配所有场景MIDSCENE_MODEL_TIMEOUT180000模型响应慢时上调MIDSCENE_MODEL_RETRY_COUNT1网络不稳时加到 2–3cache{ id: 任务名 }调试期加速cache.strategyread-only生产环境防缓存被改写MIDSCENE_RUN_DIR自定义路径报告与缓存集中管理bridgeModenewTabWithUrlYAML 脚本接管本地 Chrome接下来想批量跑 YAML 脚本读YAML 脚本运行器文档想让缓存真正省时间先把caching 文档里三种策略的取舍看完。验证任何改动最快的办法永远是改一个参数、重跑一次然后看报告。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考