Midscene.js 自然语言自动化教程：从跑通第一个脚本到上手 E2E 测试的完整指南

Midscene.js 自然语言自动化教程从跑通第一个脚本到上手 E2E 测试的完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个用自然语言驱动界面操作的 GUI Agent 框架你不再需要写querySelector和 XPath只要用一句中文描述要做什么、结果该长什么样它就能通过看截图自己找到元素、点击、输入并校验结果。它把 AI 的视觉能力和一套完整的 E2E 测试工具Playwright 集成、YAML 脚本、可视化报告打包在一起覆盖 Web、Android、iOS、HarmonyOS 和桌面端。适合两类人想摆脱选择器维护地狱的测试工程师以及只想快速验证界面行为的产品、开发同学。为什么 E2E 测试总在找不到元素上卡住先说一个很常见的场景你写了个 Playwright 用例验证搜索结果页有商品。上线那天前端把列表重构了一下[data-testiditem]没了CI 一片红你打开 DevTools 重新翻 DOM改了 20 个选择器又花掉一下午。更麻烦的是图标按钮、canvas 画出来的内容、跨域 iframe 里的控件——这些在 DOM 里根本没有稳定的抓手传统工具只能干瞪眼。Midscene.js 的思路是反过来的不解析 DOM而是让模型像人一样看屏幕。它截取当前界面靠视觉和位置判断元素在哪里再执行点击或输入。只要用户看得到它基本就能点到——哪怕按钮换了颜色、挪了位置或者根本没有 DOM 语义。最轻量的体验方式是浏览器插件装上之后打开任意网页在侧边栏输入一句点击登录按钮就能看它规划、定位、执行的全过程不用写一行代码。它怎么工作看屏幕、执行动作、验证结果 ️整个框架围绕人的操作习惯设计了四类能力理解它们基本就理解了 Midscene.jsaiAct给一个多步骤目标比如搜索耳机把结果过滤到 100 美元以下。它会自己拆解步骤、定位元素、边做边看直到完成。适合流程不确定、有分支的任务。aiTap/aiInput即时交互类 API一次只做一个动作——定位某个元素然后点一下、填一段字。更快、更省 token。aiAssert用自然语言断言用户应该看到什么条件不成立就抛出错误。比如选中方案有蓝色边框和勾选标记连 canvas 里的视觉状态都能校验。aiQuery从界面提取结构化数据指定返回类型即可不用手动解析 DOM。这四类 API 在所有平台上是同一套这也是它跨平台的关键——你学一遍Web、手机、桌面通用。30 分钟跑通第一个 Web 自动化脚本假设你已经配好了一个多模态模型仓库里的快速开始文档给了完整步骤接上 Playwright 只需要几行代码import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); // 让 Agent 完成一段流程再验证结果 await agent.aiAct(搜索耳机把结果过滤到 100 美元以下); await agent.aiWaitFor(过滤后的搜索结果已显示); await agent.aiAssert(搜索结果里的商品价格都低于 100 美元);跑完之后Midscene.js 会生成一份交互式 HTML 报告每一步的截图、AI 的规划过程、元素位置框、断言结果都在里面。用例挂了不用先翻代码先翻报告——这点对定位偶发问题特别省事。如果不想写 TypeScript也可以直接用 YAML 描述流程仓库文档用 YAML 格式的自动化脚本有完整说明page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果中展示了天气信息需要更细的 API 参数和行为约定可以读基本概念里面把规划类、即时交互类、理解类 API 的边界讲得很清楚。同一个 Agent接着控制 Android 和 iOS 跨平台不是再封装一层 API而是真的同一套调用。Android 端通过 adb 连接真机或模拟器iOS 端通过 WebDriverAgent连接建立后aiAct、aiQuery、aiAssert的写法和你写 Web 时一模一样。官方还给每个平台配了 Playground可以在浏览器里实时看到手机画面被投屏出来、指令被逐步执行。移动端的环境准备比 Web 多一些步骤装 adb、开启 USB 调试、配置模型环境变量具体流程和排错可以看仓库里的Android 平台指南照着做基本半小时能连上第一台设备。几个踩过的坑和进阶用法先在 Playground 里把指令调顺再写进脚本。同一句点击登录按钮如果页面上有两个带登录字样的入口模型可能会犹豫。在插件里多试几种表述把稳定那句搬进代码能省掉大量调试时间。小图标点不中时开deepLocate。像右上角 20 像素的购物车图标普通定位容易点偏加一个{ deepLocate: true }会多一轮精确定位命中率明显提升。用aiContexts给模型补充业务背景。比如告诉它页面价格单位是美元金额只返回数字能减少它自作聪明的情况。失败时看报告而不是猜。HTML 报告里有模型当时的截图和推理文本多数玄学失败打开报告一眼就能看出是页面没加载完还是指令有歧义。另外它默认只用截图、不传大段 DOM 给模型官方基准测试里 60 个任务的模型总成本只有几毛钱日常跑回归的压力不大。学习资源与下一步建议想动手的话最短路径是装 Chrome 扩展 → 配好模型 → 在任意网页输入搜索某关键词并点击第一个结果看它跑起来整个过程不需要搭项目。验证顺手之后再按集成到 Playwright的文档把指令搬进自己的测试脚本最后看一眼生成的 HTML 报告确认每一步都符合预期。仓库内apps/site/docs/zh/目录下还有模型配置、缓存、MCP 集成等进阶文档遇到具体问题时按需翻即可。如果后续想扩展到真机建议从 Android 起步环境准备最成熟跑通一条完整用例后再考虑 iOS。整个仓库可以这样拉下来git clone https://gitcode.com/GitHub_Trending/mid/midscene【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考