企业官网建设流程全解析

别再追着选择器跑：Midscene.js 跨平台 UI 自动化快速上手指南

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

UI 测试脚本刚写好，前端一换组件类名，整个用例集当场全红。你刚把选择器修好，弹层、跨域 iframe、canvas 画出来的控件又让它们集体失灵——这是每个写 UI 自动化的人都躲不掉的日常。Midscene.js 是一个用视觉理解来驱动屏幕的 GUI 自动化项目：你用自然语言说清楚"要做什么、做完该看到什么"，它自己截图、自己找目标、替你点击、输入和校验。浏览器页面、安卓手机、iPhone、鸿蒙设备到桌面应用，一套 Agent API 全部覆盖。

🧭 靠"看屏幕"干活的数字同事

传统脚本更像背下了"页面第三行有个按钮"的人，界面一挪位就找不着北。Midscene.js 则像一个每轮都先看屏幕的新同事：观察当前画面，判断"点哪里能达成目标"，做完动作后再看一眼确认效果。全程不依赖类名和 DOM 结构，所以同一类脚本能从浏览器原样搬到手机屏幕上；只有图标的按钮、canvas 绘制的内容、跨域 iframe 里的元素，它都找得到。

⏱️ 一份 YAML 脚本就能跑起来

最短路径是官方 CLI：把流程写成 YAML，一条命令直接执行。

# bing-search.yaml page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气" - sleep: 3000 - aiAssert: 结果显示天气信息

运行前先在执行目录下放好模型配置（四个变量：服务地址、Key、模型名、模型系列，详见仓库内的脚本运行器文档）：

# 执行目录下创建 .env（dotenv 约定，无 export 前缀） echo 'MIDSCENE_MODEL_BASE_URL="你的模型服务地址"' > .env echo 'MIDSCENE_MODEL_API_KEY="你的 API Key"' >> .env echo 'MIDSCENE_MODEL_NAME="你的模型名称"' >> .env echo 'MIDSCENE_MODEL_FAMILY="你的模型系列"' >> .env npm i -g @midscene/cli midscene ./bing-search.yaml

环境要求 Node.js 20.19+、22.12+ 或 24+。跑完后会在输出目录生成一份可视化 HTML 报告，每一步的截图、动作和断言结果都在里面，失败了直接打开报告看哪一步走偏；网页场景加--headed还能看着浏览器把全程演一遍。

📱 它能帮你接手的三件小事

不怕换肤的 Web 回归。在现有 Playwright 项目里加几句自然语言：打开站点、搜索"headphones"、确认结果列表每条都有价格。过去半天耗在选择器维护上的功夫省下来，CSS 怎么改，脚本都不红。

不动代码的移动端走查。手机用 adb 连上，打开 Android Playground，口述"打开地图，搜索杭州西湖，开始导航"，屏幕上的全过程你能亲眼看着。指令验证通过后原样写进脚本，行为完全一致。

批量抽结构化数据。一句aiQuery就能把商品列表的"名称 + 价格"抽成 JSON 数组，不写任何选择器，竞品分析、价格巡检这类活直接能接。

第一次用的避坑经验

• 别盲写指令。先用 Playground 验证：网页装 Chrome 扩展，手机跑npx @midscene/android-playground。指令在 Playground 里通过后再粘进脚本，行为一致，省掉两头调试的工夫。

• .env放错地方白忙。它必须位于工具的执行目录，与 YAML 在哪无关；且默认不覆盖已存在的同名系统环境变量，需要时用--dotenv-override显式声明。

• 长流程交给aiAct。别用aiTap一步一步硬拆；目标元素小、容易和邻居混淆时加deepLocate提高定位准确度；等待用aiWaitFor盯"界面到达预期状态"，而不是固定 sleep 猜秒数。

适合谁上手：入口怎么选

团队里已有 Playwright 或 Puppeteer 框架的，直接装@midscene/web，复用现有测试运行器和 fixtures，框架不用换。还没想好写不写代码的，先装 Chrome 扩展，在自己的管理后台上验证几条指令，跑顺了再沉淀成脚本。

想自托管模型的，模型系列列表里包含 UI-TARS、Qwen 等开源选项，可以直接接自己的服务。完整的模型清单和各平台指南在仓库内的中文文档里。建议从单页面的搜索流程起步，跑通一次，再往多平台扩。

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene