Midscene.js 快速上手指南3 行自然语言跑通跨平台视觉 E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene在网页上敲一句搜索耳机并筛选低于 100 美元Midscene.js 会自动找到搜索框、输入、回车再把商品标题和价格整理成 JSON 返回。它靠视觉理解屏幕让 AI 替你操作和验证界面同一套 Agent API 覆盖 Web、Android、iOS 与桌面应用。它和传统 UI 自动化差在哪Midscene.js 是一个面向 E2E 测试的 GUI Agent你不需要写选择器它像人一样看屏幕—动手—核对结果用截图判断点哪里、界面是否符合预期。对写自动化脚本、维护 E2E 用例或想在多端复用同一套操作逻辑的人来说它把定位元素这件事从代码搬进了自然语言。和传统方案的主要差别维度传统选择器方案Midscene.js 视觉方案定位依据DOM 结构、CSS 选择器屏幕截图按外观和位置找元素覆盖的界面标准 HTML 元素纯图标按钮、canvas、跨域 iframe、原生 App写法维护一套选择器一句自然语言描述目标跨平台每平台各写一套 API同一套 Agent API 覆盖 Web/Android/iOS/桌面零代码先试一把Chrome 插件与 Playground写脚本之前最省事的路径是不装任何东西直接在浏览器里体验。在 Chrome Web Store 安装 Midscene 扩展后浏览器右侧会出现侧边栏。打开任意网页在侧边栏里输入一句自然语言点 Run就能看到 Midscene.js 理解页面并执行操作。在移动端可以先启动对应的 Playground不用写代码就能调用aiAct、aiQuery、aiAssertnpx --yes midscene/android-playgroundPlayground 和脚本 SDK 共享同一套实现你在面板里验证过的指令原样搬进代码也能跑通。最小跑通路径配好模型跑通第一个脚本Playground 验证过后正式写脚本只有三步配模型、装依赖、写脚本。第一步配置一个多模态模型Midscene.js 把模型配置放在环境变量里以豆包 Seed 2.1 Turbo 为例把 API Key 换成你自己的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配置好后用dotenv/config可把这组变量放进.env随项目走脚本里就不用硬编码。第二步安装依赖下面一条命令把 Web 端 SDK、Playwright 和用来跑 TypeScript 脚本的tsx一次装好npm install midscene/web playwright playwright/test tsx --save-dev第三步写一个 Playwright 脚本保存为demo.ts。它会打开 eBay、搜索耳机并把结果整理成数组打印出来import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; import dotenv/config; 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 search box, hit Enter); const items await agent.aiQuery( {itemTitle: string, price: Number}[], find item and corresponding price, ); console.log(headphones in stock, items); await browser.close();用npx tsx demo.ts运行。命令执行完控制台会打印Midscene - report file updated: .../report/xxx.html用浏览器打开就能看到每一步的截图和 AI 决策过程。核心能力拆解两个最常打的 APIMidscene.js 的 API 分两类一类是自主规划的aiAct一类是定位一个元素、做一个动作的即时操作比如aiTap、aiInput、aiScroll。理解这个区别你就能在灵活和确定性之间做选择。aiAct接收一个自然语言目标自己观察界面、拆解步骤、定位并执行直到目标完成。它基于最新界面状态持续规划因此通常比即时操作更耗时、更耗 token但更抗页面变化适合路径不确定的任务。aiQuery只观察界面、不改界面。你在提示词里描述要什么数据、什么结构它就把屏幕上看到的整理成对应对象返回aiAssert则做视觉断言const items await agent.aiQueryArray{ name: string; price: number }( 购物车中的商品{name: string, price: number}[], ); await agent.aiAssert(购物车中有一件商品并且页面显示了小计金额);返回的items形如[{ name: 无线耳机, price: 99.9 }]可直接喂给后续逻辑。aiAssert描述的条件成立时正常结束不成立时抛出错误并在错误信息里带上模型给出的原因。一条电商验收工作流把上面的能力串起来就是一个真实的验收流程。以验证搜索结果都低于 100 美元为例打开页面后用aiAct完成搜索耳机并筛选低于 100 美元接着用aiWaitFor等筛选结果加载出来避免在页面还没稳定时就读数据。数据稳定后aiQuery把列表里的商品标题和价格取成数组你不必再为每个价格写一个选择器。最后用aiAssert断言列表里每件商品的价格都低于 100 美元——条件不成立会直接抛错测试就此失败。整条流程里你只描述意图Midscene.js 负责看—做—查报告则保留了每一步的证据方便事后复盘。边界与排障Midscene.js 的能力来自视觉理解也由此带来几个明确的边界提前知道能少踩坑。浏览器内核有讲究Web 端的部分能力依赖 Chrome DevTools ProtocolCDP例如触摸手势和一些交互兜底路径。用 Playwright 时推荐 ChromiumFirefox 和 WebKit 能覆盖基础的 Playwright 原生操作但依赖 CDP 的能力可能报错。元素定位不准怎么查定位偏移是高频问题。按官方 FAQ 的思路排查先升级到最新版midscene/web再确认MIDSCENE_MODEL_FAMILY配置正确配置错误会影响模型适配把提示词从功能描述改成视觉描述比如aiTap(页面右上角的人形头像图标)比aiTap(个人中心)更稳如果定位落在目标附近但有几像素偏差开启deepLocate选项通常能改善。隐私截图会被发到哪里Midscene.js 会把页面截图发送到你的 AI 模型。调用aiQuery、aiAsk时如果传入domIncluded: trueDOM 信息也会被一并发送。涉及敏感页面时建议先评估这一点或按需选择模型服务。延伸资源安装与模型配置快速开始Playwright 完整集成integrate-with-playwright模型与配置说明model-common-config常见问题 FAQfaqAndroid 平台指南platforms/android核心 Agent 实现packages/core/src/agent/Web 端 SDKpackages/web-integration/下一步先用 Chrome 扩展在你的工作页面上敲一句指令确认模型配置没问题再把它搬进demo.ts跑通第一个 Playwright 脚本打开报告看看每一步。挑一个你每天重复的界面操作开始剩下的交给 Midscene.js。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Midscene.js 快速上手指南：3 行自然语言跑通跨平台视觉 E2E 测试
Midscene.js 快速上手指南3 行自然语言跑通跨平台视觉 E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene在网页上敲一句搜索耳机并筛选低于 100 美元Midscene.js 会自动找到搜索框、输入、回车再把商品标题和价格整理成 JSON 返回。它靠视觉理解屏幕让 AI 替你操作和验证界面同一套 Agent API 覆盖 Web、Android、iOS 与桌面应用。它和传统 UI 自动化差在哪Midscene.js 是一个面向 E2E 测试的 GUI Agent你不需要写选择器它像人一样看屏幕—动手—核对结果用截图判断点哪里、界面是否符合预期。对写自动化脚本、维护 E2E 用例或想在多端复用同一套操作逻辑的人来说它把定位元素这件事从代码搬进了自然语言。和传统方案的主要差别维度传统选择器方案Midscene.js 视觉方案定位依据DOM 结构、CSS 选择器屏幕截图按外观和位置找元素覆盖的界面标准 HTML 元素纯图标按钮、canvas、跨域 iframe、原生 App写法维护一套选择器一句自然语言描述目标跨平台每平台各写一套 API同一套 Agent API 覆盖 Web/Android/iOS/桌面零代码先试一把Chrome 插件与 Playground写脚本之前最省事的路径是不装任何东西直接在浏览器里体验。在 Chrome Web Store 安装 Midscene 扩展后浏览器右侧会出现侧边栏。打开任意网页在侧边栏里输入一句自然语言点 Run就能看到 Midscene.js 理解页面并执行操作。在移动端可以先启动对应的 Playground不用写代码就能调用aiAct、aiQuery、aiAssertnpx --yes midscene/android-playgroundPlayground 和脚本 SDK 共享同一套实现你在面板里验证过的指令原样搬进代码也能跑通。最小跑通路径配好模型跑通第一个脚本Playground 验证过后正式写脚本只有三步配模型、装依赖、写脚本。第一步配置一个多模态模型Midscene.js 把模型配置放在环境变量里以豆包 Seed 2.1 Turbo 为例把 API Key 换成你自己的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配置好后用dotenv/config可把这组变量放进.env随项目走脚本里就不用硬编码。第二步安装依赖下面一条命令把 Web 端 SDK、Playwright 和用来跑 TypeScript 脚本的tsx一次装好npm install midscene/web playwright playwright/test tsx --save-dev第三步写一个 Playwright 脚本保存为demo.ts。它会打开 eBay、搜索耳机并把结果整理成数组打印出来import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; import dotenv/config; 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 search box, hit Enter); const items await agent.aiQuery( {itemTitle: string, price: Number}[], find item and corresponding price, ); console.log(headphones in stock, items); await browser.close();用npx tsx demo.ts运行。命令执行完控制台会打印Midscene - report file updated: .../report/xxx.html用浏览器打开就能看到每一步的截图和 AI 决策过程。核心能力拆解两个最常打的 APIMidscene.js 的 API 分两类一类是自主规划的aiAct一类是定位一个元素、做一个动作的即时操作比如aiTap、aiInput、aiScroll。理解这个区别你就能在灵活和确定性之间做选择。aiAct接收一个自然语言目标自己观察界面、拆解步骤、定位并执行直到目标完成。它基于最新界面状态持续规划因此通常比即时操作更耗时、更耗 token但更抗页面变化适合路径不确定的任务。aiQuery只观察界面、不改界面。你在提示词里描述要什么数据、什么结构它就把屏幕上看到的整理成对应对象返回aiAssert则做视觉断言const items await agent.aiQueryArray{ name: string; price: number }( 购物车中的商品{name: string, price: number}[], ); await agent.aiAssert(购物车中有一件商品并且页面显示了小计金额);返回的items形如[{ name: 无线耳机, price: 99.9 }]可直接喂给后续逻辑。aiAssert描述的条件成立时正常结束不成立时抛出错误并在错误信息里带上模型给出的原因。一条电商验收工作流把上面的能力串起来就是一个真实的验收流程。以验证搜索结果都低于 100 美元为例打开页面后用aiAct完成搜索耳机并筛选低于 100 美元接着用aiWaitFor等筛选结果加载出来避免在页面还没稳定时就读数据。数据稳定后aiQuery把列表里的商品标题和价格取成数组你不必再为每个价格写一个选择器。最后用aiAssert断言列表里每件商品的价格都低于 100 美元——条件不成立会直接抛错测试就此失败。整条流程里你只描述意图Midscene.js 负责看—做—查报告则保留了每一步的证据方便事后复盘。边界与排障Midscene.js 的能力来自视觉理解也由此带来几个明确的边界提前知道能少踩坑。浏览器内核有讲究Web 端的部分能力依赖 Chrome DevTools ProtocolCDP例如触摸手势和一些交互兜底路径。用 Playwright 时推荐 ChromiumFirefox 和 WebKit 能覆盖基础的 Playwright 原生操作但依赖 CDP 的能力可能报错。元素定位不准怎么查定位偏移是高频问题。按官方 FAQ 的思路排查先升级到最新版midscene/web再确认MIDSCENE_MODEL_FAMILY配置正确配置错误会影响模型适配把提示词从功能描述改成视觉描述比如aiTap(页面右上角的人形头像图标)比aiTap(个人中心)更稳如果定位落在目标附近但有几像素偏差开启deepLocate选项通常能改善。隐私截图会被发到哪里Midscene.js 会把页面截图发送到你的 AI 模型。调用aiQuery、aiAsk时如果传入domIncluded: trueDOM 信息也会被一并发送。涉及敏感页面时建议先评估这一点或按需选择模型服务。延伸资源安装与模型配置快速开始Playwright 完整集成integrate-with-playwright模型与配置说明model-common-config常见问题 FAQfaqAndroid 平台指南platforms/android核心 Agent 实现packages/core/src/agent/Web 端 SDKpackages/web-integration/下一步先用 Chrome 扩展在你的工作页面上敲一句指令确认模型配置没问题再把它搬进demo.ts跑通第一个 Playwright 脚本打开报告看看每一步。挑一个你每天重复的界面操作开始剩下的交给 Midscene.js。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
