Midscene.js 实战用自然语言写 E2E 测试一套 API 覆盖 Web 与移动端【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个面向 E2E 测试的视觉驱动 GUI 自动化框架AI 通过看截图来定位元素并执行操作你可以直接用自然语言描述测试步骤。适合前端开发、测试工程师和自动化脚本作者。核心收益页面结构变化时通常不必重写选择器测试脚本跟着界面看起来的样子走。能力速览按你想做什么来选Midscene 提供的不是一个功能清单而是一组对应具体任务的能力。下表从任务视角出发帮你快速对号入座你想做什么Midscene 的对应方式典型 API / 入口不写代码先试试 AI 操作界面在浏览器侧边栏输入自然语言指令Chrome 扩展 Playground让脚本控制我自己的浏览器保留登录态、cookies本地 Node 脚本连接桌面 ChromeBridge 模式AgentOverChromeBridge把视觉能力接进现有测试工程传入 Playwright 的page即可PlaywrightAgent验证用户真正看到的样子高亮、布局、canvas 内容用自然语言描述预期外观aiAssert从界面里提取结构化数据用 JSON 形状描述要什么aiQuery等待某个界面状态出现视觉条件轮询替代写死 sleepaiWaitFor测试 Android / iOS / HarmonyOS / 桌面应用同一套 Agent API换平台包midscene/android等平台包长期维护一套声明式测试用例YAML 写意图 TS 节点写确定性逻辑Midscene TestBeta一句话概括这套工作方式观察屏幕 → 根据看到的内容操作 → 检查界面呈现的结果三个动作分别对应aiAct、aiTap/aiInput、aiAssert。选对入口不同角色走不同路径体验者从 Chrome 扩展开始如果你的目标只是先感受一下 AI 怎么操作网页Chrome 扩展是最短的入口。安装扩展后浏览器右侧会出现 Midscene 侧边栏打开任意网页直接输入符合页面内容的指令规划并交互点击登录按钮提取结构化数据页面中的商品{name: string, price: number}[]检查界面页面顶部显示导航栏运行后可以看到 AI 理解页面、定位元素、执行操作的完整过程。在这里验证过的指令稍后可以原样搬到 SDK 代码里。开发者接进现有的 Playwright 测试已经在用 Playwright 的团队只需要在现有page上包一层PlaywrightAgent视觉能力就进入既有工程import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); // 让 Agent 完成流程再验证结果 await agent.aiAct(搜索耳机然后将结果筛选为价格低于 100 美元); await agent.aiWaitFor(筛选后的搜索结果已显示); await agent.aiAssert(搜索结果中的每件商品价格都低于 100 美元);传统定位page.click等继续可用只在定位困难或需要看的步骤交给 Agent两者在同一脚本里混用。需要真实浏览器环境的人Bridge 模式很多场景下全新的自动化浏览器不够用——你需要已有的登录态、已安装的插件、真实的网络环境。Bridge 模式让本地终端的 Node.js 脚本去控制桌面版 Chrome既能连接新标签页也能附着到当前激活的标签页。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); // 连接到桌面 Chrome 的新标签页 await agent.connectNewTabWithUrl(https://www.bing.com); // 与普通 Midscene Agent 的 API 相同 await agent.aiAct(在搜索框输入 Midscene.js 并回车); await agent.aiAssert(页面出现了搜索结果); await agent.destroy();脚本启动后扩展会弹出确认窗口询问是否允许连接确认后桌面 Chrome 打开新标签页交由脚本控制。这种方式也常被称为 man-in-the-loop。长期维护测试资产的团队Midscene Test一次性验证和长期 E2E 工程是两回事。Midscene Testmidscene/test目前 Beta把声明式测试意图和可编程工程实现分开YAML 文件写 UI 流程和预期结果可复用的 TypeScript 节点封装 API 调用、数据准备和清理操作。例如退款用例可以先通过 API 准备订单再走 UI 申请退款并验证结果。框架还提供生命周期钩子、重试、项目间隔离与并发以及自动生成的节点 Markdown 文档——让人和 AI 编程助手都能读懂并共同维护用例。怎么上手最小可用路径准备环境安装 Node.js通过包管理器安装 Web 端 SDK例如npm install midscene/web。配置模型Midscene 需要多模态模型完成看图配置本质是一组环境变量MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY。使用 Playground 时在设置页粘贴配置文本即可使用 SDK 或 CLI 时按环境变量方式加载。官方支持的模型包括Qwen3.x、Doubao-Seed-2.1、GLM-4.6V、gemini-3.5-flash、UI-TARS也包括可自托管的开源选项。跑通第一个脚本按上面的 Playwright 示例或 Bridge 示例从打开页面 → 一句自然语言操作 → 一个断言起步。看报告每次运行都会生成 HTML 报告包含截图、元素定位过程和 AI 决策链路这是排查失败的第一步。关于成本可以有个直观参考官方在 AppControlBench 评测中Midscene 搭配 Doubao Seed 2.1 Turbo 完成 60 个任务模型调用总费用约 0.59 美元。因为只发送截图而不发送庞大的 DOM 树单步的 token 开销远低于基于 DOM 的方案。怎么深入API 家族与进阶用法分清自主和即时两类 API自主执行aiAct接收目标自己规划步骤、定位元素、执行到完成为止适合多步骤、有分支的任务代价是执行期间持续调用模型耗时和 token 都更高。即时交互aiTap、aiInput、aiScroll等每次只执行一个指定动作定位 固定动作更快更省。如果出现弹窗先关闭再点结账这类带分支的需求才该用aiAct。读取与断言aiQuery提取结构化数据aiBoolean/aiNumber拿单一结论aiAssert校验界面状态aiWaitFor等待视觉条件成立。稳定性开关对复杂任务aiAct支持deepThink加强任务拆解分别用不同模型调用完成规划和定位和deepLocate增加一次模型调用提高小元素、易混淆元素的定位准确率。默认配置不够稳时优先检查是否该开这两个开关而不是重写提示词。模型策略MIDSCENE_MODEL_FAMILY决定 Midscene 如何适配所选模型。可以先单模型跑通再按场景拆分规划、定位、数据理解可以分别配置不同模型。数据提取类任务如果确实需要 DOM 辅助也支持按需携带。详细职责划分见仓库内的 模型策略文档。跨平台同一套 APIWeb 验证过的自然语言指令基本可以原样搬到移动端和桌面端。Android 需要先配置 adbiOS 依赖 WebDriverAgent各平台都有自己的 Playground 供交互式调试想读源码的话可以从仓库克隆后查看 packages 目录core承载 Agent 与报告核心android、ios、harmony、computer是各平台实现web-integration是浏览器集成层。git clone https://gitcode.com/GitHub_Trending/mid/midscene让 AI 编程助手参与Midscene 提供 Skills 机制让 AI 编程 Agent 直接操作界面Midscene Test 自动生成的节点文档也是为人和 AI 共同维护用例设计的。写复杂用例时把生成的节点文档喂给 AI 辅助编写是官方推荐的协作方式。注意什么容易踩的坑模型必须先配置好。没有可用的多模态模型任何入口都跑不起来配置错误最常见的表现是连接报错而非AI 不聪明。aiAct 不是万金油。它自主但贵简单的单步操作用aiTap/aiInput更快、结果更可预测。Bridge 模式需要扩展确认。首次连接要手动允许如果需要上传本地文件要在扩展 Details 中开启文件 URL 访问权限后重连。浏览器环境可能有冲突。其他扩展向页面注入iframe或script时可能报Cannot access a chrome-extension:// URL of different extension按报错里的扩展 ID 排查禁用即可。桌面端输入有坑。通过 VNC 等客户端操作时大写和修饰键可能丢失需要调大keyboardModifierDelay并指定键盘布局详见 FAQ。Midscene Test 处于 Beta测试协议和 API 仍在演进正式引入前留意版本变化旧的 YAML 脚本运行器仍可继续使用。断言的是视觉真相。aiAssert检查的是用户看到的样子颜色、高亮、布局、canvas 内容这对测试是优点但意味着它不会替你验证 DOM 层面的细节需要时仍要配合传统断言。小结Midscene.js 的路线是把找元素这件最脆的事交给视觉理解把测什么、期望什么留给自然语言再把确定性工程数据准备、API 调用、生命周期收敛到 TypeScript 节点里。从 Chrome 扩展的零代码体验到 Playwright 集成再到声明式测试工程它提供的是一条可以逐步加深的路径——先用起来再按团队需要往工程化方向走。输出文章结束标记占位 /输出文章抱歉上一行多了一个占位标记以下为修正后的完整输出以此为准输出文章Midscene.js 实战用自然语言写 E2E 测试一套 API 覆盖 Web 与移动端Midscene.js 是一个面向 E2E 测试的视觉驱动 GUI 自动化框架AI 通过看截图来定位元素并执行操作你可以直接用自然语言描述测试步骤。适合前端开发、测试工程师和自动化脚本作者。核心收益页面结构变化时通常不必重写选择器测试脚本跟着界面看起来的样子走。能力速览按你想做什么来选Midscene 提供的不是一个功能清单而是一组对应具体任务的能力。下表从任务视角出发帮你快速对号入座你想做什么Midscene 的对应方式典型 API / 入口不写代码先试试 AI 操作界面在浏览器侧边栏输入自然语言指令Chrome 扩展 Playground让脚本控制我自己的浏览器保留登录态、cookies本地 Node 脚本连接桌面 ChromeBridge 模式AgentOverChromeBridge把视觉能力接进现有测试工程传入 Playwright 的page即可PlaywrightAgent验证用户真正看到的样子高亮、布局、canvas 内容用自然语言描述预期外观aiAssert从界面里提取结构化数据用 JSON 形状描述要什么aiQuery等待某个界面状态出现视觉条件轮询替代写死 sleepaiWaitFor测试 Android / iOS / HarmonyOS / 桌面应用同一套 Agent API换平台包midscene/android等平台包长期维护一套声明式测试用例YAML 写意图 TS 节点写确定性逻辑Midscene TestBeta一句话概括这套工作方式观察屏幕 → 根据看到的内容操作 → 检查界面呈现的结果三个动作分别对应aiAct、aiTap/aiInput、aiAssert。选对入口不同角色走不同路径体验者从 Chrome 扩展开始如果你的目标只是先感受一下 AI 怎么操作网页Chrome 扩展是最短的入口。安装扩展后浏览器右侧会出现 Midscene 侧边栏打开任意网页直接输入符合页面内容的指令规划并交互点击登录按钮提取结构化数据页面中的商品{name: string, price: number}[]检查界面页面顶部显示导航栏运行后可以看到 AI 理解页面、定位元素、执行操作的完整过程。在这里验证过的指令稍后可以原样搬到 SDK 代码里。开发者接进现有的 Playwright 测试已经在用 Playwright 的团队只需要在现有page上包一层PlaywrightAgent视觉能力就进入既有工程import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); // 让 Agent 完成流程再验证结果 await agent.aiAct(搜索耳机然后将结果筛选为价格低于 100 美元); await agent.aiWaitFor(筛选后的搜索结果已显示); await agent.aiAssert(搜索结果中的每件商品价格都低于 100 美元);传统定位page.click等继续可用只在定位困难或需要看的步骤交给 Agent两者在同一脚本里混用。需要真实浏览器环境的人Bridge 模式很多场景下全新的自动化浏览器不够用——你需要已有的登录态、已安装的插件、真实的网络环境。Bridge 模式让本地终端的 Node.js 脚本去控制桌面版 Chrome既能连接新标签页也能附着到当前激活的标签页。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); // 连接到桌面 Chrome 的新标签页 await agent.connectNewTabWithUrl(https://www.bing.com); // 与普通 Midscene Agent 的 API 相同 await agent.aiAct(在搜索框输入 Midscene.js 并回车); await agent.aiAssert(页面出现了搜索结果); await agent.destroy();脚本启动后扩展会弹出确认窗口询问是否允许连接确认后桌面 Chrome 打开新标签页交由脚本控制。这种方式也常被称为 man-in-the-loop。长期维护测试资产的团队Midscene Test一次性验证和长期 E2E 工程是两回事。Midscene Testmidscene/test目前 Beta把声明式测试意图和可编程工程实现分开YAML 文件写 UI 流程和预期结果可复用的 TypeScript 节点封装 API 调用、数据准备和清理操作。例如退款用例可以先通过 API 准备订单再走 UI 申请退款并验证结果。框架还提供生命周期钩子、重试、项目间隔离与并发以及自动生成的节点 Markdown 文档——让人和 AI 编程助手都能读懂并共同维护用例。怎么上手最小可用路径准备环境安装 Node.js通过包管理器安装 Web 端 SDK例如npm install midscene/web。配置模型Midscene 需要多模态模型完成看图配置本质是一组环境变量MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY。使用 Playground 时在设置页粘贴配置文本即可使用 SDK 或 CLI 时按环境变量方式加载。官方支持的模型包括Qwen3.x、Doubao-Seed-2.1、GLM-4.6V、gemini-3.5-flash、UI-TARS也包括可自托管的开源选项。跑通第一个脚本按上面的 Playwright 示例或 Bridge 示例从打开页面 → 一句自然语言操作 → 一个断言起步。看报告每次运行都会生成 HTML 报告包含截图、元素定位过程和 AI 决策链路这是排查失败的第一步。关于成本可以有个直观参考官方在 AppControlBench 评测中Midscene 搭配 Doubao Seed 2.1 Turbo 完成 60 个任务模型调用总费用约 0.59 美元。因为只发送截图而不发送庞大的 DOM 树单步的 token 开销远低于基于 DOM 的方案。怎么深入API 家族与进阶用法分清自主和即时两类 API自主执行aiAct接收目标自己规划步骤、定位元素、执行到完成为止适合多步骤、有分支的任务代价是执行期间持续调用模型耗时和 token 都更高。即时交互aiTap、aiInput、aiScroll等每次只执行一个指定动作定位 固定动作更快更省。如果出现弹窗先关闭再点结账这类带分支的需求才该用aiAct。读取与断言aiQuery提取结构化数据aiBoolean/aiNumber拿单一结论aiAssert校验界面状态aiWaitFor等待视觉条件成立。稳定性开关对复杂任务aiAct支持deepThink加强任务拆解分别用不同模型调用完成规划和定位和deepLocate增加一次模型调用提高小元素、易混淆元素的定位准确率。默认配置不够稳时优先检查是否该开这两个开关而不是重写提示词。模型策略MIDSCENE_MODEL_FAMILY决定 Midscene 如何适配所选模型。可以先单模型跑通再按场景拆分规划、定位、数据理解可以分别配置不同模型。数据提取类任务如果确实需要 DOM 辅助也支持按需携带。详细职责划分见仓库内的 模型策略文档。跨平台同一套 APIWeb 验证过的自然语言指令基本可以原样搬到移动端和桌面端。Android 需要先配置 adbiOS 依赖 WebDriverAgent各平台都有自己的 Playground 供交互式调试想读源码的话可以从仓库克隆后查看 packages 目录core承载 Agent 与报告核心android、ios、harmony、computer是各平台实现web-integration是浏览器集成层。git clone https://gitcode.com/GitHub_Trending/mid/midscene让 AI 编程助手参与Midscene 提供 Skills 机制让 AI 编程 Agent 直接操作界面Midscene Test 自动生成的节点文档也是为人和 AI 共同维护用例设计的。写复杂用例时把生成的节点文档喂给 AI 辅助编写是官方推荐的协作方式。注意什么容易踩的坑模型必须先配置好。没有可用的多模态模型任何入口都跑不起来配置错误最常见的表现是连接报错而非AI 不聪明。aiAct 不是万金油。它自主但贵简单的单步操作用aiTap/aiInput更快、结果更可预测。Bridge 模式需要扩展确认。首次连接要手动允许如果需要上传本地文件要在扩展 Details 中开启文件 URL 访问权限后重连。浏览器环境可能有冲突。其他扩展向页面注入iframe或script时可能报Cannot access a chrome-extension:// URL of different extension按报错里的扩展 ID 排查禁用即可。桌面端输入有坑。通过 VNC 等客户端操作时大写和修饰键可能丢失需要调大keyboardModifierDelay并指定键盘布局详见 FAQ。Midscene Test 处于 Beta测试协议和 API 仍在演进正式引入前留意版本变化旧的 YAML 脚本运行器仍可继续使用。断言的是视觉真相。aiAssert检查的是用户看到的样子颜色、高亮、布局、canvas 内容这对测试是优点但意味着它不会替你验证 DOM 层面的细节需要时仍要配合传统断言。小结Midscene.js 的路线是把找元素这件最脆的事交给视觉理解把测什么、期望什么留给自然语言再把确定性工程数据准备、API 调用、生命周期收敛到 TypeScript 节点里。从 Chrome 扩展的零代码体验到 Playwright 集成再到声明式测试工程它提供的是一条可以逐步加深的路径——先用起来再按团队需要往工程化方向走。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考