Midscene.js用自然语言驱动屏幕五分钟跑通第一个 UI 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个开源的 GUI 自动化测试工具用视觉语言模型驱动界面操作。你用自然语言写下测试步骤它通过截图看懂界面完成点击、输入和断言支持 Web、Android、iOS、HarmonyOS 和桌面端。从一个真实任务说起假设你在维护一套电商页面的回归测试。每天要重复打开登录页输入账号密码进后台检查三个商品的价格。传统做法要写一堆 CSS 选择器。页面改版一次选择器全废。canvas 里画出来的元素、没有 class 名的图标按钮传统工具基本碰不了。Midscene.js 的思路不同。它不读 DOM而是截图让视觉模型来判断登录按钮在哪价格显示的是多少。你的脚本里只写输入 standard_user点击登录这样的句子。界面布局变了只要视觉上还能认出元素脚本继续跑。 五分钟跑通第一次先装 CLI这是执行 YAML 脚本的命令行工具npm i -g midscene/cli装完终端里就有midscene命令了。注意 Node.js 版本要求 20.19、22.12 或 24版本过低会报 Rspack 的报错。然后配置模型。CLI 从.env文件读四个变量MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的 API Key MIDSCENE_MODEL_NAME你的模型名称 MIDSCENE_MODEL_FAMILY模型系列如 doubao-seed.env必须放在运行命令的目录下与 YAML 脚本所在目录无关。写第一个脚本bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息ai表示让 Agent 自主规划并执行这句话描述的动作aiAssert让 AI 检查界面是否符合描述。执行midscene ./bing-search.yaml命令行会实时打印执行进度结束后生成一份交互式 HTML 报告里面有每一步的截图、AI 决策和断言结果。不想写代码先体验的话可以装它的 Chrome 扩展。打开任意网页侧边栏直接输入点击登录按钮这类指令效果验证后再搬进测试脚本。它到底是怎么做到的可以把它理解成一个盯着屏幕干活的新同事。它干活前不翻代码、不看 DOM只拍一张屏幕照片。把截图交给多模态视觉模型模型返回登录按钮在坐标 (x, y)这样的信息。它再模拟鼠标点下去、敲键盘然后重新截图确认结果进入下一步。断言也是这个路子拍屏问模型页面上有没有操作成功的提示模型回答是或否。所以它天然适合三类传统工具搞不定的对象canvas 画布里的内容、跨域 iframe 里的元素、没有语义标签的原生 App 界面。代价是每一步都要走一次模型推理比直接操作 DOM 慢这是视觉方案的固有成本。一个完整例子仓库自带一个很完整的真实脚本对登录后的商品列表做数据提取加价格断言。它打开 saucedemo 商城登录把商品抽成 JSON 存盘最后校验某件商品价格web: url: https://www.saucedemo.com/ output: ./midscene_output/sauce-demo-items.json tasks: - name: login flow: - aiAct: type standard_user in user name input, type secret_sauce in password, click Login - aiWaitFor: there are products displayed on the page - name: extract items info flow: - aiQuery: {name: string, price: number}[] name: items - aiAssert: The price of Sauce Labs Fleece Jacket is 49.99脚本里用到了四个核心 API各管一件事aiAct自主规划并执行一串交互aiWaitFor等到界面出现指定状态才继续aiQuery把界面内容按指定结构抽成数据存进output指定的 JSON 文件aiAssert断言界面状态不满足则任务失败用midscene online.yaml跑完后你会得到两份产物一份商品数据 JSON一份带截图时间线的 HTML 报告。原始脚本可以翻 packages/cli/tests/midscene_scripts/online/online.yaml。几个值得知道的细节模型成本可控。README 里有一组公开数据用 Doubao Seed 2.1 Turbo 跑 AppControlBench 的 60 个任务模型总花费 0.59 美元。因为每次只发截图不用把整棵 DOM 树塞给模型账单会比预期好看。.env不覆盖全局变量。如果你已经在 shell 里 export 了MIDSCENE_MODEL_API_KEY.env里的同名值不会顶掉它。想强制覆盖要加--dotenv-override参数。可以开缓存。脚本里写agent: { cache: true }相同页面的重复调用可以复用之前的结果既省时又省钱适合回归测试这种反复跑同一场景的场景。老版 YAML 运行器已有下一代方案。文档里说明Midscene TestBeta是老版 YAML 方案的官方替代支持重试、多环境并发隔离和更完整的测试生命周期。新项目建议直接看新方案。报告就是调试工具。每次运行生成的 HTML 报告里能看到每一步 AI 的决策过程和截图。测试失败时先看报告里 AI 当时看到了什么比翻日志快得多。Web 之外也一样把脚本开头的web换成android、ios或desktop配上对应设备Android 走 adbiOS 走 WebDriverAgent同一套自然语言任务就能在手机和桌面上跑。去哪继续学中文文档入口apps/site/docs/zh/快速开始含 Chrome 扩展和其他平台的 Playgroundapps/site/docs/zh/quick-start.mdxYAML 脚本与 CLI 完整用法apps/site/docs/zh/yaml-script-runner.mdx模型支持与配置apps/site/docs/zh/model-common-config.mdx仓库内置的真实测试脚本可直接改着玩packages/cli/tests/midscene_scripts/项目说明中文README.zh.md一句话总结Midscene.js 把 UI 测试的选择器维护换成了自然语言描述。它靠截图加视觉模型理解界面Web、移动端、桌面端共用一套 API。装个 CLI配好模型写几行 YAML五分钟就能看到第一份带截图的测试报告。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考