Midscene.js实战指南如何用3步跑通一条自然语言驱动的E2E自动化流程【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你一定遇到过这种事页面改版挪了一个按钮精心维护的选择器集体失效测试脚本一跑就报错。Midscene.js 就是一个面向 E2E 测试的 GUI Agent它不读 DOM、不写选择器靠截图加一句自然语言就能操作界面。这篇指南不罗列功能只按你想完成什么任务来走装好、跑通、用好。它到底是什么给测试脚本装上一双眼睛Midscene.js 的工作方式一句话能说清把当前界面截图发给多模态模型你用自然语言描述要做什么模型在图里找到位置并执行。类比一下它就像带一个实习生做测试。你只需说在搜索框输入 Headphones 然后回车他自己找搜索框在哪不用你报第几行第几个元素。它覆盖 Web、Android、iOS、HarmonyOS 和桌面应用同一套 API 通吃。官方 Playground 里可以直接看运行效果三步快速开始第 1 步装依赖配模型。npm install midscene/web playwright playwright/test tsx export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEqwen3.7-plus export MIDSCENE_MODEL_FAMILYqwen3第 2 步写一个最小脚本demo.ts。核心就三行连上页面、描述任务、拿结果。import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: true }); const page await browser.newPage(); await page.goto(https://www.bing.com); const agent new PlaywrightAgent(page); // Agent 挂载到页面 await agent.aiAct(type Headphones in search box, hit Enter); await agent.aiWaitFor(there is at least one item on page); // aiQuery 直接返回结构化数据格式写在 prompt 里 const items await agent.aiQuery( {itemTitle: string, price: number}[], list items with prices ); console.log(items);第 3 步运行。npx tsx demo.ts浏览器里就能看到它看着页面干活。详细步骤见 Playwright 集成文档。三个高频场景从想法到落地场景一抓页面里的结构化数据。做法就是上面代码里aiQuery的用法——把想要的字段和类型写进 prompt模型返回可直接console.log、可直接入库的 JSON。关键点别问页面上有什么这种开放问题问我要哪几个字段结果才稳定。场景二不写代码做冒烟测试。很多团队只是想验证一条关键路径能走通为它搭一整个测试工程太重的。Midscene 支持纯 YAML 脚本page: url: https://www.bing.com tasks: - name: Search for weather flow: - ai: Search for todays weather - sleep: 3000 - name: Check results flow: - aiAssert: The results show weather information用 CLI 直接执行产品、测试同学不学 API 也能写。模板和字段说明在 YAML 脚本文档。场景三验证 App 里的真实流程。比如打开 App、搜商品、确认下单页出现。接上 Android 设备后Agent 的操作和 Web 端完全一样Playground 里还能实时看到手机画面关键点因为它只认截图原生控件、canvas、没有语义标签的图标按钮照样能操作这些恰好是选择器最够不着的地方。进阶技巧挑两个最常用的任务缓存taskCache同一个任务第一次执行时模型规划的步骤会被记下来之后相同输入直接复用计划省一次模型调用时间也省一截。开启前后的耗时对比可以看官方缓存文档里的实测图深度思考deepThink多步骤、有分支的复杂任务给aiAct传{ deepThink: true }让模型规划得更慢但更稳。简单点击没必要开开了反而慢。另外每次运行都会自动生成执行报告把每一步的截图、指令和结果串成时间线报告还能导出成视频方便发给不看代码的同事复核。❓ 常见问题现象aiAct报找不到元素步骤失败。原因元素此刻不在截图里——页面还没加载完、被弹窗挡住、或者不在当前视口。 解法在这一步前面加aiWaitFor(目标内容出现)或先把视口调大、等动画结束。现象同一步骤第一次成功再跑就时快时慢。原因每次都现场调模型规划网络波动和网络状态都会影响结果。 解法开启taskCache稳定步骤走缓存计划。细节见 缓存文档。现象启动直接报模型相关错误。原因环境变量缺项——MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY或 API Key 没配对。 解法对照 Playwright 集成文档 里的环境变量清单逐项核对。选一条你最常改的选择器用例把上面三步的代码里 URL 换掉十分钟就能看到它自己干活。下一步建议从 YAML 冒烟脚本入手把团队里每次都手动点一遍的路径先固化下来。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考