Midscene.js用一张截图和自然语言跑通 UI 自动化10 分钟通过第一个测试测试工程师实操手册【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 AI 驱动的 E2E 测试 Agent给它截图和自然语言它自己看懂界面、定位元素并完成操作覆盖 Web、Android、iOS 和桌面端。本文带你走通从配置模型到跑通第一个自动化脚本的完整流程读完后你能独立运行它并看到可视化测试报告。选择器扛不住之后UI 自动化的真实代价一个典型场景前端团队改了个 class 名前一天的回归脚本集体挂掉。XPath 又要更新了。单个脚本修起来 5 分钟一百个脚本修一整天。这类痛点在 SPA 和原生 App 上尤其明显动态类名、哈希后缀让选择器天生脆弱每次发版都要巡检脚本纯图标按钮、canvas 渲染页、跨域 iframe基于 DOM 的方案基本看不到同一条流程要在 Web、Android、iOS 各写一套脚本维护成本随平台数翻倍。对比项选择器方案Midscene 视觉方案元素定位XPath/CSS页面一改就要更新截图 自然语言描述定位难见元素canvas、图标按钮、跨域 iframe 是盲区人眼能看到它就能操作断言粒度多为 DOM 节点是否存在可校验颜色、布局、文案等渲染状态跨平台每个平台一套脚本统一 Agent API 覆盖 Web/移动/桌面核心思路一句话放弃对页面结构的依赖让模型看屏幕。代价是每次操作都要调模型Midscene 用缓存和规划复用把这层成本压下来。10 分钟跑通第一个自然语言自动化最快路径是 Chrome 扩展不需要建任何项目三步就能体验交互、数据提取和界面断言。第一步准备环境。从 Chrome 商店安装 Midscene 扩展。如果还想跑仓库里的示例项目或 YAML 脚本先克隆代码# 克隆 Midscene 仓库并安装依赖用于本地跑示例和 YAML 脚本 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install✅ 预期结果pnpm install无报错Chrome 扩展列表里能看到 Midscene。第二步配置模型。Midscene 需要一个具备 UI 定位能力的多模态模型官方支持豆包 Seed、千问 Qwen、GLM、Gemini 等。以豆包 Seed 为例# 导出模型服务配置扩展设置页中粘贴的是同样四项内容 export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed⚠️ 若指令执行超时报错先确认模型服务本身可调通且MIDSCENE_MODEL_FAMILY与所用模型系列匹配。✅ 预期结果配置保存后设置页无连接错误提示。第三步执行第一条指令。打开任意网页在 Midscene 侧边栏输入贴合当前页面的自然语言操作界面点击登录按钮提取数据页面中的商品{name: string, price: number}[]检查界面页面顶部显示导航栏✅ 预期结果页面自动完成操作控制台输出报告文件路径。第四步验证输出。每次运行都会生成 HTML 报告浏览器打开后能看到每一步的截图、模型决策过程和耗时。简单流程也可以用 YAML 描述# 一份 YAML 自动化脚本在 Bing 搜索天气并验证结果 page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - name: 检查结果 flow: - aiAssert: 结果中展示了天气信息终端用midscene命令由仓库内置的 YAML 脚本运行器提供执行效果和扩展里一致。指令效果在 Playground 里验证过后就可以把它们搬进代码。Midscene 的核心是一个 Agent 加几组方法边界划分得很清楚。核心能力拆解Agent 的 API 边界1. 自然语言规划aiAct传一个目标它观察界面、规划步骤、定位执行循环自检直到完成。适合多步骤、有分支的流程// aiAct 示例完成一个加购流程步骤由模型自行规划 await agent.aiAct(搜索耳机把第一件商品加入购物车);2. 视觉断言与结构化提取aiAssert/aiQuery断言校验的是用户实际看到的——颜色、布局、文案而不只是 DOM 节点存在与否aiQuery直接从画面提取带类型的结构化数据// aiQuery 示例提取商品列表按声明的类型返回数组 const items await agent.aiQueryArray{ name: string; price: number }( 页面中的商品{name: string, price: number}[], );3. 跨平台统一 API同一套方法可以跑在 WebPlaywright/Puppeteer、AndroidADB、iOSWebDriverAgent、HarmonyOS 和桌面端只换 Agent 类型脚本不用改。4. 桥接模式控制你本机正在用的浏览器桥接模式让本地 Node 脚本连接桌面版 Chrome复用已有的 cookies、插件和登录状态。需要人工介入的场景比如验证码脚本可以停下来等人操作完再继续// 桥接模式示例本地脚本控制桌面 Chrome 完成一次搜索 import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(type AI 101 and hit Enter); await agent.aiAssert(there are some search results); await agent.destroy();在 Playwright 测试用例里则注入PlaywrightAgent写法和扩展里一样// Playwright 集成示例为页面创建 Agent测试用例里直接用自然语言 import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in search box, hit Enter); await agent.aiAssert(There is a category filter on the left);这四项能力覆盖日常大部分场景接下来要优化的只剩成本和稳定性。进阶调优降低模型调用成本的三个策略视觉驱动意味着模型调用是主要开销下面三个策略都冲着它去。开启规划缓存 —— 适合同一流程反复回归。相同 prompt 在相似页面环境重复执行时直接复用之前保存的规划不再调模型缓存失效会自动回退到 AI 重新规划查询类结果永不缓存。// 缓存配置给 Agent 指定唯一 id缓存文件存于 ./midscene_run/cache const agent new PlaywrightAgent(page, { cache: { id: ebay-search }, });预期收益官方示例里一个重复任务的执行耗时从约 51 秒降到约 28 秒。按角色拆分模型 —— 适合复杂任务或成本敏感场景。规划、元素定位、界面理解三件事可以分别指定模型MIDSCENE_PLANNING_MODEL_*配规划模型MIDSCENE_INSIGHT_MODEL_*配理解模型。规划用更强的模型保稳定定位用更便宜的模型压成本各取所需。 若账号开通了豆包的低延迟模式可加MIDSCENE_MODEL_EXTRA_BODY_JSON{service_tier:fast}模型响应速度大约能提升 30%–50%。深度规划与深度定位deepThink/deepLocate—— 适合疑难任务。长流程加deepThink强化任务拆解小元素、易混淆元素加deepLocate提高定位精度。代价是多花模型调用和延迟建议只在关键步骤开。模型选对、缓存开上就可以把完整的回归套件跑起来了。至于你的场景是否真的适合看下面的判断。快速决策指南该用它还是不用它该用界面改版频繁的 UI 流程、DOM 里看不见的元素canvas、图标按钮、跨域 iframe或想用一套脚本覆盖 Web 和移动端要权衡超高频、对单步延迟极度敏感的场景纯视觉方案有固有延迟和调用成本不碰界面的纯数据抓取直接读 DOM 更划算下一步读仓库里的 YAML 脚本运行器与 Playwright 集成文档再按需扩展到 Android/iOS 平台。Midscene 是开源项目跑通之后如果踩到坑欢迎去社区提问或者提 Issue一起把它磨得更顺手。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考