Midscene.js：自然语言 E2E 测试框架

项目简介

Midscene.js 是一个把 AI 视觉能力带入 E2E 测试的开源项目。它像人一样观察界面：看截图、执行操作、再验证用户看到的结果。你可以用自然语言描述 UI 步骤和预期结果，由 GUI Agent 自动完成点击、输入等操作；既能编写 YAML 测试用例，也能把 Agent API 接入已有的测试框架。官方文档：https://midscenejs.com

主要功能

• 自然语言写测试：用 aiAct、aiWaitFor、aiAssert 描述操作与断言，不必维护选择器或添加语义标注。
• 基于截图定位元素：按外观与位置查找元素，可处理纯图标按钮、自定义控件、<canvas> 以及跨域 iframe 内的元素。
• 验证用户看到的画面：用自然语言检查颜色、选中高亮、布局、错误提示等视觉反馈。
• 一套 API 覆盖多端：Web（Playwright、Puppeteer、桌面 Chrome）、Android（ADB）、iOS（WebDriverAgent）、HarmonyOS（HDC）、桌面端（macOS / Windows / Linux，支持远程 RDP），以及自定义接口。
• Midscene Test 测试框架（@midscene/test）：YAML 用例配 TypeScript Nodes 复用业务能力，支持生命周期钩子与清理、重试与超时、并发隔离，以及步骤级报告（截图、输入输出、Agent 回放、summary.json）。
• 多模型可选：支持 GPT、Qwen、Doubao Seed、DeepSeek、Gemini、Kimi 等，也包含可自托管的开源模型。

安装与使用

在已有测试中直接使用 Agent，以 Playwright 为例：

import { PlaywrightAgent } from '@midscene/web/playwright';

const agent = new PlaywrightAgent(page);
await agent.aiAct('Search for headphones and filter the results to prices under $100');
await agent.aiAssert('There are products in the search results, and each costs less than $100');

也可以用 YAML 编写 Midscene Test 用例：

cases:
  - name: Find headphones under $100
    steps:
      - aiAct: Search for headphones and filter the results to prices under $100
      - aiAssert: There are products in the search results, and each costs less than $100

先按文档创建 Midscene Test 项目并配置模型与运行环境；想先试用，可以用 Chrome 扩展，或使用移动端、桌面端的 Playground。

注意事项

• 使用前需要配置视觉模型，会产生模型调用费用。
• 移动端与桌面端测试依赖对应的设备连接方式（ADB、WebDriverAgent、HDC 等）。
• 项目以 MIT 许可证开源，示例项目见 midscene-example 仓库。

本作品整理自 GitHub 开源项目 web-infra-dev/midscene，原作者 @web-infra-dev，许可证 MIT。中文介绍由 AI 根据项目 README 整理，以原仓库为准。