视觉自动化测试新范式：用Midscene.js让AI替你点遍全平台界面

【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

你正对着满屏飘红的CSS选择器报错抓头发，隔壁工位的同事却已悠闲地喝完了咖啡——他只写了一句话，AI就替他把整条页面流程点完了。别怀疑，这不是段子，而是视觉自动化测试工具Midscene.js的日常。

01 先讲个扎心的场景

你是不是也曾在产品改版后被一屏"找不到元素"的报错劝退？辛辛苦苦维护的XPath、class选择器，说废就废，排查起来比写用例还累。更难受的是，有些界面你明明"看得见、摸得着"，传统工具却死活够不着。

这套老玩法，是时候换一换了。

02 三个老痛点，一次说透

说句大实话，传统UI自动化的痛点就三个，个个都让人破防：

• 重构即失效：产品一改版，选择器全军覆没，报错清单比需求文档还长。
• 原生应用够不着：没有DOM可依赖的App、藏在跨域iframe里的元素，传统工具只能干瞪眼。
• 看不见"对不对"：DOM节点存在不代表界面渲染正确，布局错位、样式跑飞这类视觉问题，普通断言根本抓不到。

而Midscene.js把这一切变成了另一件事：像人类一样"看"屏幕，再用自然语言发号施令。它不关心你的选择器叫什么，只关心你在屏幕上看到了什么、想做什么。

上面就是它的网页自动化工作台：左边输入一句"Click the search bar"，右边的页面立刻被智能定位并执行，全程没有写一个选择器。

03 3分钟上手：零代码插件与你的第一个Demo

不用装一堆环境，两条路任你选。

路线A：零代码，Chrome扩展直接玩

安装扩展 → 打开面板 → 填好AI模型参数 → 在任意网页输入一句人话，比如"在搜索框输入Midscene.js并回车"，点运行，看它表演。特别适合先感受效果、验证想法再决定是否深入。

路线B：写脚本，走正规军路线

npm create midscene@latest npm install export MIDSCENE_MODEL_PROVIDER=openai export MIDSCENE_API_KEY=你的密钥 npm run dev

跑起来之后，你的测试代码可以长这样：

await agent.aiAct('点击搜索框，输入"Midscene.js"，然后回车')

注意，这一行已经覆盖了"找元素 → 输入 → 触发搜索"三个动作，换成传统写法至少要七八行代码加一串脆弱的选择器。

04 能力全景：六张"卡片"看懂它能做什么

再补几个细节：Android不用root、iOS不用越狱，HarmonyOS设备也能管；桌面端Windows、macOS、Linux全覆盖。从packages/android/到packages/computer/，每个平台都有独立实现，源码随你翻。

05 原理翻译局：它凭什么叫"视觉"自动化？

一句话原理：Midscene.js给AI装上了一双能"看"屏幕的眼睛。

传统工具的"眼睛"是DOM树，只能读懂结构化代码；Midscene.js则把整块屏幕截图喂给多模态大模型，让模型像人一样"看着画面想事情"——你只需要交代"把右上角的设置点开"，它自己会完成定位、点击、验证的闭环。

整个过程大致是：

1. 截屏 → 2. 模型理解画面 → 3. 推理出元素位置 → 4. 执行动作 → 5. 截屏确认结果

是不是像一位"屏幕前的实习生"？你交代需求，它自己看着办。核心实现藏在packages/core/里，想深挖的话，顺着src/agent/往下翻就有答案。

06 实战故事：一个周二的CI流水线

想象一个周二的下午，你在CI流水线上并行跑着三条自动化用例：

• 回归验证：提交了一个样式改版，旧的断言全炸？Midscene不看DOM、只看渲染结果，改版后照样精准通过。
• 跨端联调：同一个登录流程，Web、Android、iOS各跑一遍，指令写一次、处处执行，报告自动汇总。
• 失败复盘：深夜一条用例挂了，打开生成的报告，每一步都有截图和步骤描述，五分钟定位问题，不用再靠日志猜谜。

报告还支持"Open in Playground"一键回放——把失败现场搬进调试环境，当场改指令重跑。

手机端调试的体验更直观：左侧输入指令，右侧就是真机实时画面，所见即所得。

07 你可能想问：四个高频疑问一次答清

Q1：必须用OpenAI的模型吗？不一定。它支持多家模型提供商，也能对接私有化部署的模型，按你的合规要求和预算灵活选择。

Q2：设备连不上怎么办？九成是环境问题：Android检查USB调试是否开启，iOS确认WebDriverAgent状态。各平台排查清单都在apps/site/docs/里，照着走一遍就行。

Q3：会不会很慢、很费钱？有取舍。截图质量、缓存策略、操作批量都能调，官方也在持续优化调用次数。小步验证、合理缓存，成本完全可控。

Q4：能接进我现有的测试框架吗？能。SDK设计就是为"融入"而生，和你的CI/CD、现有测试套件都能协作，报告支持HTML、JSON等格式导出。

08 动手下一步：文档、仓库与社区入口

• 快速上手文档：apps/site/docs/en/quick-start.mdx
• 各平台指南：Android、iOS、桌面都有专文，入口在apps/site/docs/
• 想本地把玩源码：

git clone https://gitcode.com/GitHub_Trending/mid/midscene

• 遇到问题：Issues提需求、社区实时交流，维护者很活跃

直接上干货：今天下班前，打开你的Chrome装好扩展，对它说一句"帮我把搜索框里的内容清空"——你会回来感谢自己。

09 一页速览

视觉自动化测试的下一步，是让AI替你"看见"并"动手"。

✨ 自然语言驱动，告别选择器地狱 📱 Web / Android / iOS / 桌面全平台覆盖 👀 基于视觉的智能校验，看得见"对不对" 📊 每一步都可回放的可视化报告

如果你正被UI自动化折腾得够呛，Midscene.js值得你花一个晚上，换来往后无数个清闲的下午。

【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene