Midscene.js 视觉 UI 自动化一句话驱动 Web / Android / iOS 三端五平台 E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的 AI 视觉 UI 自动化框架。写一句点击登录按钮它会截图、找到按钮、真的点下去。同一套 Agent API 覆盖 Web、Android、iOS、HarmonyOS、桌面五个平台。有 Node 环境、配一个多模态模型的 API Key5 分钟能跑通第一个脚本。 它跟传统方案差在哪传统 UI 自动化把点哪里绑定在 DOM 结构上选择器写死在脚本里页面一改测试就挂。Midscene.js 换了一条路——不读 DOM、不解析可访问性树只把截图交给多模态模型由模型按外观和位置定位元素再调用平台层完成点击、输入、滚动。于是只有图标的按钮、canvas 画出来的内容、跨域 iframe 里的控件、根本没有 DOM 的原生应用都能用同一种方式操作。断言的含义也变了不再是验证某个节点存在而是验证用户在屏幕上真正看到了什么比如高亮、边框、错误提示这些视觉状态。代价是每次动作多一次模型推理换来的是选择器零维护——官方基准里 60 个 AppControlBench 任务的模型调用总成本只有 0.59 美元。维度选择器驱动Midscene.js 视觉驱动元素定位CSS/XPath页面重构即失效截图识别结构变化自动适应覆盖面仅有语义的 DOM 元素图标、canvas、跨域 iframe、原生应用跨平台各平台工具与 API 割裂同一套 Agent API 跑五端⚡ Midscene.js 上手步骤5 分钟跑通第一个 demo环境准备Node 环境装好midscene/web和 Playwright配齐MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY四个变量各家模型的配置示例见模型配置。import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await (await browser.newContext()).newPage(); await page.goto(https://www.bing.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框中输入 Midscene.js 并点击搜索按钮); const titles await agent.aiQuerystring[](前三条搜索结果的标题); console.log(titles); await browser.close();刚才发生的事AI 看了屏幕替你找到了搜索框、输入并点击还把前三条结果标题从画面上读了回来。进阶用法两三句带过aiWaitFor等页面就绪aiAssert断言可见结果外层套 try/catch 即可实现重试。不想写代码时Chrome 扩展侧边栏直接输入指令就能跑验证过的句子可以原样搬进脚本参考快速开始。 视觉自动化的三个典型场景盯住竞品价格变化你输入一句搜索 iPhone 16 并打开第一个商品页。它做aiAct完成搜索、点击、翻页aiQuery再让模型从画面上读出价格直接返回数字。你得到一个结构化数值可以直接和阈值比较、写进表格、触发通知全程不解析 HTML。商品页改版后脚本通常一个字都不用改。await agent.aiAct(搜索 iPhone 16打开第一个商品页); const price await agent.aiQuerynumber(当前售价单位元); if (price 5999) sendNotification(价格降到 ${price});批量跑多端回归你输入同样的两句指令换成不同的设备 Agent。它做Android、iOS、桌面 Agent 复用同一套aiAct、aiAssert语义只有底层连接不同adb、WebDriverAgent、系统截屏接口。你得到一套用例覆盖手机与桌面版本HTML 报告里每一步都有截图、耗时和通过状态失败用例可以逐步回放。import { AndroidAgent } from midscene/android; const android new AndroidAgent(adbDevice); await android.aiAct(打开购物车查看第一个商品); await android.aiAssert(商品图片右上角显示优惠券标识);把日常冒烟测试写成 YAML你输入一份十几行的 YAML。它做命令行按顺序执行流程与断言产出 HTML 报告。你得到非前端同事也能维护的冒烟测试CI 里加一条命令就能跑。想要更完整的测试工程可以看看文档里的 Midscene TestBetaYAML 写 UI 流程TypeScript Node 负责 API 调用和数据准备两边分工。page: url: https://example.com tasks: - name: 首页冒烟 flow: - ai: 搜索 天气 - aiAssert: 搜索结果区域出现了天气信息 接入你已有的工作流团队已经在用 Playwright这是最快的一条路在测试用例里建一个PlaywrightAgent把现成的page传进去传统定位器和视觉指令在同一份脚本里共存。插的位置就在page.goto之后——不好定位的步骤换成一句人话稳定的步骤继续用定位器报告随 Playwright 运行一起产出CI 不用动。test(登录流程, async ({ page }) { await page.goto(https://example.com); const agent new PlaywrightAgent(page); await agent.aiAct(点击登录按钮并输入用户名和密码); await agent.aiAssert(登录成功后首页显示用户头像); });适配层源码在 packages/web-integration/src/playwright/移动端接入参考Android 入门文档。另有 Bridge 模式终端里的 SDK 通过 CDP 接管本机浏览器适合 CI 流水线、批量采集这类不需要测试框架的场景。 选型 踩坑速查Q模型和网络依赖到底有多大A有且无法绕开。每个aiAct、aiQuery都要调一次多模态模型任意 OpenAI 兼容端点都能接Qwen、GLM、豆包以及开源模型可以自部署截图不出内网。各家模型的环境变量写法在模型配置里都有现成示例。Q能商用吗A能。整个项目 MIT 协议商用免费版权方是字节跳动。Q最常见的找不到元素怎么破A九成是时序问题——动作发生时画面还没加载完。先aiWaitFor页面就绪再动手断言不稳定就把描述写具体选中的方案有蓝色边框比选中状态正确好用。另外检查MIDSCENE_MODEL_BASE_URL末尾是否多拼了/chat/completions这是高赞报错之一。Q卡住了去哪找人A先翻FAQ再进 README 里列的社区渠道Discord、飞书群、X维护者响应比较快。装好 Chrome 扩展在自己项目的页面上先试一条填写这个表单配齐一组模型环境变量跑通上面 5 分钟的 demo挑团队里最稳定的 3 条业务流封装成aiActaiAssert组合打开产出的 HTML 报告逐条看每一步的截图和决策过程Midscene.js让 AI 看屏幕、替人操作的视觉化 E2E 测试框架。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考