5 分钟跑通第一个 AI UI 自动化测试:Midscene.js 实战上手指南

发布时间:2026/9/11 16:52:50
5 分钟跑通第一个 AI UI 自动化测试:Midscene.js 实战上手指南 5 分钟跑通第一个 AI UI 自动化测试Midscene.js 实战上手指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的 GUI Agent靠截图就能让 AI 操作界面不用你维护 CSS 选择器或 XPath用自然语言描述操作即可。本文带你从安装 Chrome 扩展到跑通第一个界面自动化测试适合没接触过 Midscene 的开发者阅读。 5 分钟快速体验最轻的上手路径是 Chrome 扩展不用搭任何项目。从 Chrome Web Store 安装 Midscene 扩展打开设置页填入模型配置这几项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 侧边栏输入点击登录按钮AI 就会理解当前页面、找到按钮并执行。如何写出第一条自然语言指令Midscene 把指令分成三类各对应一个 API选对类型比写得多花哨更重要。规划并交互aiAct搜索耳机把第一件商品加入购物车AI 自己拆解步骤执行。提取数据aiQuery页面中的商品{name: string, price: number}[]返回结构化数据。检查界面aiAssert页面顶部显示导航栏不成立时直接抛错。第一次用时把元素的位置和视觉特征写进描述里比如右上角的购物车图标定位会更稳。如何从浏览器接入脚本集成 Playwright在扩展里验证过的指令可以原样搬进脚本。安装依赖后把 Playwright 的 page 交给 PlaywrightAgent// npm i -D midscene/web playwright tsx const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in search box, hit Enter);想让脚本直接操作你桌面上的 Chrome带着已登录的 cookie可以开 Bridge 模式由终端 SDK 连接扩展接管浏览器详见 Playwright 集成文档。如何用 YAML 写一个自动化流程只想跑个流程不想维护完整测试工程就写一份.yaml文件每一步一行自然语言page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气结构细节见 YAML 脚本文档同一份写法在 Web、Android、桌面端都能跑。一个真实场景串讲你想做什么在 eBay 搜 Headphones看第一件商品的名称和价格。怎么告诉它Playground 侧边栏里输入一句type Headphones in search box, hit Enter。它做了什么Midscene 截图让模型规划步骤定位搜索框、输入、回车。结果出来后用aiWaitFor等商品列表出现再用aiQuery把名称和价格抽成 JSON 打印出来。整个过程还会生成一份 HTML 报告每一步操作、每张截图都能回放排查失败原因时不用翻日志。常见问题不写代码能用吗能。Chrome 扩展就是零代码 Playground交互、数据提取、界面检查靠输入自然语言就能体验。AI 点偏了或者找不到元素怎么办对较小或容易混淆的元素在aiTap里启用deepLocate多一次模型调用换定位精度。只支持网页吗不是同一套 API 覆盖 Android、iOS、HarmonyOS 和桌面端各配一个 Playground。什么时候该用、什么时候别用需要断言用户实际看到的东西颜色、高亮、布局时用这些 DOM 里看不到。UI 频繁改版、不想每次追着改选择器时用。纯后端的单次请求、固定接口调用别用每次视觉操作都过模型调用成本和延迟都高于直接定位。Midscene.js 的价值在于把 UI 测试从维护选择器变成写需求在 Chrome 扩展里验证过指令就能原样搬进脚本复用。想继续深入读一下快速开始就够上手了。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考