Midscene.js 快速上手完全指南如何用 AI 视觉自动化写 E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的开源 GUI Agent你用自然语言描述 UI 操作和断言它通过识别截图来定位元素并执行支持 Web、Android、iOS、HarmonyOS 和桌面端使用同一套 Agent API。如果你是维护 UI 自动化脚本的测试工程师或开发同学值得花几分钟试一下。为什么值得试写 UI 自动化脚本时最常见的三个头疼点选择器绑定脆弱XPath、CSS 选择器写得好好的页面一改版、一次重构就大面积失效修脚本的时间比写脚本还长。非浏览器界面够不着App、桌面端界面没有可用的 DOM传统浏览器自动化工具完全帮不上忙。断言和用户看到的东西对不上脚本断言的是数据层而用户看到的是视觉层颜色、高亮、布局这类问题断言不到。Midscene.js 的解法是绕开选择器改看屏幕它像人一样按外观和位置找到控件点击、输入、滚动断言同样用自然语言描述期望画面aiAssert会对照截图判断是否成立。上面的三个痛点它都覆盖到了。5 分钟快速上手 ⚙️先确认 Node.js 版本在 20.19、22.12 或 24然后全局安装命令行工具npm i -g midscene/cli接着配置模型。在运行目录下放一个.env文件注意是运行 CLI 的目录不是 YAML 所在目录填入MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY四个必选项完整说明见模型配置文档。写一个最小 YAML 脚本bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - aiAssert: 结果显示天气信息执行一条命令midscene ./bing-search.yaml命令行会打印执行进度结束后生成 HTML 可视化报告截图、动作和断言结果都能点开回看。跑通这条脚本后你就完成了 Midscene.js E2E 测试的第一次体验。实战场景新手接入用 Chrome 扩展先试指令再写代码第一次用的人容易犯的错误是上来就写脚本指令写得不好失败后分不清是写法问题还是环境问题。更稳的路径是先用 Chrome 扩展这个 Playground 验证指令安装扩展后打开侧边栏把模型配置粘贴进设置页然后针对真实页面输入指令比如点击登录按钮、页面中的商品{name: string, price: number}[]。指令效果确认无误后再原样搬进aiAct、aiQuery等 Agent API 里验证过的指令基本可以平移。踩坑提示如果执行时报Cannot access a chrome-extension:// URL of different extension通常是其他扩展向页面注入了 iframe 或 script 与 Midscene.js 冲突用开发者工具找到对应扩展 ID 并禁用即可。存量测试迁移在 Playwright 用例里替换最脆的那几步已有 Playwright 或 Puppeteer 项目不必整体重写。安装midscene/web后在现有测试拿到page的地方创建new PlaywrightAgent(page)只把那些选择器难写、易碎、涉及视觉判断的步骤换成aiAct、aiWaitFor、aiAssert用例的调度、数据准备、失败重试仍然交给原有框架。迁移策略上建议从最不稳定的一两个用例入手用--headed先跑单条确认指令表现再逐步铺开。踩坑提示aiQuery、aiBoolean、aiAssert这类查询操作不会走缓存每条用例都会真实调用模型估算 CI 成本时要把这部分算进去。接入 CI 流水线批量执行 共享登录态回归测试上 CI 时Midscene.js 的 CLI 本身就提供了批量能力用通配符匹配多个脚本--concurrent控制并发--continue-on-error让单条失败不阻塞整批--retry给偶发失败补几次尝试。多个脚本都依赖登录时把登录写在setup里并开启shareBrowserContext登录成功的 Cookies 会被后续脚本复用避免每个用例都走一遍登录。指令稳定后再按缓存 AI 规划和定位的文档启用缓存重复执行时直接复用规划结果模型调用次数会明显下降。踩坑提示--concurrent大于 1 时脚本执行顺序不确定有依赖关系的脚本必须用concurrent: 1按顺序跑CI 环境里.env要放在实际执行 CLI 的目录模型密钥建议用 CI 的加密变量注入而不是提交进仓库。避坑指南现象原因解决CLI 报Unsupported Node.js versionNode 20.17 等旧 patch 版本不被执行链路上的 Rspack 支持升级到 20.19、22.12 或 24 后重新安装.env里的模型配置没生效.env必须放在 CLI 运行目录与 YAML 文件位置无关移动文件到运行目录或用--dotenv-debug查看加载日志AI 调用超时默认硬超时 180 秒弱网或慢模型下不够用调大MIDSCENE_MODEL_TIMEOUT并用MIDSCENE_MODEL_RETRY_COUNT增加重试默认 1 次扩展报Cannot access a chrome-extension:// URL其他 Chrome 扩展注入了冲突的 iframe/script开发者工具中定位扩展 ID到扩展页禁用后刷新页面用 Ollama 本地模型返回 403Ollama 未放行扩展的跨域请求设置环境变量OLLAMA_ORIGINS*后重启 Ollama同批脚本执行顺序不稳定--concurrent大于 1 时顺序不确定依赖顺序的脚本批次设为concurrent: 1常用参数速查参数默认值何时需要改MIDSCENE_MODEL_API_KEY无必填首次配置模型MIDSCENE_MODEL_BASE_URL无必填首次配置模型MIDSCENE_MODEL_NAME无必填首次配置模型MIDSCENE_MODEL_FAMILY无必填首次配置决定坐标处理方式MIDSCENE_MODEL_TIMEOUT180000毫秒模型响应慢或网络差时调大MIDSCENE_MODEL_RETRY_COUNT1偶发失败多时增加重试次数MIDSCENE_MODEL_RESPONSE_FORMATauto模型不支持结构化输出时设为nonecacheAgent/YAML 配置禁用指令稳定后启用减少模型调用--concurrent1批量执行互不依赖的脚本时调大--retry0CI 中吸收网络波动导致的偶发失败想继续深入建议先读一遍 YAML 脚本运行器文档然后把bing-search.yaml换成你自己项目里最不稳定的一条用例跑通这就是接入 Midscene.js 最有价值的第一步。【免费下载链接】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 是一个面向 E2E 测试的开源 GUI Agent你用自然语言描述 UI 操作和断言它通过识别截图来定位元素并执行支持 Web、Android、iOS、HarmonyOS 和桌面端使用同一套 Agent API。如果你是维护 UI 自动化脚本的测试工程师或开发同学值得花几分钟试一下。为什么值得试写 UI 自动化脚本时最常见的三个头疼点选择器绑定脆弱XPath、CSS 选择器写得好好的页面一改版、一次重构就大面积失效修脚本的时间比写脚本还长。非浏览器界面够不着App、桌面端界面没有可用的 DOM传统浏览器自动化工具完全帮不上忙。断言和用户看到的东西对不上脚本断言的是数据层而用户看到的是视觉层颜色、高亮、布局这类问题断言不到。Midscene.js 的解法是绕开选择器改看屏幕它像人一样按外观和位置找到控件点击、输入、滚动断言同样用自然语言描述期望画面aiAssert会对照截图判断是否成立。上面的三个痛点它都覆盖到了。5 分钟快速上手 ⚙️先确认 Node.js 版本在 20.19、22.12 或 24然后全局安装命令行工具npm i -g midscene/cli接着配置模型。在运行目录下放一个.env文件注意是运行 CLI 的目录不是 YAML 所在目录填入MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY四个必选项完整说明见模型配置文档。写一个最小 YAML 脚本bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - aiAssert: 结果显示天气信息执行一条命令midscene ./bing-search.yaml命令行会打印执行进度结束后生成 HTML 可视化报告截图、动作和断言结果都能点开回看。跑通这条脚本后你就完成了 Midscene.js E2E 测试的第一次体验。实战场景新手接入用 Chrome 扩展先试指令再写代码第一次用的人容易犯的错误是上来就写脚本指令写得不好失败后分不清是写法问题还是环境问题。更稳的路径是先用 Chrome 扩展这个 Playground 验证指令安装扩展后打开侧边栏把模型配置粘贴进设置页然后针对真实页面输入指令比如点击登录按钮、页面中的商品{name: string, price: number}[]。指令效果确认无误后再原样搬进aiAct、aiQuery等 Agent API 里验证过的指令基本可以平移。踩坑提示如果执行时报Cannot access a chrome-extension:// URL of different extension通常是其他扩展向页面注入了 iframe 或 script 与 Midscene.js 冲突用开发者工具找到对应扩展 ID 并禁用即可。存量测试迁移在 Playwright 用例里替换最脆的那几步已有 Playwright 或 Puppeteer 项目不必整体重写。安装midscene/web后在现有测试拿到page的地方创建new PlaywrightAgent(page)只把那些选择器难写、易碎、涉及视觉判断的步骤换成aiAct、aiWaitFor、aiAssert用例的调度、数据准备、失败重试仍然交给原有框架。迁移策略上建议从最不稳定的一两个用例入手用--headed先跑单条确认指令表现再逐步铺开。踩坑提示aiQuery、aiBoolean、aiAssert这类查询操作不会走缓存每条用例都会真实调用模型估算 CI 成本时要把这部分算进去。接入 CI 流水线批量执行 共享登录态回归测试上 CI 时Midscene.js 的 CLI 本身就提供了批量能力用通配符匹配多个脚本--concurrent控制并发--continue-on-error让单条失败不阻塞整批--retry给偶发失败补几次尝试。多个脚本都依赖登录时把登录写在setup里并开启shareBrowserContext登录成功的 Cookies 会被后续脚本复用避免每个用例都走一遍登录。指令稳定后再按缓存 AI 规划和定位的文档启用缓存重复执行时直接复用规划结果模型调用次数会明显下降。踩坑提示--concurrent大于 1 时脚本执行顺序不确定有依赖关系的脚本必须用concurrent: 1按顺序跑CI 环境里.env要放在实际执行 CLI 的目录模型密钥建议用 CI 的加密变量注入而不是提交进仓库。避坑指南现象原因解决CLI 报Unsupported Node.js versionNode 20.17 等旧 patch 版本不被执行链路上的 Rspack 支持升级到 20.19、22.12 或 24 后重新安装.env里的模型配置没生效.env必须放在 CLI 运行目录与 YAML 文件位置无关移动文件到运行目录或用--dotenv-debug查看加载日志AI 调用超时默认硬超时 180 秒弱网或慢模型下不够用调大MIDSCENE_MODEL_TIMEOUT并用MIDSCENE_MODEL_RETRY_COUNT增加重试默认 1 次扩展报Cannot access a chrome-extension:// URL其他 Chrome 扩展注入了冲突的 iframe/script开发者工具中定位扩展 ID到扩展页禁用后刷新页面用 Ollama 本地模型返回 403Ollama 未放行扩展的跨域请求设置环境变量OLLAMA_ORIGINS*后重启 Ollama同批脚本执行顺序不稳定--concurrent大于 1 时顺序不确定依赖顺序的脚本批次设为concurrent: 1常用参数速查参数默认值何时需要改MIDSCENE_MODEL_API_KEY无必填首次配置模型MIDSCENE_MODEL_BASE_URL无必填首次配置模型MIDSCENE_MODEL_NAME无必填首次配置模型MIDSCENE_MODEL_FAMILY无必填首次配置决定坐标处理方式MIDSCENE_MODEL_TIMEOUT180000毫秒模型响应慢或网络差时调大MIDSCENE_MODEL_RETRY_COUNT1偶发失败多时增加重试次数MIDSCENE_MODEL_RESPONSE_FORMATauto模型不支持结构化输出时设为nonecacheAgent/YAML 配置禁用指令稳定后启用减少模型调用--concurrent1批量执行互不依赖的脚本时调大--retry0CI 中吸收网络波动导致的偶发失败想继续深入建议先读一遍 YAML 脚本运行器文档然后把bing-search.yaml换成你自己项目里最不稳定的一条用例跑通这就是接入 Midscene.js 最有价值的第一步。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考