Midscene.js 浏览器自动化测试实操指南用自然语言驱动 E2E告别脆弱的选择器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 GUI Agent 框架专为 E2E 测试设计它不读 DOM而是像人一样看屏幕截图把一句自然语言指令变成真实的点击、输入和断言。Web、Android、iOS、鸿蒙和桌面端共用同一套 API。从选择器集体失效说起一个常见的翻车现场发版前一天UI 重构把登录按钮从div.login-btn挪进了header nav button:nth-child(2)。第二天 CI 红屏几十条用例挂掉的原因全写在同一个错误里locator timeout。修复它们要一个下午而真正的产品变更可能只是加了一层包裹节点。Midscene.js 的处理方式是把定位这一环交给视觉模型——元素在不在语义树里、有没有data-testid它都不关心只要人能看见它就能找到const agent new PlaywrightAgent(page); await agent.aiAct(点击登录按钮输入用户名和密码); await agent.aiAssert(页面顶部出现用户头像);没有querySelector也没有 XPath。页面结构怎么改都不影响这条指令。最短路径跑通第一条用例先 clone 仓库了解整体结构monorepo核心能力在packages/下git clone https://gitcode.com/GitHub_Trending/mid/midscene最短的跑通路径是 Chrome 扩展 Playground装好扩展后把模型配置贴进侧边栏设置然后在任意网页输入点击登录按钮直接看执行效果——这一步不需要建项目用来先验证模型配置是否正确。配置正确后正式跑一条用例只需一个.env加一个 YAML 文件# .env MIDSCENE_MODEL_BASE_URL你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的 API Key MIDSCENE_MODEL_NAME模型名 MIDSCENE_MODEL_FAMILY模型家族# bing-search.yaml page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 todays weather - aiAssert: 结果区出现天气信息npm i -g midscene/cli midscene ./bing-search.yaml跑完后终端会打印出Midscene - report file updated: ...用浏览器打开这个 HTML 文件就能看到每一步的截图、AI 的规划过程和元素定位框。到这里环境、执行、结果查看这条链路已经闭环了。一条指令的完整执行链路上面那句ai: 搜索 todays weather进去之后内部大致走四步输入自然语言指令交给 AgentAgent 对当前界面截图理解与规划视觉模型分析截图把目标拆成步骤序列找输入框 → 输入 → 按回车。多步、有分支的任务就靠aiAct这类规划类 API它在执行中会根据最新界面状态反复重新规划执行每一步先定位元素坐标再执行动作。单步操作有aiTap、aiInput、aiScroll这类即时交互 API定位完直接执行不进入规划循环更快也更省 token反馈全程生成 HTML 报告每一步的截图、指令、模型输出、定位框都能回放。定位失败时会自动重新规划但受replanningCycleLimit上限约束避免无限循环。挑 3 个代表性场景过一遍电商搜索 数据提取Playwright 用例集成。把 Midscene 装进现有 Playwright 仓库在playwright.config.ts的reporter里加一行[midscene/web/playwright-reporter]用例里就能这样写await aiInput(Headphones, 搜索框); await aiTap(搜索按钮); const items await aiQueryArray{ title: string; price: number }( 获取搜索结果中的商品标题和价格);无代码回归CLI YAML。测试同学不改一行 JS把回归步骤写成 YAMLmidscene xxx.yaml一条命令跑起来同一份 YAML 还能直接换成android:或ios:段驱动真机——跨平台不是换个 SDK 重写一遍而是换个设备段。Android 真机导航。设备通过 adb 连上后YAML 里写- ai: 打开地图应用之类的步骤配合自带的 Playground 预览画面操作设备详见 platforms/android 文档。跑慢了、定位偏了该调什么实际使用中大部分调优集中在下面几处问题调整项说明小元素/图标定位偏deepLocate: true多一次模型调用做精确定位适合目标小或与相邻元素难区分时复杂任务中途走偏deepThink: true规划与定位分开调用更稳但更慢更贵重复用例太慢cache: { id: xxx }缓存规划步骤和元素 XPath官方示例中单条执行时间从 51s 降到 28s缓存失效时自动回退模型重算死循环式重试replanningCycleLimit限制aiAct的重新规划次数默认 30动作之间页面没加载完waitForNetworkIdleTimeout每次动作后等待网络空闲的超时时间识别不到元素换模型定位能力取决于模型的 UI 定位能力Qwen-VL、UI-TARS、GLM 等均可接入选型参考 model-strategy 文档另外两个容易踩的点aiQuery/aiAssert的结果永远不走缓存别指望靠缓存加速数据提取aiAct的 prompt 是目标描述不是工作流先关弹窗再点提交这种多步逻辑不要塞给aiTap这类即时 API。进阶入口完整文档在 apps/site/docs/英文和zh/中文两套仓库内还有 core 视觉识别模块源码107 个文件模型接入与任务规划的实现在这里和 CLI 执行器实现YAML 批量执行的链路顺着报告里看到的行为去对源码是理解它最快的方式。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考