别再熬夜改选择器了3步上手Midscene.js视觉UI自动化让AI替你点鼠标【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上周三晚上十一点我还在为一个崩掉的测试哭丧着脸。页面只是把按钮图标换了张图之前写好的十几个#submit-btn、.login-form div:nth-child(3)就集体失效全组花了一下午重新定位元素改完没两天前端又重构了一次。这种选择器一碰就碎的痛做UI自动化的人应该都懂。所以当我第一次看到 Midscene.js 的时候说实话有点怀疑它号称完全不用选择器只要截图用自然语言告诉AI点这里、输那段字它就能自己完成操作。视觉UI自动化真能靠谱到这种程度吗今天这篇就想跟你聊聊这个开源项目到底是怎么做到的以及我怎么在半小时内跑通第一个用例。Midscene.js是什么一个能看懂屏幕的自动化引擎一句话概括Midscene.js 是一个基于视觉语言模型的开源UI自动化工具你写自然语言它看截图干活专治选择器维护到崩溃。它最特别的地方在于纯视觉——不是像传统工具那样去读DOM或者无障碍树而是把界面截图交给多模态大模型让模型自己判断搜索框在哪个位置、登录按钮长什么样。这意味着前端怎么改样式、怎么重构只要长得还像那么回事脚本就不用动没有语义标记的图标按钮、canvas画布里的元素、跨域iframe、甚至原生App界面人类肉眼能看到的东西它都能操作支持的模型很开放Qwen、豆包、GLM、Gemini 都可以连开源的 UI-TARS 也能自己部署数据不出内网。项目在 GitHub 上已经积累了不小的社区关注度截至撰写时它是 Trendshift 上的热门仓库之一而且从 Web 到 Android、iOS、鸿蒙、Windows/macOS/Linux 桌面应用全部覆盖背后是字节跳动等团队在维护质量是经过真实生产环境检验的。从零跑通3个步骤做出你的第一个视觉自动化别被AI自动化四个字唬住上手比你想的简单。官方提供了两条路零代码的 Chrome 插件和写脚本的 JavaScript SDK。想最快看到效果先装插件。第一步装好环境配一个模型安装 Chrome 扩展Chrome 应用商店搜 Midscene浏览器右侧会多出一个侧边栏在设置里粘贴你的模型配置格式就是一组环境变量比如export MIDSCENE_MODEL_PROVIDERopenai和export MIDSCENE_API_KEYxxx如果用的开源模型本地部署同样配置一下地址就行。第二步打开任意网页输入一句人话在侧边栏的输入框里打字比如在搜索框输入 Midscene.js 并点击搜索点运行AI 就开始干活了。你会看到它定位、点击、输入的每一步过程。第三步把它固化成脚本让流程可复用插件里试通了同样的能力写进代码长这样核心只有几行npm install midscene/web playwright tsx --save-devimport { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框输入 Headphones然后回车); const items await agent.aiQuery( { title: string, price: number }[], 列表中的耳机商品 ); await agent.aiAssert(页面左侧有分类筛选栏);跑完命令npx tsx demo.tsMidscene 还会生成一份 HTML 报告每次点击、查询、断言都能逐步回放排查问题就像看录屏。实战体验让AI替我做一次完整的下单流程光说理论没用我拿自己最常干的活儿练手帮朋友从商品列表页里找出指定型号核对参数再下单。以前这套流程我要写几十行定位逻辑现在全程用自然语言。整个任务被拆成四句话aiAct(在搜索框输入商品名并搜索)—— 操作aiWaitFor(列表里出现至少一个商品)—— 等待加载完成aiQuery({ title, price }[], 列出当前商品)—— 提取结构化数据aiAssert(购物车页面金额与商品页一致)—— 验证结果对不对。有意思的是同样一段话我在 Chrome 插件里验证完写成脚本后表现完全一致因为插件和 SDK 共用同一套核心引擎。社区里甚至有人拿它操作机械臂去测车机大屏视觉自动化的边界比你想的宽得多。传统做法 vs Midscene.js 做法差别是本质性的对比项传统自动化Midscene.js定位方式DOM选择器、XPath直接看截图前端改版后选择器失效返工界面没大变脚本照跑原生App/Canvas基本无能为力能看到就能操作验证内容元素存不存在用户真正看到的样子进阶技巧用得好的人才知道的3个细节1. 先在插件里试再写进测试套件。插件本质是官方给的调试沙盒一条指令能不能识别、模型定位准不准先在侧边栏试一遍确认无误再固化到 Playwright/Vitest 脚本里能省掉大量试错时间。2. 数据敏感部署开源模型自托管。Midscene 支持 UI-TARS 这类开源模型截图和指令都留在自己机器上。对数据合规要求高的团队这是把AI自动化引到生产环境的钥匙。3. 别忽视那份HTML报告。每次运行生成的midscene_run/report/报告会记录AI每一步的思考、定位和截图。模型偶尔犯迷糊时报告就是最有力的排查工具——多数人用不好是因为根本没看它。什么场景适合它什么场景要慎重诚实地说它不是万能药。适合UI频繁改版、团队不想维护选择器、需要跨 Web/App/桌面多端覆盖、或者你根本不想写脚本只想快速验证想法的人。要慎重如果你的断言强依赖像素级精度比如必须精确到颜色值、坐标偏移或者对单次执行延迟极其敏感纯视觉方案目前不如直接操作DOM来得快。另外它依赖模型质量模型选得差、页面过于杂乱时稳定性也会打折扣——好在可换的模型很多多试几家总有合适的。还有一点视觉调用是真实消耗模型算力的跑大批量任务前先估算好成本。一句话总结选择器会碎但人眼能看到的界面不会。Midscene.js 把UI自动化从维护定位标签这件事里解放出来让你把精力放回测试本身。想试试的话git clone https://gitcode.com/GitHub_Trending/mid/midscene把仓库拉下来照着apps/site/docs/zh/quick-start.mdx的快速开始文档走一遍装个插件、配好模型今晚你就能看到AI替你点第一次鼠标。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考