Repolode
web-infra-dev

web-infra-dev/midscene

Midscene.js 是一个基于视觉的 E2E 测试框架,可用自然语言编写 Web、移动端和桌面应用的界面操作与断言。

Star
15,331
Fork
1,201
未关闭 Issue
123
最近提交
5小时前

这是什么?

Midscene.js 将视觉识别引入端到端测试。测试用例用自然语言描述界面操作和预期结果,由视觉 GUI Agent 根据截图定位元素,完成点击、输入、滚动,并校验屏幕上实际呈现的内容。图标按钮、自定义控件、canvas 内容和跨域 iframe 都可以直接操作,无需维护 CSS 或 XPath 选择器。

项目提供两种使用方式:Midscene Test 支持用 YAML 编写用例,并通过 TypeScript 节点复用数据准备、接口调用和清理逻辑;也可以把 aiAct、aiTap、aiInput、aiAssert、aiQuery、aiWaitFor 等 Agent API 接入已有的 Playwright 或 Puppeteer 测试。平台覆盖 Web 浏览器、通过 ADB 控制的 Android、通过 WebDriverAgent 控制的 iOS、通过 HDC 控制的鸿蒙系统以及桌面端。

模型可以灵活选择,支持多个具备视觉能力的模型,其中包括可自托管的开源方案。每次运行会生成可交互的 HTML 报告,展示截图、元素位置以及操作和断言结果。

核心功能

  • 01用自然语言描述界面操作和断言,可校验颜色、布局和视觉反馈。
  • 02基于截图定位元素,图标按钮和 canvas 内容无需选择器。
  • 03通过 Midscene Test 支持 YAML 用例,并可复用 TypeScript 节点。
  • 04通过 Agent API 接入 Playwright 和 Puppeteer。
  • 05覆盖 Web、Android、iOS、鸿蒙和桌面端。
  • 06生成包含截图和执行结果的交互式 HTML 报告。

适用场景

  • 为选择器不稳定或难以获取的 Web 应用编写端到端测试。
  • 测试 canvas 或视觉渲染界面,这类界面难以用 DOM 断言检查。
  • 在现有 Playwright 或 Puppeteer 测试套件中加入视觉校验。
  • 在 Android 或 iOS 真机和模拟器上自动化移动应用流程。

快速上手

  1. 1

    从 npm 安装 Web SDK 包

  2. 2

    创建 Midscene Test 项目(具体设置命令参见指南)

  3. 3

    配置模型和 Web 运行时,然后编写 YAML 测试用例并运行

使用前须知

  • 需要可用的视觉 AI 模型,必须自行配置并承担费用。
  • 报告中的基准结果依赖于特定模型和运行配置。

标签

常见问题

midscene 是什么?
Midscene.js 是一个基于视觉的 E2E 测试框架,可用自然语言编写 Web、移动端和桌面应用的界面操作与断言。 Midscene.js 将视觉识别引入端到端测试。测试用例用自然语言描述界面操作和预期结果,由视觉 GUI Agent 根据截图定位元素,完成点击、输入、滚动,并校验屏幕上实际呈现的内容。图标按钮、自定义控件、canvas 内容和跨域 iframe 都可以直接操作,无需维护 CSS 或 XPath 选择器。
midscene 可以免费使用吗?用的什么许可证?
midscene 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
midscene 还在维护吗?
活跃维护中。midscene 最近一次提交是在 2026年10月20日。
midscene 适合用来做什么?
为选择器不稳定或难以获取的 Web 应用编写端到端测试。 测试 canvas 或视觉渲染界面,这类界面难以用 DOM 断言检查。 在现有 Playwright 或 Puppeteer 测试套件中加入视觉校验。 在 Android 或 iOS 真机和模拟器上自动化移动应用流程。
midscene 怎么安装和运行?
从 npm 安装 Web SDK 包 创建 Midscene Test 项目(具体设置命令参见指南) 配置模型和 Web 运行时,然后编写 YAML 测试用例并运行
在哪里获取 midscene?
源代码和安装说明在 GitHub 上:https://github.com/web-infra-dev/midscene

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目