• 简体中文

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

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

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

      15k+Github Stars
      MIT完全开源
      #2Github 趋势榜第2名

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

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

      YAML · @midscene/test
      Vitest + JavaScript
      beforeEach:
  - gotoUrl: https://your-shop.example

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

      为测试而生的 GUI Agent

      Midscene 的 GUI Agent 为已有的 JavaScript 测试提供视觉操作与断言能力。Web 场景推荐接入 Playwright Test，移动端和桌面端推荐接入 Vitest。

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

      E2E 测试的初衷是从用户视角验证完整流程，所以 Midscene 按用户的方式来测。

      1. 观察屏幕读取截图，不依赖 DOM
      2. 执行操作找到目标，点击、输入或滚动
      3. 检查结果断言用户实际看到的内容
      查看实际案例

      一套 API，覆盖不同平台

      视觉定位不依赖界面渲染结构，同一套 API 可用于 Web、移动端、桌面端以及 canvas 等自定义界面。

      Web@midscene/webAndroid@midscene/androidiOS@midscene/ios
      同一套 APIawait agent.aiAct('搜索耳机')
      HarmonyOS@midscene/harmony桌面@midscene/computer自定义界面@midscene/core

      模型选择与成本

      支持多种模型

      支持豆包、DeepSeek、Qwen、GPT、Gemini、Kimi 等模型，按效果与预算选择。

      查看模型配置

      低模型调用成本

      以豆包 Seed 2.1 Turbo 为例：该次 AppControlBench 评测中，60 项任务通过 58 项，模型调用总费用为 $0.59。

      查看评测报告

      Benchmark 成绩

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

      Midscene Test（@midscene/test）是面向自然语言的 E2E 测试框架。用 YAML 描述操作和预期，需要精确控制的逻辑交给 TypeScript。开始使用 Midscene Test

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

      YAML 中的每个步骤都调用一个 Node：AI 操作、平台操作或自定义业务操作，组合起来就是一个用例。

      cases/refund.yaml
      beforeEach:  - order.prepare: { status: paid }业务  - gotoUrl: ${shopUrl}/orders/latest业务cases:  - name: 已支付订单支持全额退款    steps:      - aiAct: 申请全额退款并提交AI      - aiAssert: 页面显示退款申请已提交AI      - order.checkRefund: { status: refunding }业务afterEach:  - clearCookies: {}业务

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

      把可复用的业务逻辑封装成自定义 Node。Midscene Test 会生成 Markdown 格式的 Node 说明书（Node Spec），列出每个 Node 及其参数，测试工程师和 AI Agent 无需阅读 TypeScript 就能编写用例。了解如何开发自定义 Node

      1. nodes/order.ts
        defineNode({
  name: 'order.prepare',
  description: "创建测试订单",
  inputSchema: z.strictObject({
    status: z.literal('paid'),
  }),
  async execute({ input }) {
    await orders.create(input);
  },
});
      2. midscene-node-spec.md
        ### order.prepare
创建测试订单
- status: "paid"
      3. case.yaml
        steps:
  - order.prepare:
      status: paid

      测试框架能力

      Midscene Test 同样具备测试框架应有的能力：生命周期钩子与资源清理、失败重试与超时、隔离的并发执行，以及精确到步骤的报告。

      生命周期钩子与资源清理

      通过 setup、fileSetup、beforeAll、beforeEach 及对应的清理钩子，分别在项目、文件和用例层级准备与清理资源。用例失败、超时或按下 Ctrl+C 后，清理流程仍会执行。

      项目生命周期

      失败重试与超时

      失败用例可以重试，每次尝试都会重新执行 beforeEach、步骤和 afterEach。可以设置步骤超时，用 continue-on-error 在步骤失败后继续执行，用 bail 提前停止。

      失败时如何执行

      并发与隔离

      通过 maxConcurrentFiles 并发运行多个 YAML 文件。fileSetup 为每个文件准备独立的页面、Agent 或设备，并发文件之间不共享状态。

      并发与资源隔离

      精确到步骤的报告

      HTML 报告记录每个步骤的截图、输入、输出、错误和 Agent 回放。通过 #runner-step=last-error 链接，可以从 CI 通知或 PR 评论直接打开最近一次失败的步骤；summary.json 和 result.md 则供脚本和 AI Agent 读取。

      输出与报告

      谁在使用 Midscene

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

      下一步

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