Midscene AI自动化实战指南5步让AI接管你的浏览器和手机【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene想让AI替你登录网站、填完表单、把整个流程点到底最后还要验证结果对不对——这就是 Midscene AI自动化 能干的事。它不靠CSS选择器找元素而是像人一样看屏幕从截图里理解界面执行搜索耳机这样的自然语言指令。同一套 Agent API 还能用在 Android 和 iOS 上。下面几分钟带你跑通第一条自动化指令再接进真实测试项目。首次跑通5步完成Web自动化先装命令行工具需要 Node 20.19、22.12 或 24npm i -g midscene/cli再在运行目录下创建.env配置模型四行即可注意没有export前缀MIDSCENE_MODEL_BASE_URLhttps://your-model-service/v1 MIDSCENE_MODEL_API_KEYyour-api-key MIDSCENE_MODEL_NAMEyour-model-name MIDSCENE_MODEL_FAMILYyour-model-family然后写一个 YAML 脚本保存为bing-search.yaml六行描述打开必应、搜索天气、断言结果page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - aiAssert: 结果显示天气信息接着一条命令执行它控制台会输出 HTML 报告路径打开就能看到执行细节midscene ./bing-search.yaml完全不想写脚本的话装一个 Midscene Chrome 扩展在任意网页的侧边栏里直接输入指令就能体验 这条链路其实由四类能力拼成拆开看你会更清楚什么时候该用哪个。四种能力操作、断言、提取、预演视觉操作aiAct接收一个目标并自主规划适合多步骤任务视觉断言aiAssert描述期望外观即可校验颜色、布局、高亮是否正确数据提取aiQuery把屏幕上的内容变成结构化数据。三者的最小长这样await agent.aiAct(搜索耳机将第一件商品加入购物车); await agent.aiAssert(选中的套餐有蓝色边框和勾号); const items await agent.aiQuery({itemTitle: string, price: number}[]);第四种是Playground 预演在浏览器里零代码试跑上面三类指令指令调通后原样粘进脚本省掉反复改提示词的试错成本能力清楚了下面用两个差异很大的场景把它们过一遍。实战一Web数据提取目标打开 eBay搜索耳机拿到商品列表和价格并断言左侧有分类过滤器。操作安装midscene/web和playwright把已有的 Playwright page 交给PlaywrightAgent即可const browser await chromium.launch({ headless: true }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(Type Headphones in the search box, hit Enter); await agent.aiWaitFor(there is at least one headphone item on page); const items await agent.aiQuery({itemTitle: string, price: number}[]); await agent.aiAssert(There is a category filter on the left);结果items就是标题加价格的数组全程没写一个选择器断言直接看布局。集成细节见 packages/web-integration/。实战二Android操作目标在真机上打开地图应用搜索杭州西湖。手机开启 USB 调试adb devices确认能列出设备写脚本全程不需要选择器const devices await getConnectedDevices(); const agent new AndroidAgent(new AndroidDevice(devices[0].udid)); await agent.aiAct(打开地图应用); await agent.aiInput(搜索框, { value: 杭州西湖 }); await agent.aiTap(搜索按钮);更稳的做法是先跑npx --yes midscene/android-playground镜像上指令验证通过脚本里行为完全一致。结果设备镜像实时显示每一步执行进度报告里还留着每步截图。想把它放进已有测试工程只需在配置里改一行。进阶加一行reporter给现有Playwright用例统一报告如果项目里已经有 Playwright 测试用例不必推倒重来——在playwright.config.ts里加一个 reporterreporter: [ [list], [midscene/web/playwright-reporter, { type: merged }], ],为什么用type: merged多个用例汇进一份 HTML 报告定位失败更快报告体积过大时改成html-and-external-assets让截图存成独立文件但那样必须把报告目录用 HTTP 服务起来再打开。报告支持时间线回放还可以用report-tool把多份报告合并成一份汇总跑的过程中遇到报错先对一下这几个高频坑。排错与延伸Node版本不受支持CLI 报Unsupported Node.js version时升级到 20.19、22.12 或 24 后重装。.env 不生效文件必须放在工具的运行目录下变量名不带export前缀。Chrome 扩展冲突看到Cannot access a chrome-extension:// URL of different extension通常是别的扩展冲突——在开发者工具里找到页面注入的chrome-extension://iframe 或 script禁用对应扩展后重试。模型配置统一按KEYVALUE每行一条粘贴到设置里延伸入口中文文档模型配置、平台指南、YAML 脚本apps/site/docs/zh/核心引擎与报告生成packages/core/Android Agent 实现packages/android/src/agent.ts【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考