#像人一样看懂界面
用自然语言完成 E2E 测试

Midscene.js 提供基于视觉的 GUI Agent 和自然语言 E2E 测试框架，支持 Web、移动端和桌面应用。

🔥 最新动态 从 v1.16 起，Midscene 支持使用 Jev 1.4 的视觉能力驱动 E2E 测试。查看新特性

#用自然语言描述步骤与预期

按用户的操作意图写步骤，按用户看到的结果写预期。同一个测试意图，可以用 YAML 表达，也可以接入现有 JavaScript 测试。

YAML · @midscene/test

Vitest + JavaScript

beforeEach:
  - gotoUrl: https://your-shop.example

cases:
  - name: "筛选 100 美元以下的耳机"
    steps:
      - aiAct: "搜索耳机，然后将结果筛选为价格低于 100 美元"
      - aiWaitFor: "筛选后的搜索结果已显示"
      - aiAssert: "搜索结果中有商品，且每件商品价格都低于 100 美元"

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

// 省略模型配置、page 初始化与资源清理
test("筛选 100 美元以下的耳机", async () => {
  const agent = new PlaywrightAgent(page);
  await agent.aiAct("搜索耳机，然后将结果筛选为价格低于 100 美元");
  await agent.aiWaitFor("筛选后的搜索结果已显示");
  await agent.aiAssert("搜索结果中有商品，且每件商品价格都低于 100 美元");
}, 180_000);

#为测试而生的 GUI Agent

Midscene 的 GUI Agent 为已有的 Playwright、Puppeteer 或 JavaScript 测试提供视觉操作与断言能力。

#像人一样观察、操作并验证结果

#一套 API，覆盖不同平台

视觉定位不依赖特定的界面渲染结构。各平台适配器提供截图和操作能力，让同一种交互方式覆盖 Web、移动端和桌面应用，也适用于 HTML canvas 等自定义界面。

#模型选择与成本

#Benchmark 成绩

• AndroidWorld：Pass@1 为 93.1%，Pass@3 为 97.4%。查看评测报告
• MobileWorld：Pass@1 为 78.6%，完成 117 项任务中的 92 项。查看评测报告
• AppControlBench：Pass@1 为 96.7%，通过 60 项任务中的 58 项。查看评测报告

#全新设计的自然语言 E2E 测试框架

Midscene Test（@midscene/test）是面向 AI 时代设计的自然语言 E2E 测试框架。它将 AI 的灵活性与代码的确定性结合在同一份用例中：用自然语言表达操作意图与预期，用代码承载需要精确控制的业务逻辑。测试流程以清晰、可读的结构呈现，让人和 AI 都能理解、编写和维护，也让测试意图与底层实现能够独立演进。开始使用 Midscene Test

#AI 操作与业务操作写在同一个 YAML 里

每个 YAML 步骤都对应一个 Node（节点），可以是 AI 操作、平台操作或自定义业务操作。将这些 Node 组合成人和 AI 都能读写、审阅的测试用例。

1beforeEach:2  - order.prepare: { status: paid }业务3  - gotoUrl: ${shopUrl}/orders/latest业务45cases:6  - name: 已支付订单支持全额退款7    steps:8      - aiAct: 申请全额退款并提交AI9      - aiAssert: 页面显示退款申请已提交AI10      - order.checkRefund: { status: refunding }业务1112afterEach:13  - clearCookies: {}业务

#让人和 AI 共同维护测试用例

随着业务发展，测试工程可以持续积累可复用的业务操作，让用例保持对测试意图的清晰表达。人和 AI 可以基于同一份能力说明理解、编写和修改用例，业务操作的实现则可以独立维护。

Midscene Test 通过自定义 Node 承载这些业务能力，并根据项目已注册的操作生成 Markdown 格式的 Node Spec，为人和 AI 提供一致的用例编写依据。了解扩展机制

#谁在使用 Midscene

ByteDance阿里巴巴携程小米Rome OS火山引擎抖音TikTok飞书汽水音乐豆包

#下一步

• 了解基本概念：阅读基础概念，了解 GUI Agent 的工作方式与核心能力
• 体验视觉交互：通过快速开始尝试自然语言操作与断言
• 创建测试工程：用 Midscene Test 编写并运行 YAML 用例

如果希望让 AI 编程 Agent 操作界面，可以了解 Midscene Skills。