企业官网建设流程全解析

Midscene.js：用自然语言做 UI 自动化测试

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

页面重构完，测试脚本里 40 多个 CSS 选择器全废了，团队花了一整天改选择器。Midscene.js 是一个基于视觉的 AI 驱动 UI 自动化测试框架：它不看 DOM，靠截图"看"懂界面，用自然语言完成点击、输入和断言，覆盖 Web、Android、iOS、HarmonyOS 和桌面应用。

🔍 它是怎么工作的：从截图到自然语言

流程一共三步：先对当前界面截图，再把截图交给视觉模型去"读"——按钮在哪、输入框里写着什么、页面处于什么状态，最后按你输入的自然语言执行：找到元素、点一下、输入内容，或者断言屏幕上出现了某个状态。

整个过程不碰 DOM 结构，也不写 CSS 选择器。所以图标按钮、canvas、自定义绘制的控件，甚至跨域 iframe 和原生应用的界面，只要"看得见"就能操作。UI 改版之后，你要调整的可能是一句话描述，而不是一堆选择器。

👥 按角色选，三种用法

非程序员：Chrome 扩展（零代码）

从 Chrome Web Store 装好 Midscene，在任意网页打开侧边栏，直接输入"点击搜索框并输入 Midscene.js"，点运行，AI 就会看懂页面并完成操作；也可以让它提取数据，比如"获取页面商品的名字和价格"。不用搭项目，不用写代码。

开发者：本地 SDK + Bridge 模式

想在本地脚本里自动化浏览器，用 SDK + Bridge 模式：浏览器装好扩展后保持连接，脚本在终端里跑，操作由终端远程发起。适合长时间任务，也适合手动操作和脚本执行来回切换的场景。具体配置见 桥接模式文档。

已经在用 Playwright 的人

Playwright 继续负责开页面、等元素，不想写选择器的部分交给 Midscene：

import { PlaywrightAgent } from '@midscene/web/playwright'; const agent = new PlaywrightAgent(page); await agent.aiAct('在搜索框输入 Headphones，按回车'); await agent.aiWaitFor('至少出现一个耳机商品'); const items = await agent.aiQuery('{itemTitle: string, price: number}[]');

两类调用可以在同一个测试用例里混用，完整写法见 Playwright 集成文档。

🚀 Midscene 三步快速上手

第一步，安装依赖：

npm install @midscene/web

第二步，输入第一条指令。拿到 Playwright 管理好的页面后创建 Agent，写一句自然语言操作：await agent.aiAct('在搜索框输入 Midscene，按回车搜索')。

第三步，看结果。脚本跑完后 Midscene 自动生成测试报告，每一步的截图、耗时、成功与否都在里面，可以逐步回放整个执行过程。上手细节可参考 快速开始。

跨平台 UI 测试的两个典型场景

多端 UI 一致性验证。同一个登录页在 Web、Android、iOS 三端都有，三端框架不同、选择器不同，但界面语义一样。用同一句自然语言断言，就能把三端都验证一遍：

await webAgent.aiAssert('页面顶部显示导航栏和登录按钮'); await androidAgent.aiAssert('页面顶部显示导航栏和登录按钮');

表单填单自动化。内部系统的报销单有 20 多个字段，每月都要手填。可以让 Midscene 按描述逐项填好再提交：打开表单页 →aiAct('把姓名栏填为张三，把月份选为 9 月')→aiAssert('提交后弹出确认对话框')。字段标签变了，改的是这句话，不是选择器。

⚙️ 视觉测试上生产：4 个注意点

• 报告先行。每步操作自动记录截图、耗时和成败状态，出问题时基本可以在报告里直接定位到哪一步、什么界面状态。
• 用等待条件代替固定 sleep。页面加载不稳的步骤，用aiWaitFor等"至少出现一个商品"这类条件成立再往下走；偶发失败的操作配置重试次数。
• 按场景选模型。支持 Qwen、Doubao-Seed、GLM、Gemini、UI-TARS 等多种视觉模型，可以走云端 API，也可以用本地部署的开源模型；有敏感数据的场景优先本地。
• 接进 CI。项目是 MIT 协议，可以加进 GitHub Actions 等 CI/CD 流程，每次提交自动跑一轮回归，报告随流水线产出。

常见问题

需要联网吗？视觉识别需要调用 AI 模型，可以选云端 API，也可以选本地部署的开源模型，纯内网场景用本地模型即可。

移动端和桌面端支持吗？支持。Android、iOS、HarmonyOS 和桌面端都有对应 SDK，跨平台用同一套 API。

脚本门槛高吗？扩展方式不用写代码；脚本方式会一点 JavaScript 就能起步，先装依赖、再写一句aiAct指令即可。

项目采用 MIT 协议开源，想进一步看源码和文档：

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

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