如何用自然语言驱动UI自动化测试Midscene.js 视觉自动化上手指南【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款基于视觉语言模型的开源 UI 自动化测试工具它不看 DOM、不维护选择器而是把屏幕截图交给多模态模型用一句自然语言完成定位、点击与断言。这篇文章从一个真实的选择器灾难讲起带你理解它的原理、两条上手路径与实战要点读完就能动手跑通第一个用例。那个改版就崩的周一早晨想象这样一个场景你负责一套 Web 应用的回归测试40 条用例跑得好好的。周一产品上线了新版本UI 重构把某个按钮的 class 从btn-primary改成了button--main把某个输入框的 id 从search-input改成了search-field。于是——37 条用例全部报错报错信息清一色是Element not found。你打开代码翻出层层叠叠的#search-input、.btn-primary、[data-testidxxx]开始一条条改。改完这轮下个迭代前端再重构一次你又得再改一遍。日复一日测试维护的时间比写业务还多。这不是你不够努力而是传统 UI 自动化工具的底层逻辑决定了它天生脆弱它把界面理解成 DOM 树和可访问性树测试依赖的是一堆随时可能变化的实现细节。一旦结构变动测试就断。这还不算原生应用无法读取 DOM、跨域 iframe 触达不到、纯视觉元素没有语义标记这类硬伤。那如果换一种思路呢换个思路让 AI看界面而不是找元素Midscene.js 的做法彻底跳出了选择器思维它只做一件事——截图然后把截图交给视觉语言模型。你的每一步操作都写成一句自然语言比如点击搜索框输入 Midscene.js按回车。模型看到界面截图后自己判断元素在哪里、该做什么动作。这和人类测试员的思路完全一致你不会关心按钮的 class 叫什么你只关心右上角那个蓝色的按钮。Midscene.js 就是把这个过程自动化了。上图是 Playground 的网页自动化界面左侧输入一句Click the search bar这类自然语言指令右侧模型实时截图定位并执行操作。整个交互过程像聊天一样直观。视觉驱动带来的 4 个实打实的改变换一个底层思路收益是连锁的。对比传统自动化你能立刻感受到四个变化重构不再破坏测试—— 前端改 class、改结构、换框架只要看起来没变测试就照常通过你终于不用追着选择器跑了。人类能看到的它都能操作—— 原生应用、跨域 iframe、canvas 绘制的界面、没有语义标记的元素Midscene.js 通通能触达因为它处理的是像素不是 DOM。验证的是看起来是否正确—— 传统断言检查节点是否存在而视觉断言能验证按钮真的显示、弹窗真的弹出、页面真的渲染成了预期模样。失败报告可读、可回放—— 每次运行自动生成可视化报告截图、操作步骤、模型决策过程一应俱全定位问题不再是翻日志。一句话概括你从维护选择器切换到描述意图把测试写成了人话。两条上手路径不写代码还是写脚本Midscene.js 照顾了两类用户想先体验的和想直接落地的。路径一装个 Chrome 扩展5 分钟玩起来如果你只想先试试水装 Chrome 扩展是最快的从 Chrome 应用商店安装 Midscene 扩展打开扩展面板可能折叠在浏览器扩展图标下点设置图标填入你的 AI 模型参数Provider、API Key、模型名在任意网页上直接用自然语言下达指令比如type Midscene.js and click search整个过程不需要写一行代码适合在正式接入前验证模型效果、调试提示词。它就像一个交互式游乐场让你直观感受视觉驱动的边界和手感。路径二npm 一行命令搭建自己的测试项目需要可重复运行的自动化流程JS SDK 提供了完整的编程能力# 创建新项目 npm create midscenelatest # 安装依赖 npm install # 配置 AI 模型 export MIDSCENE_MODEL_PROVIDERopenai export MIDSCENE_API_KEYyour_api_key # 运行示例脚本 npm run dev跑通示例后你的第一个脚本大概长这样import { createAgent } from midscene/web; const agent await createAgent(); await agent.aiAction(点击搜索框输入 Midscene.js 教程); await agent.aiAction(按回车开始搜索); await agent.aiAssert(搜索结果中有关于 Midscene.js 的文章);这里要提醒新手最常踩的坑都集中在模型配置上。遇到模型响应异常按这个顺序排查API Key 是否配置正确、所选 Provider 服务是否正常、网络能否连通模型接口、模型名是否在 Provider 白名单内。多数AI 不听话的问题根源都在这四步里详细的参数说明见模型配置文档。同一句话跑遍 Web、手机与桌面上手之后你会发现最大的惊喜是同一套自然语言心智模型能迁移到所有平台。Web 浏览器从 Playwright/Puppeteer 到桥接模式Web 端支持 Playwright、Puppeteer 等多种驱动方式直接嵌入现有测试框架即可。除此之外还有一个很有意思的桥接模式通过本地 SDK 直接接管你正在用的桌面 Chrome 浏览器。如上图右侧面板里输入指令左侧真实 Chrome 页面立即执行。你日常手动操作的浏览器可以直接变成自动化测试的执行环境特别适合调试和即兴验证。原理与配置见桥接模式文档。移动端Android、iOS还有鸿蒙移动端同样不吃DOM 那一套——原生应用根本没有 DOM 可读视觉驱动在这里的价值更加明显Android通过 ADB 连接设备控制任意应用iOS支持 iPhone/iPad配合 WebDriverAgent 操作系统界面与第三方应用HarmonyOS通过 hdc 连接华为鸿蒙设备移动端连接排查也是高频问题记住三个先查Android 先确认 USB 调试已开启iOS 先检查设备的信任设置两者都连不上时验证 ADB 或 WebDriverAgent 是否正常运行。具体到各平台的操作细节可以参考平台文档和案例展示。桌面端Windows / macOS / Linux 原生应用桌面自动化由packages/computer支撑支持系统级界面操作也包括基于 Electron 的应用。用同样的自然语言你就能驱动桌面客户端跑冒烟测试。模块地图30 秒看懂项目怎么组织Midscene.js 采用 monorepo 模块化设计各平台实现相互独立需要哪块看哪块模块作用位置核心引擎视觉 AI 驱动的基础能力、报告生成packages/coreWeb 集成浏览器自动化与桥接packages/web-integrationAndroid 支持设备连接与控制packages/androidiOS 支持设备连接与控制packages/ios计算机控制桌面应用自动化packages/computer桌面客户端可视化集成环境apps/studio这套结构意味着你可以只引入自己需要的平台包也可以直接阅读对应源码理解底层实现。把视觉测试搬进真实工作流工具再酷最终要服务于稳定、可重复、能接入工程体系这三个诉求。一次标准的视觉测试跑下来一个典型的视觉测试流程是四步走配置模型与测试环境 → 用自然语言描述步骤 → 执行并验证结果 → 查看可视化报告。如上图报告左侧按 Planning / Insight / Locate / Action / Assert 拆解每一步的耗时与状态右侧截图回放每一步的实际界面。出错时你能清楚看到模型当时看到了什么、决定做了什么、结果如何而不是面对一行干巴巴的报错。报告支持 HTML 与 JSON 格式方便归档和解析。接进 CI/CD让每次提交都有眼睛视觉测试可以像传统测试一样接入 CI/CDGitHub Actions、GitLab CI 等场景下生成报告、并行执行用例都没问题。如果你的测试目标是前端项目注意两点调优控制截图质量在精度与速度之间取平衡移动端建议优先用真实设备而非模拟器以获得更准的渲染结果善用缓存同一页面在多次断言间反复截图会重复消耗 AI 调用尽量合并相关操作、减少交互次数具体可参考缓存文档用 YAML 描述流程让非开发也能维护值得一提的还有 YAML 脚本运行器你可以把整个测试流程写成一份 YAML 描述文件由 CLI 直接执行。这让测试流程变成可读的文档团队成员都能审阅和修改详细写法见YAML 脚本文档。接下来怎么学文档、示例与社区快速开始中文快速上手文档从零到第一个用例模型配置模型配置文档覆盖主流 Provider 与参数调优示例代码仓库内置大量可直接运行的案例——核心引擎测试、Web 测试用例、Android 演示社区渠道官方 Discord 适合实时交流GitHub Issues 用来报 bug 和提需求结语传统 UI 自动化把测试写成了和 DOM 结构搏斗而 Midscene.js 把它变成了和产品对话。选择器会过期而看起来对不对永远不会过时——从今天起用一句自然语言开始你的视觉自动化之旅吧。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
