Midscene.js5 分钟跑通第一个 UI 自动化场景的视觉驱动 GUI Agent【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的 GUI 自动化工具用自然语言指令控制浏览器、手机和桌面界面。本文面向测试工程师和想把重复操作脚本化的开发者帮你判断它适不适合你手头的活。先让它跑一个任务感受下给它一句指令aiAct(在搜索框输入 Headphones 并回车)。它不做的事是查 DOM做的事是截一张当前页面的图交给多模态视觉模型让模型在图上找到搜索框的坐标再把这个坐标换算成 Playwright 能执行的点击和键入动作。页面刷新后它再截一张图用aiWaitFor(页面上出现至少一个耳机商品)判断加载是否完成——判断依据同样是图里看到了什么而不是某个元素有没有渲染进 DOM。随后aiQuery从截图里读出商品标题和价格返回结构化数据。跑完后它会落一份 HTML 报告里面按时间轴排好每一步的截图、发给模型的提示词、定位到的元素位置框。打开报告就能复盘 AI 每一步看到了什么这一步在排查失败时很有用。和传统选择器方案的差别在哪维度传统选择器驱动Midscene.js 视觉驱动元素定位依赖 CSS 选择器、XPath、无障碍树凭截图加自然语言定位Canvas、游戏、无语义图标按钮基本不可见人眼能看见就能操作UI 改版后选择器批量失效只需确认自然语言描述仍成立断言能力判断 DOM 节点是否存在可校验颜色、布局、渲染状态一句话只要人能用眼睛判断它就能自动化代价是每一步都要过一次视觉模型速度和成本都依赖模型。5 分钟跑通第一个场景下面这段脚本在 eBay 上完成一次完整的搜索、等待、取数、断言流程是官方文档里最简示例的裁剪版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 并回车); await agent.aiWaitFor(页面上出现至少一个耳机商品); const price await agent.aiNumber(第一个耳机的价格是多少); await agent.aiAssert(页面左侧存在分类筛选栏); console.log(第一个商品价格, price); await browser.close();运行后你会看到浏览器打开 eBay 并自动完成搜索终端打印出第一个商品的价格同时在工作目录生成一份可视化报告逐步展示每次截图、模型定位框和断言结果。配置好模型的环境变量后这个脚本就能独立跑起来。它能控制哪些平台网页浏览器基于 Playwright 或 Puppeteer 接管页面是文档和示例最集中的平台Android通过 ADB 加 scrcpy 投屏链路连接真机或模拟器iOS通过 WebDriverAgent 控制真机与模拟器HarmonyOS通过 HDC 连接鸿蒙设备桌面在 macOS、Windows、Linux 上驱动鼠标键盘操作本地图形界面自定义接口只要能截屏并能注入输入文档说明可以接入任意界面这些平台共用同一套 Agent APIaiAct、aiQuery、aiAssert等方法的含义在各平台上一致。它是怎么工作的视觉模型引擎。元素定位完全基于截图模型侧支持 Qwen 系列、Doubao、GLM、gemini、UI-TARS 等多模态模型其中包含可自托管的开源选项做数据提取时也可选把 DOM 一并喂给模型辅助理解。模型接入层集中在 packages/core/src/ai-model/。平台适配层。每个平台包实现两件事截图和注入输入。上层 Agent 不关心底层是 ADB 还是 WebDriverAgent所以同一段自然语言指令可以在不同设备上复用。对应模块分别是 packages/web-integration/src/、packages/android/src/、packages/ios/src/ 和 packages/computer/src/。桥接模式。如果你的任务必须复用已登录的浏览器带 Cookie、带本地配置可以用桥接模式本地 SDK 通过扩展接管你正在用的 Chrome 标签页而不是另起一个干净实例。实现见 packages/web-integration/src/bridge-mode/。适合什么样的工作电商流程回归下达打开首页、搜索商品、按价格排序、加购一串指令用查询接口取回购物车总价再断言与预期值一致替代维护一整页选择器。移动端功能验证让它在手机上走一遍登录、发布内容的主路径最后用一条断言检查界面是否呈现已发布状态失败时直接看报告里的截图。页面信息采集描述要采集的字段让aiQuery按结构返回标题、价格、位置等数据再用断言校验字段是否齐备适合做轻量监控。稳定性与性能要点任务缓存相同指令加相同页面状态下可复用历史定位结果源码里的任务缓存与缓存配置见 packages/core/src/agent/task-cache.ts。多模型策略可为不同任务指定默认模型与备选模型主模型失败时切换配置方式见 apps/site/docs/en/model-strategy.mdx。重试与轮次上限replanningCycleLimit限制单步内的重新规划次数waitAfterAction控制动作后的等待都是 Agent 构造时的显式配置项。智能等待aiWaitFor按页面是否满足某个视觉条件轮询替代固定 sleep对加载动画类动态内容更稳。可观测性每次运行产出报告记录截图、耗时与模型推理过程便于定位是模型误判还是环境问题。高频问题Q可以完全离线跑吗取决于模型。自托管 UI-TARS、Qwen-VL 等开源模型时整条链路可以不出网使用云端模型则需要网络。Q脚本跑起来不稳定怎么办组合三件事开任务缓存减少重复识别、给关键步骤配aiWaitFor和超时、失败后看报告确认是元素变了还是模型没认出来再决定改描述还是换模型。Q支持哪些语言写脚本官方主线是 JavaScript/TypeScript SDK 和 YAML 脚本两种方式README 中列出的社区 SDK 还包括 Python 和 Java 实现。Q页面有加载动画、内容延迟渲染怎么处理用aiWaitFor描述期望达到的视觉状态并给超时时间它会持续截图判断条件是否满足而不是写死等待秒数。Q怎么接入现有 CI把它作为 fixture 挂进 Playwright/Vitest 用例或用 CLI 批量执行 YAML 脚本报告 HTML 随产物上传即可。相关入口见 apps/site/docs/en/ 下的集成与 YAML 运行器文档。如果今天就想动手最实际的一步是在你现有的任一 Playwright 页面实例上挂一个PlaywrightAgent用一句话执行一次aiAct然后打开生成的报告看它如何截图、如何定位、如何落动作。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考