尧图网站建设 
用自然语言操作界面的 AI 视觉驱动 UI 自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上周一次前端重构把我们的 UI 测试跑挂了报错指向一个早已改名的按钮选择器修复它又得挨个核对页面 DOM。这次没有再改选择器而是装了一个叫 Midscene 的开源 SDK用一句点击登录按钮代替它。Midscene 是一个 AI 视觉驱动的跨平台 UI 自动化框架你用自然语言描述操作目标它靠多模态模型看图、规划并执行覆盖 Web、移动端和桌面端。选择器写不动的那些场景传统方案依赖 DOM读结构、找选择器、按 XPath 点下去。痛点集中在三处选择器随重构失效无 DOM 语义的界面够不到无法验证用户真实所见Midscene 的路子不同它不解析 DOM只截图把画面和你的指令一起交给多模态模型由模型定位元素、规划动作。只要人眼能看到它就够得到。跑通第一个任务脚本 15 行装依赖npm install midscene/web playwright tsx写一个脚本demo.tsimport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; // 启动浏览器并打开目标页面 const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://www.ebay.com); // 把页面交给 Agent用自然语言驱动 const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并回车); await agent.aiWaitFor(搜索结果列表已加载); // 从界面提取结构化数据 const items await agent.aiQuery( 商品列表{itemTitle: string, price: number}[], ); console.log(items); await browser.close();npx tsx demo.ts之后会看到浏览器窗口真的执行了搜索终端打出商品标题和价格控制台最后输出一行报告路径——打开那个 HTML 文件每一步的截图、AI 的推理过程和耗时都能回看。跑起来之后你会习惯这种先写提示词、再看回放的调试方式。不想写代码也有入口。仓库里的 Chrome 扩展apps/chrome-extension/把同一套能力做成了侧边栏安装扩展、粘贴模型配置之后在任意网页输入点击登录按钮提取页面商品这类指令直接在当前页面执行。Playground 里验证过的指令原样就能搬进 SDK。三个值得细看的设计aiAct的自主规划。它做什么接收一句自然语言目标拆成可执行步骤每步都基于最新截图定位并执行直到目标完成。为什么这样设计多模态模型每一步都重新看界面所以弹窗、滚动、页面变化这些意外状态能被适应执行路径不确定也能继续推进。对使用者意味着什么它是灵活档代价是每步都消耗一次模型调用比即时交互慢也更费 token与之配对的aiTap、aiInput等 API 只做一次定位加一个动作快且省。灵活但慢确定但快按步骤的稳定性组合使用。Agent 与驱动框架解耦。引擎层视觉定位、任务规划、报告生成放在 core 包packages/core/src/agent/ 里能看到规划、执行会话和报告记录的分工packages/web-integration/src/ 则把它挂到 Playwright 或 Puppeteer 的 page 上。换平台就是换一个适配器Android 走 adb 与 scrcpyiOS 走 WebDriverAgent桌面端走屏幕输入注入。对使用者意味着同一套 API 和报告格式跨端通用写过的用例逻辑可以平移。HTML 回放报告。每次运行都会生成一份可逐步回放的报告每步的截图、AI 观察到的内容、执行计划和耗时都在里面。失败时你直接看模型在失败那一步看到了什么定位问题的速度比看堆栈快得多。报告是单文件 HTML也可以作为 CI 产物存档、事后复查。一条能落地的完整工作流拿电商站搜索回归举例把打开页面、搜索、断言、取数走一遍import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并回车); await agent.aiWaitFor(至少出现一件商品); // 验证界面状态 提取关键数据 await agent.aiAssert(界面左侧存在类目筛选区); const first await agent.aiNumber(第一个商品的价格); console.log(first price:, first); await agent.aiAssert(第一个商品价格大于 500 美元, first); await browser.close();对比手工跑同样的流程打开页面、输入、等加载、逐个核对数据、记录结论通常要 10 分钟以上Midscene 的脚本 1 分钟内跑完报告 5 秒看完。下次 UI 改版要改的是一句提示词而不是十个选择器。边界哪些地方要先想清楚模型配置绕不开。Midscene 本身不内置模型你得准备一个能看图的多模态模型云端 API 或本地部署的开源模型都可以配置只需要模型名、baseURL 和 key 三样粘贴到扩展设置或写进环境变量即可。缓存值得开但不是默认。给 Agent 配一个cache: { id: my-task }之后相同指令在相似页面上会复用已缓存的规划结果官方案例里执行耗时从 51 秒降到 28 秒缓存文件落在./midscene_run/cache下命中失效时自动回退重新调用模型。查询类操作aiQuery、aiAssert永不缓存避免拿到过期数据。谁该用第一步做什么最匹配的是三类人维护 Playwright 或 Puppeteer 测试套件的工程师可以直接把 Agent 作为 fixture 接进现有用例需要覆盖 Canvas、游戏或无 DOM 语义界面的团队以及要从动态页面里稳定提取结构化数据、又不想维护选择器的人。最快的第一步装 Chrome 扩展配一个模型在一个你熟悉的网页上试一条指令。跑通了再考虑接进项目。常见疑问离线能跑吗能。Midscene 只是 SDK有多模态模型服务就能工作用 Ollama 跑本地模型时记得给 Ollama 放开扩展访问设置OLLAMA_ORIGINS*。为什么比 Playwright 原生操作慢aiAct每一步都要模型规划比写死选择器的脚本慢一档。稳定步骤用aiTap、aiInput这类即时交互 API 快得多复杂分支才交给aiAct重复跑的任务再叠加缓存。Firefox、WebKit 能用吗依赖 CDP 的能力触摸手势、浏览器级事件推荐 ChromiumFirefox 和 WebKit 基础操作一般可用部分 CDP 能力会报错。跑通第一个任务之后大概就能判断它适不适合你的场景了。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用自然语言操作界面的 AI 视觉驱动 UI 自动化
用自然语言操作界面的 AI 视觉驱动 UI 自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上周一次前端重构把我们的 UI 测试跑挂了报错指向一个早已改名的按钮选择器修复它又得挨个核对页面 DOM。这次没有再改选择器而是装了一个叫 Midscene 的开源 SDK用一句点击登录按钮代替它。Midscene 是一个 AI 视觉驱动的跨平台 UI 自动化框架你用自然语言描述操作目标它靠多模态模型看图、规划并执行覆盖 Web、移动端和桌面端。选择器写不动的那些场景传统方案依赖 DOM读结构、找选择器、按 XPath 点下去。痛点集中在三处选择器随重构失效无 DOM 语义的界面够不到无法验证用户真实所见Midscene 的路子不同它不解析 DOM只截图把画面和你的指令一起交给多模态模型由模型定位元素、规划动作。只要人眼能看到它就够得到。跑通第一个任务脚本 15 行装依赖npm install midscene/web playwright tsx写一个脚本demo.tsimport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; // 启动浏览器并打开目标页面 const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://www.ebay.com); // 把页面交给 Agent用自然语言驱动 const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并回车); await agent.aiWaitFor(搜索结果列表已加载); // 从界面提取结构化数据 const items await agent.aiQuery( 商品列表{itemTitle: string, price: number}[], ); console.log(items); await browser.close();npx tsx demo.ts之后会看到浏览器窗口真的执行了搜索终端打出商品标题和价格控制台最后输出一行报告路径——打开那个 HTML 文件每一步的截图、AI 的推理过程和耗时都能回看。跑起来之后你会习惯这种先写提示词、再看回放的调试方式。不想写代码也有入口。仓库里的 Chrome 扩展apps/chrome-extension/把同一套能力做成了侧边栏安装扩展、粘贴模型配置之后在任意网页输入点击登录按钮提取页面商品这类指令直接在当前页面执行。Playground 里验证过的指令原样就能搬进 SDK。三个值得细看的设计aiAct的自主规划。它做什么接收一句自然语言目标拆成可执行步骤每步都基于最新截图定位并执行直到目标完成。为什么这样设计多模态模型每一步都重新看界面所以弹窗、滚动、页面变化这些意外状态能被适应执行路径不确定也能继续推进。对使用者意味着什么它是灵活档代价是每步都消耗一次模型调用比即时交互慢也更费 token与之配对的aiTap、aiInput等 API 只做一次定位加一个动作快且省。灵活但慢确定但快按步骤的稳定性组合使用。Agent 与驱动框架解耦。引擎层视觉定位、任务规划、报告生成放在 core 包packages/core/src/agent/ 里能看到规划、执行会话和报告记录的分工packages/web-integration/src/ 则把它挂到 Playwright 或 Puppeteer 的 page 上。换平台就是换一个适配器Android 走 adb 与 scrcpyiOS 走 WebDriverAgent桌面端走屏幕输入注入。对使用者意味着同一套 API 和报告格式跨端通用写过的用例逻辑可以平移。HTML 回放报告。每次运行都会生成一份可逐步回放的报告每步的截图、AI 观察到的内容、执行计划和耗时都在里面。失败时你直接看模型在失败那一步看到了什么定位问题的速度比看堆栈快得多。报告是单文件 HTML也可以作为 CI 产物存档、事后复查。一条能落地的完整工作流拿电商站搜索回归举例把打开页面、搜索、断言、取数走一遍import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones 并回车); await agent.aiWaitFor(至少出现一件商品); // 验证界面状态 提取关键数据 await agent.aiAssert(界面左侧存在类目筛选区); const first await agent.aiNumber(第一个商品的价格); console.log(first price:, first); await agent.aiAssert(第一个商品价格大于 500 美元, first); await browser.close();对比手工跑同样的流程打开页面、输入、等加载、逐个核对数据、记录结论通常要 10 分钟以上Midscene 的脚本 1 分钟内跑完报告 5 秒看完。下次 UI 改版要改的是一句提示词而不是十个选择器。边界哪些地方要先想清楚模型配置绕不开。Midscene 本身不内置模型你得准备一个能看图的多模态模型云端 API 或本地部署的开源模型都可以配置只需要模型名、baseURL 和 key 三样粘贴到扩展设置或写进环境变量即可。缓存值得开但不是默认。给 Agent 配一个cache: { id: my-task }之后相同指令在相似页面上会复用已缓存的规划结果官方案例里执行耗时从 51 秒降到 28 秒缓存文件落在./midscene_run/cache下命中失效时自动回退重新调用模型。查询类操作aiQuery、aiAssert永不缓存避免拿到过期数据。谁该用第一步做什么最匹配的是三类人维护 Playwright 或 Puppeteer 测试套件的工程师可以直接把 Agent 作为 fixture 接进现有用例需要覆盖 Canvas、游戏或无 DOM 语义界面的团队以及要从动态页面里稳定提取结构化数据、又不想维护选择器的人。最快的第一步装 Chrome 扩展配一个模型在一个你熟悉的网页上试一条指令。跑通了再考虑接进项目。常见疑问离线能跑吗能。Midscene 只是 SDK有多模态模型服务就能工作用 Ollama 跑本地模型时记得给 Ollama 放开扩展访问设置OLLAMA_ORIGINS*。为什么比 Playwright 原生操作慢aiAct每一步都要模型规划比写死选择器的脚本慢一档。稳定步骤用aiTap、aiInput这类即时交互 API 快得多复杂分支才交给aiAct重复跑的任务再叠加缓存。Firefox、WebKit 能用吗依赖 CDP 的能力触摸手势、浏览器级事件推荐 ChromiumFirefox 和 WebKit 基础操作一般可用部分 CDP 能力会报错。跑通第一个任务之后大概就能判断它适不适合你的场景了。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考