企业官网建设流程全解析

Midscene.js 视觉 UI 自动化：一句话驱动 Web / Android / iOS 三端五平台 E2E 测试

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

Midscene.js 是一个面向 E2E 测试的 AI 视觉 UI 自动化框架。写一句"点击登录按钮"，它会截图、找到按钮、真的点下去。同一套 Agent API 覆盖 Web、Android、iOS、HarmonyOS、桌面五个平台。有 Node 环境、配一个多模态模型的 API Key，5 分钟能跑通第一个脚本。

🧭 它跟传统方案差在哪

传统 UI 自动化把"点哪里"绑定在 DOM 结构上：选择器写死在脚本里，页面一改，测试就挂。Midscene.js 换了一条路——不读 DOM、不解析可访问性树，只把截图交给多模态模型，由模型按外观和位置定位元素，再调用平台层完成点击、输入、滚动。于是只有图标的按钮、canvas 画出来的内容、跨域 iframe 里的控件、根本没有 DOM 的原生应用，都能用同一种方式操作。"断言"的含义也变了：不再是验证某个节点存在，而是验证用户在屏幕上真正看到了什么，比如高亮、边框、错误提示这些视觉状态。代价是每次动作多一次模型推理，换来的是选择器零维护——官方基准里 60 个 AppControlBench 任务的模型调用总成本只有 0.59 美元。

⚡ Midscene.js 上手步骤：5 分钟跑通第一个 demo

环境准备：Node 环境装好@midscene/web和 Playwright，配齐MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY四个变量，各家模型的配置示例见模型配置。

import { chromium } from 'playwright'; import { PlaywrightAgent } from '@midscene/web/playwright'; const browser = await chromium.launch(); const page = await (await browser.newContext()).newPage(); await page.goto('https://www.bing.com'); const agent = new PlaywrightAgent(page); await agent.aiAct('在搜索框中输入 "Midscene.js" 并点击搜索按钮'); const titles = await agent.aiQuery<string[]>('前三条搜索结果的标题'); console.log(titles); await browser.close();

刚才发生的事：AI 看了屏幕，替你找到了搜索框、输入并点击，还把前三条结果标题从画面上读了回来。

进阶用法两三句带过：aiWaitFor等页面就绪，aiAssert断言可见结果，外层套 try/catch 即可实现重试。不想写代码时，Chrome 扩展侧边栏直接输入指令就能跑，验证过的句子可以原样搬进脚本，参考快速开始。

🎬 视觉自动化的三个典型场景

盯住竞品价格变化

你输入：一句"搜索 iPhone 16 并打开第一个商品页"。它做：aiAct完成搜索、点击、翻页，aiQuery再让模型从画面上读出价格，直接返回数字。你得到：一个结构化数值，可以直接和阈值比较、写进表格、触发通知，全程不解析 HTML。商品页改版后，脚本通常一个字都不用改。

await agent.aiAct('搜索 "iPhone 16"，打开第一个商品页'); const price = await agent.aiQuery<number>('当前售价，单位元'); if (price < 5999) sendNotification(`价格降到 ${price}`);

批量跑多端回归

你输入：同样的两句指令，换成不同的设备 Agent。它做：Android、iOS、桌面 Agent 复用同一套aiAct、aiAssert语义，只有底层连接不同（adb、WebDriverAgent、系统截屏接口）。你得到：一套用例覆盖手机与桌面版本，HTML 报告里每一步都有截图、耗时和通过状态，失败用例可以逐步回放。

import { AndroidAgent } from '@midscene/android'; const android = new AndroidAgent(adbDevice); await android.aiAct('打开购物车，查看第一个商品'); await android.aiAssert('商品图片右上角显示优惠券标识');

把日常冒烟测试写成 YAML

你输入：一份十几行的 YAML。它做：命令行按顺序执行流程与断言，产出 HTML 报告。你得到：非前端同事也能维护的冒烟测试，CI 里加一条命令就能跑。想要更完整的测试工程，可以看看文档里的 Midscene Test（Beta）：YAML 写 UI 流程，TypeScript Node 负责 API 调用和数据准备，两边分工。

page: url: https://example.com tasks: - name: 首页冒烟 flow: - ai: 搜索 "天气" - aiAssert: 搜索结果区域出现了天气信息

🔌 接入你已有的工作流

团队已经在用 Playwright，这是最快的一条路：在测试用例里建一个PlaywrightAgent，把现成的page传进去，传统定位器和视觉指令在同一份脚本里共存。插的位置就在page.goto之后——不好定位的步骤换成一句人话，稳定的步骤继续用定位器，报告随 Playwright 运行一起产出，CI 不用动。

test('登录流程', async ({ page }) => { await page.goto('https://example.com'); const agent = new PlaywrightAgent(page); await agent.aiAct('点击登录按钮并输入用户名和密码'); await agent.aiAssert('登录成功后，首页显示用户头像'); });

适配层源码在 packages/web-integration/src/playwright/，移动端接入参考Android 入门文档。另有 Bridge 模式：终端里的 SDK 通过 CDP 接管本机浏览器，适合 CI 流水线、批量采集这类"不需要测试框架"的场景。

🧯 选型 & 踩坑速查

Q：模型和网络依赖到底有多大？A：有，且无法绕开。每个aiAct、aiQuery都要调一次多模态模型，任意 OpenAI 兼容端点都能接；Qwen、GLM、豆包以及开源模型可以自部署，截图不出内网。各家模型的环境变量写法在模型配置里都有现成示例。

Q：能商用吗？A：能。整个项目 MIT 协议，商用免费，版权方是字节跳动。

Q：最常见的"找不到元素"怎么破？A：九成是时序问题——动作发生时画面还没加载完。先aiWaitFor"页面就绪"再动手；断言不稳定就把描述写具体，"选中的方案有蓝色边框"比"选中状态正确"好用。另外检查MIDSCENE_MODEL_BASE_URL末尾是否多拼了/chat/completions，这是高赞报错之一。

Q：卡住了去哪找人？A：先翻FAQ，再进 README 里列的社区渠道（Discord、飞书群、X），维护者响应比较快。

• 装好 Chrome 扩展，在自己项目的页面上先试一条"填写这个表单"
• 配齐一组模型环境变量，跑通上面 5 分钟的 demo
• 挑团队里最稳定的 3 条业务流，封装成aiAct+aiAssert组合
• 打开产出的 HTML 报告，逐条看每一步的截图和决策过程

Midscene.js，让 AI 看屏幕、替人操作的视觉化 E2E 测试框架。

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