Midscene.js 快速上手指南:用自然语言完成 E2E 测试,不再维护选择器
Midscene.js 快速上手指南用自然语言完成 E2E 测试不再维护选择器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js是一个由 AI 视觉驱动的 E2E 测试工具GUI Agent。它不解析 DOM、不依赖 CSS 选择器而是像人一样看界面截图你用自然语言描述操作它就能完成点击、输入、数据提取和结果断言。同一套 API 覆盖网页、Android、iOS 和桌面端。自然语言驱动界面为什么比选择器好维护传统 UI 测试的脆弱点在于结构依赖页面一重构选择器就失效Canvas、游戏界面、只有图标没有语义标记的按钮DOM 方案根本找不到。Midscene.js走的是纯视觉路线——元素定位只依据截图。这带来几个实际好处UI 改版后不用追着改选择器人眼能看到的元素它都能操作包括 Canvas 和跨域 iframe能断言用户实际看到的东西颜色高亮、布局、渲染状态而不只是某个 DOM 节点存在核心的截图理解与动作规划逻辑在 packages/core/ 中支持接入 UI-TARS、Qwen3-VL 等具备 UI 定位能力的多模态模型其中开源模型可以自部署。三种核心指令aiAct、aiQuery、aiAssertMidscene.js 的用法高度收敛基本就是三个动词先记住它们指令作用特点aiAct执行一段自然语言目标会自己规划多步操作适合复杂任务aiQuery从界面提取结构化数据可指定返回的 JSON 结构aiAssert断言界面是否符合预期失败时直接抛错以 Playwright 集成为例一个典型的测试脚本长这样import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in search box, hit Enter); const items await agent.aiQuery( {itemTitle: string, price: number}[], find items with prices in the list, ); await agent.aiAssert(There is a category filter on the left);一句话解释aiAct负责干活aiQuery负责读数aiAssert负责验货三者配合就是一条完整的测试链路。更多参数如deepThink、deepLocate可以参考 Playwright 集成文档。 Chrome 扩展里先试一遍零代码跑通第一条指令不确定某句自然语言描述是否稳定先在 Playground 里验证再写进代码。安装 Midscene 的 Chrome 扩展后打开任意网页在侧边栏输入指令即可支持 Action操作、Query提取数据、Assert检查界面三种类型扩展里验证过的每一条指令都能原样对应到midscene/web的 Agent API从试玩到落码没有迁移成本。具体步骤见快速上手文档。不写代码一个 YAML 文件就是测试用例对只做冒烟测试的场景维护一整套测试工程太重了。Midscene.js 允许把用例直接写成.yaml文件page: url: https://www.bing.com tasks: - name: Search for weather flow: - ai: Search for todays weather - sleep: 3000 - name: Check results flow: - aiAssert: The results show weather information用 CLI 执行这个文件即可完成一轮搜索 断言。因为脚本本身是接近白话的描述产品或测试同学不学 API 也能读懂和修改用例这对团队协作很实用。脚本的完整字段说明agent配置、报告选项等在 YAML 脚本文档。同一套 API从网页到 Android 和 iOSMidscene.js 是跨平台的aiAct/aiQuery/aiAssert这套指令在移动设备和桌面上同样有效Android基于 adb scrcpy 实现设备镜像、投屏、操作都能做见 packages/android/iOS通过 WebDriverAgent 控制真机和模拟器桌面端支持 macOS、Windows、Linux 的桌面应用操作模型层面官方用同一批 case 对不同视觉模型做了基准测试方便你按预算和精度需求选型选型和自部署的细节可以看模型策略文档。下一步建议装 Chrome 扩展在一个你熟悉的页面上用三条指令各跑一遍验证你的自然语言表述是否清晰挑项目里一条核心路径比如登录 下单先写一个 YAML 冒烟脚本跑通稳定后再用PlaywrightAgent把它整合进现有的 Playwright / Vitest 测试套件接上 CI【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考