Midscene.js UI自动化测试指南如何用自然语言驱动跨平台界面测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene用 Selenium 或 Cypress 写过 UI 测试的人大多被同一批问题消耗过时间。页面一重构选择器批量失效测试还没测产品先测自己的脚本。更糟的是只有图标的按钮、canvas画出来的控件、跨域 iframe 里的内容传统工具干脆没有定位能力而原生 App 的界面Web 测试工具更是完全够不到。Midscene.js UI自动化测试正是为这些问题准备的解法。Midscene.js 到底是什么Midscene.js 是一个基于视觉 AI 的 GUI Agent 测试框架MIT 协议开源项目描述只有一行GUI Agent for E2E Testing。它的做法和传统工具相反不读 DOM、不写选择器而是截图给多模态模型看再用一句自然语言描述要做什么和应该看到什么。同一套 Agent API 覆盖 5 个平台WebPlaywright / Puppeteer / Chrome 扩展桥接Androidadb 投屏iOSWebDriverAgentHarmonyOShdc桌面端Windows / macOS / Linux平台切换时你改的是设备接入方式不是操作逻辑。上图是它的 Web Playground左侧输入Click the search bar右侧浏览器里的鼠标就移动到搜索框上整个过程没有一行选择器代码。第一次上手10分钟跑通第一个测试先明确一个前提Midscene.js 需要你自己提供一个多模态模型服务。它本身不带模型通过 4 个环境变量接入OpenAI 兼容格式即可export MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 export MIDSCENE_MODEL_API_KEY你的API-KEY export MIDSCENE_MODEL_NAME模型名称 export MIDSCENE_MODEL_FAMILY模型系列装 CLI 并跑一个最小脚本。要求 Node.js 20.19 或 22.12两条命令npm i -g midscene/cli midscene ./bing-search.yamlbing-search.yaml的全部内容如下结构只有两段page声明目标页面tasks下的flow就是自然语言步骤page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 # ai 是 aiAct 的简写自动规划多步操作 - sleep: 3000 # 给结果页留出加载时间 - aiAssert: 结果显示天气信息跑完后终端输出执行进度同目录生成一个 HTML 报告。打开它就能看到每一步的截图、AI 定位到的元素框、断言结果。想跳过写文件这一步也可以装 Chrome 扩展版 Playground直接在任意网页上输入指令试效果验证有效后再固化成脚本。从 Playground 到生产代码只差一次 API 调用指令原样搬过去await agent.aiAct(点击登录按钮)—— 规划并执行多步交互const list await agent.aiQuery(页面中的商品{name: string, price: number}[])—— 提取结构化数据await agent.aiAssert(页面顶部显示导航栏)—— 视觉断言核心能力场景与效果视觉定位选择器覆盖不到的地方截图都能覆盖。传统工具定位依赖选择器图标按钮、自定义控件、canvas 内容、跨域 iframe 是它的盲区。Midscene.js 按元素的视觉外观和屏幕位置定位这些场景直接可用。效果是页面重构后只要人眼还能认出那个按钮脚本就不需要改选择器维护这条成本线被整体去掉。自然语言执行一句话接管一段流程。aiAct接收一句目标描述模型自己拆解步骤、逐个定位、依次执行。场景是不想写死 5 步操作的中间态比如搜索耳机再把价格过滤到 100 美元以下。效果是一行代码顶一段操作序列且中间步骤变了不用改代码。视觉断言断言的是用户看到的东西不是 DOM 结构。aiAssert用自然语言描述期望画面检查颜色、选中态、布局、提示文案连 canvas 里画的内容也能断言。场景是加载骨架屏消失后列表出现选中项有蓝色边框和勾选标记这类传统工具只能变通着测的点。效果是断言和真实用户视角对齐。跨平台同一套 API改接入方式不改操作逻辑。前面 5 个平台共用aiAct/aiTap/aiInput/aiAssert/aiQuery。场景是一个功能要在 Web 和 Android 上各跑一遍。效果是 YAML 脚本里只换 target 段page:换成android:加设备 IDtasks一字不动。上图是 Android Playground 在跑一条打开设置、查看安卓版本的指令左侧时间线展示了每轮 Planning → Insight/Locate → Action 的拆解过程右侧是 Redmi K30 的实时投屏。两个实战场景场景一电商搜索与价格过滤Web。覆盖搜索 → 等结果 → 过滤 → 断言的完整闭环import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(搜索耳机然后把价格过滤到 100 美元以下); await agent.aiWaitFor(过滤后的搜索结果已经展示); await agent.aiAssert(搜索结果中的商品价格都在 100 美元以下);3 行覆盖一段完整用户路径aiWaitFor负责吸收加载耗时的波动。场景二跨端一致性Web Android。同一段流程写成 YAMLtarget 段换成设备信息即可android: deviceId: s4ey59 # 用 adb devices 查到 tasks: - name: 搜索天气 flow: - ai: 在搜索框输入今日天气 - aiAssert: 结果显示天气信息把文件里的android:段换成page:加url同一份tasks就在 Web 上跑了。两端各跑一遍、对比报告一致性验证不需要维护两套脚本。iOS 侧同理配好 WebDriverAgent 后ios:段加wdaPort即可驱动真机或模拟器。实用技巧与避坑动态内容用aiWaitFor别堆sleep。页面异步加载、动画收尾这类场景固定等待要么太短偶发失败、要么太长拖慢整套测试。aiWaitFor带条件轮询每轮截图判断条件满足即通过默认超时 30 秒await agent.aiWaitFor(数据加载完成结果列表已显示);YAML 里写法是aiWaitFor加可选timeout单位毫秒。CI/CD 接入靠 CLI 参数不靠自己搭编排。几个参数直接对应工程化诉求--concurrent 4并发跑互不依赖的脚本--continue-on-error单条失败不阻塞整批--retry 2只重试失败脚本缓解模型输出和网络偶发抖动--summary输出汇总 JSON方便 CI 判定一次运行产出 3 类产物汇总 JSON、每个脚本的独立结果 JSON、每个脚本的 HTML 报告直接作为 CI 附件上传即可。模型按成本挑截图路线本身开销可控。Midscene.js 支持 Qwen、Doubao-Seed、GLM-4.6V、gemini、UI-TARS 等模型开源选项可以自托管。走截图路线的好处是不用把整棵 DOM 树喂给模型。官方基准报告里Doubao Seed 2.1 Turbo 跑完 60 个任务的 AppControlBench 评测模型总花费 0.59 美元。建议先用一个模型把流程跑稳再按单任务成本横向对比。调试看报告试指令用 Playground。默认无头运行加--headed可以打开浏览器窗口看实时过程--keep-window结束后保留窗口。HTML 报告记录每一步的截图、定位框、Planning 过程和断言结果失败时打开报告就能回答AI 当时看到了什么、做了什么决定。写脚本前先在 Chrome 扩展 Playground 里把指令试 2~3 遍比写完再调试省时间。上图是一次真实运行的报告左侧时间线列出 Planning、Insight/Locate、Action、aiWaitFor、aiQuery、aiAssert 每步的耗时右侧是带鼠标轨迹的页面回放。和传统工具的区别维度Selenium / CypressMidscene.js定位方式选择器CSS / XPath截图 视觉模型选择器维护成本随重构持续发生基本为零canvas / 图标按钮 / 跨域 iframe需额外手段或无解人眼可见即可定位原生 AppAndroid / iOS / 鸿蒙 / 桌面不适用原生支持断言对象DOM 状态用户看到的画面脚本语言代码自然语言YAML / API一句话概括传统工具验证结构对不对Midscene.js 验证用户看到的是不是想要的。两者不是替代关系——高频、稳定的关键路径用传统工具更快更省复杂交互、跨端一致性、无语义元素多的界面交给视觉路线混用更合理。小结Midscene.js 把操作界面这件事从选择器语言换成了自然语言视觉 AI 承担定位一套 Agent API 从 Web 覆盖到 Android、iOS、HarmonyOS 和桌面端。它解决的是选择器维护成本、canvas 与无语义控件的定位缺口、以及跨端重复写脚本这三类具体问题不是所有测试都值得迁移——但 UI 变动频繁、元素缺乏语义标注、或者一个流程要在多个端各跑一遍的项目值得先试。建议路径先装 Chrome 扩展版 Playground在真实页面上试 2~3 条指令确认你的界面和模型组合能稳定命中能命中之后再把指令固化成 YAML 脚本用--retry和 HTML 报告接入 CI。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/12 11:17:41 · 阅读 1.2k Midscene.js UI自动化测试指南：如何用自然语言驱动跨平台界面测试
Midscene.js UI自动化测试指南如何用自然语言驱动跨平台界面测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene用 Selenium 或 Cypress 写过 UI 测试的人大多被同一批问题消耗过时间。页面一重构选择器批量失效测试还没测产品先测自己的脚本。更糟的是只有图标的按钮、canvas画出来的控件、跨域 iframe 里的内容传统工具干脆没有定位能力而原生 App 的界面Web 测试工具更是完全够不到。Midscene.js UI自动化测试正是为这些问题准备的解法。Midscene.js 到底是什么Midscene.js 是一个基于视觉 AI 的 GUI Agent 测试框架MIT 协议开源项目描述只有一行GUI Agent for E2E Testing。它的做法和传统工具相反不读 DOM、不写选择器而是截图给多模态模型看再用一句自然语言描述要做什么和应该看到什么。同一套 Agent API 覆盖 5 个平台WebPlaywright / Puppeteer / Chrome 扩展桥接Androidadb 投屏iOSWebDriverAgentHarmonyOShdc桌面端Windows / macOS / Linux平台切换时你改的是设备接入方式不是操作逻辑。上图是它的 Web Playground左侧输入Click the search bar右侧浏览器里的鼠标就移动到搜索框上整个过程没有一行选择器代码。第一次上手10分钟跑通第一个测试先明确一个前提Midscene.js 需要你自己提供一个多模态模型服务。它本身不带模型通过 4 个环境变量接入OpenAI 兼容格式即可export MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 export MIDSCENE_MODEL_API_KEY你的API-KEY export MIDSCENE_MODEL_NAME模型名称 export MIDSCENE_MODEL_FAMILY模型系列装 CLI 并跑一个最小脚本。要求 Node.js 20.19 或 22.12两条命令npm i -g midscene/cli midscene ./bing-search.yamlbing-search.yaml的全部内容如下结构只有两段page声明目标页面tasks下的flow就是自然语言步骤page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 # ai 是 aiAct 的简写自动规划多步操作 - sleep: 3000 # 给结果页留出加载时间 - aiAssert: 结果显示天气信息跑完后终端输出执行进度同目录生成一个 HTML 报告。打开它就能看到每一步的截图、AI 定位到的元素框、断言结果。想跳过写文件这一步也可以装 Chrome 扩展版 Playground直接在任意网页上输入指令试效果验证有效后再固化成脚本。从 Playground 到生产代码只差一次 API 调用指令原样搬过去await agent.aiAct(点击登录按钮)—— 规划并执行多步交互const list await agent.aiQuery(页面中的商品{name: string, price: number}[])—— 提取结构化数据await agent.aiAssert(页面顶部显示导航栏)—— 视觉断言核心能力场景与效果视觉定位选择器覆盖不到的地方截图都能覆盖。传统工具定位依赖选择器图标按钮、自定义控件、canvas 内容、跨域 iframe 是它的盲区。Midscene.js 按元素的视觉外观和屏幕位置定位这些场景直接可用。效果是页面重构后只要人眼还能认出那个按钮脚本就不需要改选择器维护这条成本线被整体去掉。自然语言执行一句话接管一段流程。aiAct接收一句目标描述模型自己拆解步骤、逐个定位、依次执行。场景是不想写死 5 步操作的中间态比如搜索耳机再把价格过滤到 100 美元以下。效果是一行代码顶一段操作序列且中间步骤变了不用改代码。视觉断言断言的是用户看到的东西不是 DOM 结构。aiAssert用自然语言描述期望画面检查颜色、选中态、布局、提示文案连 canvas 里画的内容也能断言。场景是加载骨架屏消失后列表出现选中项有蓝色边框和勾选标记这类传统工具只能变通着测的点。效果是断言和真实用户视角对齐。跨平台同一套 API改接入方式不改操作逻辑。前面 5 个平台共用aiAct/aiTap/aiInput/aiAssert/aiQuery。场景是一个功能要在 Web 和 Android 上各跑一遍。效果是 YAML 脚本里只换 target 段page:换成android:加设备 IDtasks一字不动。上图是 Android Playground 在跑一条打开设置、查看安卓版本的指令左侧时间线展示了每轮 Planning → Insight/Locate → Action 的拆解过程右侧是 Redmi K30 的实时投屏。两个实战场景场景一电商搜索与价格过滤Web。覆盖搜索 → 等结果 → 过滤 → 断言的完整闭环import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(搜索耳机然后把价格过滤到 100 美元以下); await agent.aiWaitFor(过滤后的搜索结果已经展示); await agent.aiAssert(搜索结果中的商品价格都在 100 美元以下);3 行覆盖一段完整用户路径aiWaitFor负责吸收加载耗时的波动。场景二跨端一致性Web Android。同一段流程写成 YAMLtarget 段换成设备信息即可android: deviceId: s4ey59 # 用 adb devices 查到 tasks: - name: 搜索天气 flow: - ai: 在搜索框输入今日天气 - aiAssert: 结果显示天气信息把文件里的android:段换成page:加url同一份tasks就在 Web 上跑了。两端各跑一遍、对比报告一致性验证不需要维护两套脚本。iOS 侧同理配好 WebDriverAgent 后ios:段加wdaPort即可驱动真机或模拟器。实用技巧与避坑动态内容用aiWaitFor别堆sleep。页面异步加载、动画收尾这类场景固定等待要么太短偶发失败、要么太长拖慢整套测试。aiWaitFor带条件轮询每轮截图判断条件满足即通过默认超时 30 秒await agent.aiWaitFor(数据加载完成结果列表已显示);YAML 里写法是aiWaitFor加可选timeout单位毫秒。CI/CD 接入靠 CLI 参数不靠自己搭编排。几个参数直接对应工程化诉求--concurrent 4并发跑互不依赖的脚本--continue-on-error单条失败不阻塞整批--retry 2只重试失败脚本缓解模型输出和网络偶发抖动--summary输出汇总 JSON方便 CI 判定一次运行产出 3 类产物汇总 JSON、每个脚本的独立结果 JSON、每个脚本的 HTML 报告直接作为 CI 附件上传即可。模型按成本挑截图路线本身开销可控。Midscene.js 支持 Qwen、Doubao-Seed、GLM-4.6V、gemini、UI-TARS 等模型开源选项可以自托管。走截图路线的好处是不用把整棵 DOM 树喂给模型。官方基准报告里Doubao Seed 2.1 Turbo 跑完 60 个任务的 AppControlBench 评测模型总花费 0.59 美元。建议先用一个模型把流程跑稳再按单任务成本横向对比。调试看报告试指令用 Playground。默认无头运行加--headed可以打开浏览器窗口看实时过程--keep-window结束后保留窗口。HTML 报告记录每一步的截图、定位框、Planning 过程和断言结果失败时打开报告就能回答AI 当时看到了什么、做了什么决定。写脚本前先在 Chrome 扩展 Playground 里把指令试 2~3 遍比写完再调试省时间。上图是一次真实运行的报告左侧时间线列出 Planning、Insight/Locate、Action、aiWaitFor、aiQuery、aiAssert 每步的耗时右侧是带鼠标轨迹的页面回放。和传统工具的区别维度Selenium / CypressMidscene.js定位方式选择器CSS / XPath截图 视觉模型选择器维护成本随重构持续发生基本为零canvas / 图标按钮 / 跨域 iframe需额外手段或无解人眼可见即可定位原生 AppAndroid / iOS / 鸿蒙 / 桌面不适用原生支持断言对象DOM 状态用户看到的画面脚本语言代码自然语言YAML / API一句话概括传统工具验证结构对不对Midscene.js 验证用户看到的是不是想要的。两者不是替代关系——高频、稳定的关键路径用传统工具更快更省复杂交互、跨端一致性、无语义元素多的界面交给视觉路线混用更合理。小结Midscene.js 把操作界面这件事从选择器语言换成了自然语言视觉 AI 承担定位一套 Agent API 从 Web 覆盖到 Android、iOS、HarmonyOS 和桌面端。它解决的是选择器维护成本、canvas 与无语义控件的定位缺口、以及跨端重复写脚本这三类具体问题不是所有测试都值得迁移——但 UI 变动频繁、元素缺乏语义标注、或者一个流程要在多个端各跑一遍的项目值得先试。建议路径先装 Chrome 扩展版 Playground在真实页面上试 2~3 条指令确认你的界面和模型组合能稳定命中能命中之后再把指令固化成 YAML 脚本用--retry和 HTML 报告接入 CI。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考