尧图网站建设 
Midscene 三步自然语言浏览器自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的开源 GUI Agent。它让你用一句在搜索框输入关键词并回车直接驱动浏览器不必写选择器也不必猜等待时间。基于视觉模型的截图定位与断言配合 Playwright 即可接入现有测试项目适合想降低 UI 自动化维护成本的前端与测试同学。3 分钟跑通第一个 Demo先装依赖配置好模型服务的环境变量模型名、API Key、Base URL具体项见下文表格npm install midscene/web playwright tsx --save-dev npx tsx demo.ts核心代码就这么多// demo.ts import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); 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); await agent.aiWaitFor(at least one headphone item on the page); const items await agent.aiQuery( {itemTitle: string, price: number}[], items and prices in the list, ); console.log(items); await browser.close();跑通后你应该看到终端打印出商品标题与价格组成的数组同时控制台输出一行Midscene - report file updated: .../xxx.html浏览器里也留着一个正在像人一样点击输入的可观察窗口。核心能力拆解Midscene 到底能做什么一句话驱动一串操作aiAct传统写法和 Midscene 写法的差距最直观// 不用 Midscene选择器 显式等待改版就重写 await page.click(input#search-input); await page.type(input#search-input, headphones); await page.waitForSelector(.result-item); // 用 Midscene自然语言描述整段流程 await agent.aiAct(type Headphones in search box, hit Enter);适用边界多步骤、页面结构经常变动的流程值得交给aiAct但点一个按钮这种单点操作用aiTap(导出按钮)更省一次模型调用。把屏幕上的业务数据抠出来aiQuery// 不用 Midscene遍历 DOM逐节点解析字段 const rows await page.$$(.result-item); for (const r of rows) { /* 逐个提取文本再硬解析 */ } // 用 Midscene声明式给出 JSON 结构模型直接返回 const items await agent.aiQuery( {title: string, price: number}[], 列表中的商品名与价格, );适用边界列表、表单类结构化数据是aiQuery的强项如果只需要一个数字或布尔值aiNumber、aiBoolean更轻。配套地aiWaitFor(出现下载完成提示)负责视觉等待aiAssert(导出状态为成功)负责断言二者同样不依赖任何选择器。真实场景演练后台数据导出怎么拆换个贴近日常的例子让脚本登录管理后台把订单列表导出成文件。先配好模型这一步决定后面全通不通环境变量作用示例值MIDSCENE_MODEL_BASE_URL模型 API 端点你的 OpenAI 兼容端点MIDSCENE_MODEL_API_KEY鉴权密钥你的 KeyMIDSCENE_MODEL_NAME具体模型名如doubao-seed-2-1-turboMIDSCENE_MODEL_FAMILY模型家族标识如doubao-seed 如果卡住了大概率是环境变量没被进程读到——先headless: false跑一遍肉眼确认浏览器真的在动。登录后台走到目标页面登录表单通常带验证码、记住密码等干扰项让aiAct描述填账号密码并点登录即可不要手动拆成五个选择器const agent new PlaywrightAgent(page); await agent.aiAct(在登录表单输入账号和密码点击登录按钮); await agent.aiWaitFor(页面出现订单管理菜单); // 触发导出 await agent.aiAct(进入订单列表页点击顶部的导出按钮); await agent.aiWaitFor(页面出现下载完成的通知); // 验证导出结果 const result await agent.aiQuery( {status: string, filename: string}, 下载任务的状态与文件名, ); console.log(result);验证结果别只看没报错导出这类操作的真正风险是点了但没下载。用aiQuery把通知栏状态变成结构化数据再判断比expect(locator).toBeVisible()更能覆盖弹窗一闪而过的场景。 如果卡住了大概率是等待条件写得太抽象——出现通知改成出现包含下载完成字样的绿色提示定位成功率会明显上升。调优与避坑老手才知道的几件事先headless: false调通再切无头部分页面在无头模式下渲染尺寸和字体不同视觉定位结果可能偏移。用aiWaitFor替代固定sleep写死的等待时间既是 flaky 测试的头号来源也是拖慢执行的主因。报告是排错第一入口每次运行自动产出 HTML 报告里面有序列截图、每步的 AI 决策输入输出看报告比猜日志快。模型选强视觉款仓库基准报告显示 AppControlBench 60 个任务 Pass1 达 96.7%且截图驱动的方案单任务成本极低60 任务总花费约 0.59 美元先保证通过率再谈省钱。cacheId给重复页面提速构造 Agent 时传入cacheId相同页面的定位结果会命中缓存重复跑同一站点时收益明显。别一上来就开并发模型服务有 QPS 上限并发拉满时更容易撞超时先串行稳定再逐步加压。下一步往深处走的路径通读中文文档里的 Playwright 集成篇 apps/site/docs/zh/integrate-with-playwright.mdx学完能把 Midscene 装进你现有的playwright/test用例里。看 Playwright 集成的源码实现 packages/web-integration/src/playwright/理解PlaywrightAgent如何桥接原生 Page API。顺着 packages/core/src/agent/ 读核心 Agent搞清楚aiAct背后的截图—决策—执行循环。尝试 YAML 版测试框架 packages/test/学会把自然语言用例声明和 TypeScript 节点代码分开维护。以上 Demo 的完整代码与更多示例都可以在仓库的apps/playground/目录和apps/site/docs/zh/文档中找到。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene 三步自然语言浏览器自动化
Midscene 三步自然语言浏览器自动化【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的开源 GUI Agent。它让你用一句在搜索框输入关键词并回车直接驱动浏览器不必写选择器也不必猜等待时间。基于视觉模型的截图定位与断言配合 Playwright 即可接入现有测试项目适合想降低 UI 自动化维护成本的前端与测试同学。3 分钟跑通第一个 Demo先装依赖配置好模型服务的环境变量模型名、API Key、Base URL具体项见下文表格npm install midscene/web playwright tsx --save-dev npx tsx demo.ts核心代码就这么多// demo.ts import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); 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); await agent.aiWaitFor(at least one headphone item on the page); const items await agent.aiQuery( {itemTitle: string, price: number}[], items and prices in the list, ); console.log(items); await browser.close();跑通后你应该看到终端打印出商品标题与价格组成的数组同时控制台输出一行Midscene - report file updated: .../xxx.html浏览器里也留着一个正在像人一样点击输入的可观察窗口。核心能力拆解Midscene 到底能做什么一句话驱动一串操作aiAct传统写法和 Midscene 写法的差距最直观// 不用 Midscene选择器 显式等待改版就重写 await page.click(input#search-input); await page.type(input#search-input, headphones); await page.waitForSelector(.result-item); // 用 Midscene自然语言描述整段流程 await agent.aiAct(type Headphones in search box, hit Enter);适用边界多步骤、页面结构经常变动的流程值得交给aiAct但点一个按钮这种单点操作用aiTap(导出按钮)更省一次模型调用。把屏幕上的业务数据抠出来aiQuery// 不用 Midscene遍历 DOM逐节点解析字段 const rows await page.$$(.result-item); for (const r of rows) { /* 逐个提取文本再硬解析 */ } // 用 Midscene声明式给出 JSON 结构模型直接返回 const items await agent.aiQuery( {title: string, price: number}[], 列表中的商品名与价格, );适用边界列表、表单类结构化数据是aiQuery的强项如果只需要一个数字或布尔值aiNumber、aiBoolean更轻。配套地aiWaitFor(出现下载完成提示)负责视觉等待aiAssert(导出状态为成功)负责断言二者同样不依赖任何选择器。真实场景演练后台数据导出怎么拆换个贴近日常的例子让脚本登录管理后台把订单列表导出成文件。先配好模型这一步决定后面全通不通环境变量作用示例值MIDSCENE_MODEL_BASE_URL模型 API 端点你的 OpenAI 兼容端点MIDSCENE_MODEL_API_KEY鉴权密钥你的 KeyMIDSCENE_MODEL_NAME具体模型名如doubao-seed-2-1-turboMIDSCENE_MODEL_FAMILY模型家族标识如doubao-seed 如果卡住了大概率是环境变量没被进程读到——先headless: false跑一遍肉眼确认浏览器真的在动。登录后台走到目标页面登录表单通常带验证码、记住密码等干扰项让aiAct描述填账号密码并点登录即可不要手动拆成五个选择器const agent new PlaywrightAgent(page); await agent.aiAct(在登录表单输入账号和密码点击登录按钮); await agent.aiWaitFor(页面出现订单管理菜单); // 触发导出 await agent.aiAct(进入订单列表页点击顶部的导出按钮); await agent.aiWaitFor(页面出现下载完成的通知); // 验证导出结果 const result await agent.aiQuery( {status: string, filename: string}, 下载任务的状态与文件名, ); console.log(result);验证结果别只看没报错导出这类操作的真正风险是点了但没下载。用aiQuery把通知栏状态变成结构化数据再判断比expect(locator).toBeVisible()更能覆盖弹窗一闪而过的场景。 如果卡住了大概率是等待条件写得太抽象——出现通知改成出现包含下载完成字样的绿色提示定位成功率会明显上升。调优与避坑老手才知道的几件事先headless: false调通再切无头部分页面在无头模式下渲染尺寸和字体不同视觉定位结果可能偏移。用aiWaitFor替代固定sleep写死的等待时间既是 flaky 测试的头号来源也是拖慢执行的主因。报告是排错第一入口每次运行自动产出 HTML 报告里面有序列截图、每步的 AI 决策输入输出看报告比猜日志快。模型选强视觉款仓库基准报告显示 AppControlBench 60 个任务 Pass1 达 96.7%且截图驱动的方案单任务成本极低60 任务总花费约 0.59 美元先保证通过率再谈省钱。cacheId给重复页面提速构造 Agent 时传入cacheId相同页面的定位结果会命中缓存重复跑同一站点时收益明显。别一上来就开并发模型服务有 QPS 上限并发拉满时更容易撞超时先串行稳定再逐步加压。下一步往深处走的路径通读中文文档里的 Playwright 集成篇 apps/site/docs/zh/integrate-with-playwright.mdx学完能把 Midscene 装进你现有的playwright/test用例里。看 Playwright 集成的源码实现 packages/web-integration/src/playwright/理解PlaywrightAgent如何桥接原生 Page API。顺着 packages/core/src/agent/ 读核心 Agent搞清楚aiAct背后的截图—决策—执行循环。尝试 YAML 版测试框架 packages/test/学会把自然语言用例声明和 TypeScript 节点代码分开维护。以上 Demo 的完整代码与更多示例都可以在仓库的apps/playground/目录和apps/site/docs/zh/文档中找到。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考