视觉自动化测试0门槛入门：Midscene.js让自然语言驱动UI测试告别写死的选择器

视觉自动化测试0门槛入门Midscene.js让自然语言驱动UI测试告别写死的选择器【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene加班修选择器的夜晚我决定换个思路晚上十一点你又因为选择器失效在加班修脚本。页面只是改了个样式写死的地址就全断了。如果测试能像人眼一样看图而不是死记元素地址呢这正是 Midscene.js 做的事情一款视觉自动化测试工具只看截图、只听自然语言。改版不再让你彻夜难眠重构不再让用例成片倒下——从这一刻起测试终于可以说人话了。Midscene.js 是什么一句话看懂它的定位Midscene.js 是一个以视觉为核心、用自然语言驱动 UI 测试的跨平台自动化测试工具。它把理解界面这件事交给多模态大模型工具只负责截屏模型负责像人一样看懂画面里的按钮、输入框和列表再根据你的话执行操作。DOM、class、id 这些脆弱的细节统统不参与。核心能力速览✅️视觉驱动仅基于屏幕截图理解界面改版重构不会弄坏用例跨平台覆盖Web、Android、iOS、HarmonyOS、桌面应用含 Electron一套思路通吃️自然语言交互aiAct操作、aiQuery取数、aiAssert断言三句话覆盖全部测试动作可视化测试报告每次运行自动生成可逐步回放的报告失败原因一眼看清模块化架构核心、Web、Android、iOS、桌面控制等包相互独立按需引入、互不拖累上手方式也分两种丰俭由人方式适合谁怎么用Chrome 扩展想零代码体验装插件、配模型、在任意网页直接下指令JavaScript SDK要可复用的脚本装依赖、写代码、接入测试框架 两种方式共用同一套核心能力在扩展里验证过的指令写成脚本后表现完全一致。三分钟完成安装部署环境、依赖与模型配置开始之前先确认你的环境满足下面这张表项目最低要求Node.js18 及以上版本浏览器Chrome 或 Edge建议大模型服务任意多模态 API通义、OpenAI、GLM、Gemini、豆包等均可移动/桌面设备可选Android 手机、iPhone、鸿蒙设备或一台电脑第一步拿到代码。想研究整个仓库可以直接克隆git clone https://gitcode.com/GitHub_Trending/mid/midscene只想在自己项目里用一行命令装好核心依赖即可npm install midscene/web playwright tsx --save-dev第二步配置多模态模型。把下面四个环境变量填成你自己的值以通义千问为例export MIDSCENE_MODEL_BASE_URLhttps://dashscope.aliyuncs.com/compatible-mode/v1 export MIDSCENE_MODEL_API_KEY你的API密钥 export MIDSCENE_MODEL_NAMEqwen3.7-plus export MIDSCENE_MODEL_FAMILYqwen3 小提示如果不写代码Chrome 扩展的设置面板里粘贴同样的四行配置就能用效果不打折。五分钟跑通第一个AI自动化测试脚本这是你 AI 自动化测试入门的第一步让脚本自己看着页面完成一次搜索。把下面代码存成demo.tsimport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; (async () { const browser await chromium.launch({ headless: false }); // 打开可见窗口方便你盯着看 const page await browser.newPage(); await page.goto(你的测试页面地址); // 替换成真实网址 // 之后的操作全部用人话描述模型会自己看屏幕、找元素 const agent new PlaywrightAgent(page); await agent.aiAct(点击页面顶部的搜索框输入无线耳机并回车); await agent.aiAssert(页面里出现了至少一件耳机商品); await browser.close(); })();按下面的步骤跑一遍整个过程不到五分钟新建目录并安装上文提到的依赖将模型配置写入环境变量或.env文件创建demo.ts粘贴上面的代码运行npx tsx demo.ts观察浏览器窗口里 AI 自动点击、输入、回车运行结束后终端会打印一行类似Midscene - report file updated: ./midscene_run/report/xxx.html的日志用浏览器打开它就能看到每一步操作和画面截图。下图就是网页版 Playground 的典型界面——左侧输入自然语言指令右侧实时反馈执行结果五大实战场景一次讲透场景一Web 页面回归改版不再焦虑场景说明前端每周都改版回归用例三天两头变红追着 class 名跑断腿。操作要点把 Midscene 接进现有的 Playwright 或 Puppeteer 测试套件用aiAct描述点击、输入、滚动用aiQuery抓取页面数据用aiAssert校验状态。比如点击登录按钮统计导航栏里有多少个入口这类话直接写进用例。效果呈现样式重构后用例依旧稳定还能验证看起来对不对——弹窗样式、空态文案、配色是否正确这些传统框架根本管不到。场景二Android 原生 App无 DOM 也能测场景说明原生应用没有 DOM 树传统自动化工具直接哑火而这恰恰是大多数 App 的常态。操作要点手机开启 USB 调试并连接电脑启动 Android Playground 后输入一句打开设置查看系统版本号之类的指令AI 会自己规划步骤、逐屏点击。效果呈现MIUI 设置页这类系统级界面也能被顺畅操作全程截图驱动、无需任何注入。下图就是 Android 设备上执行自然语言指令的画面场景三iOS 与 iPhone苹果生态同样适配场景说明iOS 系统界面和第三方 App 封闭性更强想自动化更是难上加难。操作要点通过 WebDriverAgent 连接模拟器或真机随后在 Playground 里下发指令例如打开通用设置并查看当前 iOS 版本。效果呈现设置页、应用内多步流程都能操作和断言iOS 与 Android 用同一套自然语言语法学习成本几乎为零场景四桌面应用与鸿蒙最后一公里也打通场景说明Windows、macOS、Linux 桌面程序包括 Electron 应用以及 HarmonyOS 设备过去基本只能靠人工点点点。操作要点引入对应的平台包桌面端用截图控制窗口与输入鸿蒙端走设备调试通道指令写法与 Web 端完全一致。效果呈现原生桌面程序、Electron 应用、鸿蒙系统界面都能被自然语言驱动跨平台自动化测试工具名副其实。场景五可视化测试报告失败原因不再靠猜场景说明CI 里用例挂了你对着日志猜了半小时原因连哪一步出错都看不清。操作要点每次运行后打开midscene_run/report目录下的 HTML 报告沿着时间轴逐步回放每一步的截图、指令、提取结果与断言结论。效果呈现几分钟内锁定是哪一步、哪个视觉判断出了问题报告里还带调试入口点一下就能进入 Playground 现场修复动态报告更是把整个执行过程演给你看搜索、筛选、断言一目了然避坑指南五个高频问题一次说清问题 1模型报错指令完全没反应原因四个MIDSCENE_MODEL_*环境变量有拼写错误或密钥、模型名不匹配。解法逐一核对 Base URL、密钥、模型名、模型家族四项先在最简单的页面上用一条短指令做冒烟验证。问题 2AI 操作看走眼点错了元素原因截图分辨率低、目标元素过小或指令描述太含糊。解法把浏览器窗口调大、提高截图清晰度把点那个按钮改成点击右上角橙色立即购买按钮大任务拆成小步骤。问题 3Android 设备连不上原因USB 调试未开启或 ADB 没有识别到设备。解法在开发者选项里打开 USB 调试用adb devices确认设备在线再重连 Playground。问题 4报告打不开或显示空白原因找错了日志里的报告路径或用了兼容性差的浏览器打开。解法复制终端打印的midscene_run/report/...完整路径用 Chrome 或 Edge 打开。问题 5接口调用太慢费用偏高原因每一步操作都会调用一次模型反复执行相同页面浪费了大量请求。解法开启缓存功能复用页面上下文减少重复调用根据任务难度选择不同档位的模型。⚠️ 温馨提示遇到拿不准的问题先翻仓库里apps/site/docs/zh/faq.md八成能找到现成答案。进阶之路从会用走向精通跑通第一个脚本只是开始Midscene.js 的进阶玩法比想象中更多YAML 脚本编排把测试步骤写成 YAML 文件不懂代码的同事也能维护自动化流程CI 里直接跑Bridge 桥接模式Chrome 扩展负责看屏幕本地 SDK 负责发指令脚本可以直接驱动真实浏览器窗口调试体验接近人机协作测试框架集成与 Playwright、Puppeteer、vitest 组合进现有流水线输出 HTML/JSON 报告供 CI 归档缓存与模型策略用缓存压低成本按任务难度切换模型做到便宜够用、贵的精准官方学习资源仓库里apps/site/docs/zh/下的快速开始、快速体验、模型配置文档足够系统packages/*/tests/ai/目录还有大量真实可跑的示例脚本照着读一遍收获很大写在最后还记得开头那个深夜吗写死的选择器、改不完的脚本、追不上的重构节奏——Midscene.js 用一句话改变了这一切测试不再追着结构跑而是看着画面走。视觉自动化测试把人眼看图的能力交给了机器自然语言驱动 UI 测试让任何人都能写用例而可视化测试报告让每次失败都清清楚楚。今晚别再加班了。装上 Chrome 扩展体验一条指令或者用五分钟跑通一个最小脚本——让 AI 成为你的测试搭档从下一个用例开始。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考