ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Midscene.js 实战指南:3 步跑通视觉 AI 端到端测试

Midscene.js 实战指南:3 步跑通视觉 AI 端到端测试 Midscene.js 实战指南3 步跑通视觉 AI 端到端测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene 是一个面向 E2E 测试的 GUI Agent简单说就是会看屏幕、会动手点的 AI。你用自然语言描述任务它自己找按钮、填输入框、验证结果不用写任何选择器。读完本文你能在自己的电脑上跑通第一条视觉自动化用例并知道怎么扩展到 Android 和桌面场景。场景切入 —— 它帮你解决什么选择器总失效页面改一次样式你的cssSelector就崩一次。测试同事用 Midscene 描述点击价格低于 100 美元的第一件商品页面怎么改都不怕。图标按钮和画布元素没法测纯图标按钮、canvas绘制的内容、跨域 iframe传统工具根本定位不到Midscene 靠截图认元素看得到就能点。一套用例想覆盖多个平台同一套 Agent API 能跑 Web、Android、iOS 和桌面换平台只换设备连接方式流程描述不用重写。最小组合 —— 从零到跑通先做两个前置检查Node 版本要在 20 以上手机要能被 adb 识别。node -v adb devices -l✅ 第二行命令能看到一行设备序列号说明设备链路通了。然后配置 AI 模型Midscene 需要一个能看懂 UI的多模态模型四个环境变量搞定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最后一条命令启动 Android Playground一个零代码的交互面板npx --yes midscene/android-playground✅ 窗口里手机画面出现、你输入打开设置页后手机真的执行了说明全链路成功。Playground 里的每条指令都对应一个 Agent API验证完直接搬进脚本就行。核心能力拆解用自然语言写测试用例核心就是三个 APIaiAct执行多步流程aiAssert验证界面结果aiQuery提取结构化数据。一个最小用例长这样const agent new AndroidAgent(); await agent.aiAct(打开懂车帝搜索 SU7进入参数配置页); await agent.aiAssert(页面显示了电池容量和电机参数);⚠️ 避坑aiAct是自主规划每步都调用模型又慢又费 token能拆成单步的比如aiTap、aiInput就别让 AI 自由发挥。配置 AI 模型参数模型支持 Qwen、Doubao、GLM、Gemini 等自托管或 API 选项全部通过环境变量注入也可以在 Playground 窗口的齿轮按钮里直接粘贴配置。⚠️ 避坑MIDSCENE_MODEL_FAMILY别漏填它告诉 Midscene 该用哪套提示词策略适配你的模型填错了定位准确率会明显下降。连接 Android 设备Midscene 通过 adb 控制真机或模拟器手机侧只需要开一个开关开发者选项里的USB 调试。连上数据线后adb devices -l✅ 输出里出现device状态的行就通了。⚠️ 避坑模拟器同样算设备但没有 USB 调试开关时先确认模拟器控制台已启用 ADB over WiFi否则adb devices永远是空的。进阶玩法与调优如果你想控制正在自己用的桌面 Chrome复用 cookies 和登录态不用维护一堆测试账号可以启用桥接模式安装 Midscene 插件后本地脚本这样连上去import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(搜索 AI 101 并回车); await agent.aiAssert(搜索结果显示在页面中); await agent.destroy();插件会弹窗询问是否允许连接点 Allow 即可脚本侧记得模型环境变量配在终端里而不是浏览器里。如果你想压低成本或提高复杂任务稳定性可以按场景拆模型简单页面用便宜的视觉模型复杂流程开启deepThink加强规划小元素定位开启deepLocate。踩坑速查症状用 Ollama 本地模型报 403 →原因Ollama 默认拒绝来自浏览器扩展的跨域请求 →解决export OLLAMA_ORIGINS*后重启 Ollama症状adb devices看不到手机 →原因USB 调试没开或数据线只供电不传数据 →解决开开发者选项的 USB 调试换数据线后执行adb kill-server adb start-server症状Web 侧报Cannot access a chrome-extension:// URL of different extension→原因其他浏览器插件向页面注入了 iframe 或脚本与 Midscene 冲突 →解决打开chrome://extensions/逐个禁用可疑插件刷新重试症状小图标、和周围元素长得很像的按钮定位不准 →原因单次定位在密集元素间选错了 →解决调用时加{ deepLocate: true }多花一次模型调用换准确率一句话收束Midscene 把写选择器从 E2E 测试里拿掉了换成一句人话Web、Android、iOS 共用同一套 API。建议你先在 Playground 里把常用指令试熟再固化成脚本核心实现可以看 核心源码 和 Android 平台支持更多细节参考官方文档。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表