Midscene.js 视觉UI自动化速成指南从克隆到跑通首脚本的 4 步【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene产品页一改版回归脚本里几十个 CSS 选择器集体归零测试套件一夜变红。Midscene.js 是一个用视觉大模型看屏幕、再驱动鼠标键盘的开源跨平台 GUI 自动化框架官方定位是面向 E2E 测试的 GUI Agent。 原理它是如何看懂屏幕的每一步操作的输入都来自截图。当你写下点击右下角蓝色提交按钮Midscene 会先对当前画面截图连同指令一起发给具备 UI 定位能力的多模态模型Qwen、豆包 Seed、GLM、Gemini、UI-TARS 等其中不少可自部署模型返回目标坐标运行时再把坐标换算成真实的点击、输入或滚动。复杂指令则循环执行截图—规划—操作直到完成。正因为如此canvas 里画出来的控件、没有任何语义标签的图标按钮、网页摸不到的原生应用它都能操作——只要人眼在屏幕上看得见。做数据提取和页面理解时也可以按需在提示中附带 DOM但它不是必需的。对照传统方案基于 DOM 选择器或可访问性树的自动化结构一变就失效DOM 里不存在的东西更无从下手Midscene 只以屏幕像素为准绳代价是每步都要模型参与、比直接点击慢换回来的是不再维护选择器。 上手主线克隆仓库到首脚本只有一条路环境要求 Node.js 20.19 与 pnpm 9.3。先把仓库构建出来git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build接着配置一个有 UI 定位能力的模型以豆包 Seed 为例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在独立目录执行npm install midscene/web playwright tsx照下面写 demo.mts再用npx tsx demo.mts运行import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并回车); const items await agent.aiQuery({title: string, price: number}[]); await agent.aiAssert(页面左侧有类目筛选功能);跑完后控制台会打印一份 HTML 报告文件路径浏览器打开即可回看每一步的截图与规划。不想写代码的话也可以构建仓库里的插件工程apps/chrome-extension/以解压方式加载进 Chrome在任意网页的侧边栏直接输入自然语言指令。能力一套 API两种形态五个端JS SDK 与 YAML 两种写法交互类用aiAct自动规划、aiTap/aiInput/aiScroll即时操作提取类用aiQuery/aiString/aiNumber验证类用aiAssert等待用aiWaitFor。不想搭测试框架时写一份.yaml声明page:/browser:/android:/ios:/harmony:/computer:环境加tasks步骤用midscene命令执行即可官方的 Test RunnerBeta正在取代老版 YAML 方案。五个端共享同一套视觉 APIWeb 端可接 Playwright、Puppeteer 或 Chrome 扩展Android 走 adbiOS 走 WebDriverAgentHarmonyOS 走 hdc桌面端直接操控鼠标键盘。API 在五个端之间保持一致各端都配有可交互的 Playground仓库apps/目录下有对应的示例工程。Bridge 模式脚本接管你的桌面 ChromeAgentOverChromeBridge让本地脚本连接日常使用的 Chrome复用现成的登录态、cookie 与插件适合人机协作场景YAML 里加一行bridgeMode: newTabWithUrl同样可以开启。报告与缓存每次运行自动产出单文件 HTML 报告截图、操作、断言结果都能回看配合agent.cache缓存策略未变化的步骤重跑时命中缓存省下模型调用与等待时间。实战两个最小可运行用例Web 端搜索并提取商品数据把流程写进 YAML用midscene ./search.yaml执行name字段的值会进入 JSON 输出page: url: https://www.ebay.com tasks: - name: 搜索耳机 flow: - ai: 在搜索框输入 Headphones 并回车 - aiWaitFor: 搜索结果列表已加载 - name: 提取商品信息 flow: - aiQuery: 找出列表中的商品标题和对应价格 name: itemsAndroid 端同一套语言驱动真机环境声明换成android:段步骤写法与 Web 完全一致。先用adb devices确认设备已连接再执行midscene ./android-search.yamlandroid: launch: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - name: 检查结果 flow: - aiAssert: 结果中展示了天气信息⚙️ 调优速查先动哪几个参数模型连通与速度问题九成集中在MIDSCENE_MODEL_*环境变量必选 4 个是BASE_URL、API_KEY、NAME、FAMILY其中 FAMILY 决定坐标解析方式必须与模型匹配。稳定性相关通常只调这三个export MIDSCENE_MODEL_TIMEOUT180000 # 模型调用硬超时毫秒默认 180 秒 export MIDSCENE_MODEL_RETRY_COUNT1 # 调用失败重试次数默认 1 export MIDSCENE_MODEL_RETRY_INTERVAL2000 # 重试间隔毫秒默认 2 秒另外两个影响体感的是Agent 入参replanningCycleLimit限制aiAct的重规划轮数默认 20waitForNetworkIdleTimeout控制操作后的网络空闲等待默认 2000 毫秒设 0 关闭。完整清单见模型配置文档。 更多资料入口建议阅读顺序快速开始 → YAML 自动化脚本 → 集成到 Playwright → 桥接模式。可直接照抄的示例脚本在packages/web-integration/demo/与packages/cli/tests/midscene_scripts/。社区方面官方 Discord 与 Xmidscene_ai更新活跃项目为 MIT 许可可以放心用于生产。行动建议挑一条你正用选择器维护的回归路径改写成aiActaiAssert两句描述先跑起来确认报告可读之后再把它推进 CI。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Midscene.js 视觉UI自动化速成指南：从克隆到跑通首脚本的 4 步
Midscene.js 视觉UI自动化速成指南从克隆到跑通首脚本的 4 步【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene产品页一改版回归脚本里几十个 CSS 选择器集体归零测试套件一夜变红。Midscene.js 是一个用视觉大模型看屏幕、再驱动鼠标键盘的开源跨平台 GUI 自动化框架官方定位是面向 E2E 测试的 GUI Agent。 原理它是如何看懂屏幕的每一步操作的输入都来自截图。当你写下点击右下角蓝色提交按钮Midscene 会先对当前画面截图连同指令一起发给具备 UI 定位能力的多模态模型Qwen、豆包 Seed、GLM、Gemini、UI-TARS 等其中不少可自部署模型返回目标坐标运行时再把坐标换算成真实的点击、输入或滚动。复杂指令则循环执行截图—规划—操作直到完成。正因为如此canvas 里画出来的控件、没有任何语义标签的图标按钮、网页摸不到的原生应用它都能操作——只要人眼在屏幕上看得见。做数据提取和页面理解时也可以按需在提示中附带 DOM但它不是必需的。对照传统方案基于 DOM 选择器或可访问性树的自动化结构一变就失效DOM 里不存在的东西更无从下手Midscene 只以屏幕像素为准绳代价是每步都要模型参与、比直接点击慢换回来的是不再维护选择器。 上手主线克隆仓库到首脚本只有一条路环境要求 Node.js 20.19 与 pnpm 9.3。先把仓库构建出来git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build接着配置一个有 UI 定位能力的模型以豆包 Seed 为例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在独立目录执行npm install midscene/web playwright tsx照下面写 demo.mts再用npx tsx demo.mts运行import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并回车); const items await agent.aiQuery({title: string, price: number}[]); await agent.aiAssert(页面左侧有类目筛选功能);跑完后控制台会打印一份 HTML 报告文件路径浏览器打开即可回看每一步的截图与规划。不想写代码的话也可以构建仓库里的插件工程apps/chrome-extension/以解压方式加载进 Chrome在任意网页的侧边栏直接输入自然语言指令。能力一套 API两种形态五个端JS SDK 与 YAML 两种写法交互类用aiAct自动规划、aiTap/aiInput/aiScroll即时操作提取类用aiQuery/aiString/aiNumber验证类用aiAssert等待用aiWaitFor。不想搭测试框架时写一份.yaml声明page:/browser:/android:/ios:/harmony:/computer:环境加tasks步骤用midscene命令执行即可官方的 Test RunnerBeta正在取代老版 YAML 方案。五个端共享同一套视觉 APIWeb 端可接 Playwright、Puppeteer 或 Chrome 扩展Android 走 adbiOS 走 WebDriverAgentHarmonyOS 走 hdc桌面端直接操控鼠标键盘。API 在五个端之间保持一致各端都配有可交互的 Playground仓库apps/目录下有对应的示例工程。Bridge 模式脚本接管你的桌面 ChromeAgentOverChromeBridge让本地脚本连接日常使用的 Chrome复用现成的登录态、cookie 与插件适合人机协作场景YAML 里加一行bridgeMode: newTabWithUrl同样可以开启。报告与缓存每次运行自动产出单文件 HTML 报告截图、操作、断言结果都能回看配合agent.cache缓存策略未变化的步骤重跑时命中缓存省下模型调用与等待时间。实战两个最小可运行用例Web 端搜索并提取商品数据把流程写进 YAML用midscene ./search.yaml执行name字段的值会进入 JSON 输出page: url: https://www.ebay.com tasks: - name: 搜索耳机 flow: - ai: 在搜索框输入 Headphones 并回车 - aiWaitFor: 搜索结果列表已加载 - name: 提取商品信息 flow: - aiQuery: 找出列表中的商品标题和对应价格 name: itemsAndroid 端同一套语言驱动真机环境声明换成android:段步骤写法与 Web 完全一致。先用adb devices确认设备已连接再执行midscene ./android-search.yamlandroid: launch: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - name: 检查结果 flow: - aiAssert: 结果中展示了天气信息⚙️ 调优速查先动哪几个参数模型连通与速度问题九成集中在MIDSCENE_MODEL_*环境变量必选 4 个是BASE_URL、API_KEY、NAME、FAMILY其中 FAMILY 决定坐标解析方式必须与模型匹配。稳定性相关通常只调这三个export MIDSCENE_MODEL_TIMEOUT180000 # 模型调用硬超时毫秒默认 180 秒 export MIDSCENE_MODEL_RETRY_COUNT1 # 调用失败重试次数默认 1 export MIDSCENE_MODEL_RETRY_INTERVAL2000 # 重试间隔毫秒默认 2 秒另外两个影响体感的是Agent 入参replanningCycleLimit限制aiAct的重规划轮数默认 20waitForNetworkIdleTimeout控制操作后的网络空闲等待默认 2000 毫秒设 0 关闭。完整清单见模型配置文档。 更多资料入口建议阅读顺序快速开始 → YAML 自动化脚本 → 集成到 Playwright → 桥接模式。可直接照抄的示例脚本在packages/web-integration/demo/与packages/cli/tests/midscene_scripts/。社区方面官方 Discord 与 Xmidscene_ai更新活跃项目为 MIT 许可可以放心用于生产。行动建议挑一条你正用选择器维护的回归路径改写成aiActaiAssert两句描述先跑起来确认报告可读之后再把它推进 CI。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
