使用Midscene实现AI自动化测试

1. 关于Midscene.js

Midscene.js是一款适用于 Web、移动端、自动化和测试的开源AI 操作助手。它既可以通过自然语言描述的目标和步骤规划和操作用户界面，同时又可以与传统的自动化框架，如Puppeteer，playwright集成使用。此外，它还提供丰富的接入场景，如Chrome插件，MCP服务，以及cli模式，极大地提高了测试自动化的效率。

1.1. 为什么使用Midscene.js

在软件开发过程中，UI自动化测试已成为保证整个产品质量的重要环节之一。然而在一些迭代快速的小型公司，传统的UI自动化工具面临着诸多挑战，比如测试人员少，测试任务紧急，页面迭代快等情况，传统的自动化由于依赖CSS选择器，XPath或 ID来定位元素，这些选择器在页面变化时极易失效。此外，自动化测试用例维护成本大，定位时间长，缺乏执行过程也常常困扰着一代代的自动化测试人员。随着当今AI技术的快速发展，我们对自动化工具有了新的期望，希望用自然语言描述操作意图，而不是学习复杂的选择器语法，而这正是 Midscene.js 诞生的原因。

1.2. 与其他AI自动化测试工具的对比

下面对anti-work/shortest，browserbase/stagehand以及web-infra-dev/midscene进行一个简单的对比：

对比项	anti-work/shortest	browserbase/stagehand	web-infra-dev/midscene
项目定位	UI E2E 测试框架	通用自动化框架	UI E2E 测试框架
Github Star	⭐️ 5.4k	⭐️ 18.9k	⭐️ 10.6k
技术方案类型	基于 Claude computer_use 能力	基于通用 LLM text + vision 能力	基于通用 LLM text + vision 能力
核心理念	通过 Claude 的视觉+鼠标控制 API 实现端到端操作与测试	利用 LLM 的视觉理解与文本推理实现浏览器自动化任务	结合视觉与文本理解，用 LLM 驱动多场景交互与测试
主要功能	- UI 自动点击/输入测试- 元素定位与状态验证- E2E 工作流模拟	- 浏览器环境自动操作- 跨平台网页测试与数据采集- 通用网页行为自动化	- 页面元素识别与上下文分析- 测试场景执行与反馈收集- 支持视觉与文本混合输入
模型依赖	强依赖 Claude 系列模型（具 computer_use 功能）	通用型大模型（GPT-4o、Gemini 1.5 Pro 等）	通用型大模型（GPT-4o、Claude 3.5、Qwen2.5 等）
视觉能力	内置于 Claude，封装较深	外部模型视觉接口（图像识别、OCR、区域推理）	多模态整合，强调复杂视觉上下文理解
适用场景	测试类任务、端到端操作自动化	通用浏览器自动化、数据收集、UI 测试	跨域 UI 测试、多模态交互验证
易用性	🟡 受限于 Claude 接口权限与调用限制	🟢 可通用、灵活性高	🟢 支持多模型与多任务适配
可用性	🤔（有一定可行性但不稳定）	👌（稳定可用）	👌（稳定可用）
社区活跃度	中高（聚焦 Claude 实验特性）	高（通用开发者参与度强）	高（增长快）
代表性应用场景	E2E 测试流水线、前端 QA 自动化	智能网页操作代理、浏览器任务机器人	自动化测试 + 视觉识别验证系统
技术风险	对 Claude 能力和 API 限制依赖强	模型泛化能力与视觉接口精度	多模态上下文同步与一致性问题
总体评价	创新性高、封闭性强	稳定成熟、通用性高	平衡性好、适合集成式测试体系

2. Midscene.js使用

2.1. AI模型配置

不管使用什么方式，首先我们需要做的事情是AI模型的配置。Midscene.js 支持两种类型的模型：视觉语言模型和 LLM 模型(将在下一个大版本移除)。当前已经适配的模型包括：

千问VL
豆包系列视觉语言模型
Gemini-2.5-Pro
UI-TARS

各模型的配置信息可以参考官方文档： https://midscenejs.com/zh/choose-a-model.html

这里简单以阿里百炼平台的qwen3-vl-plus举例，环境变量配置如下：

OPENAI_API_KEY="sk-585be53v82264254bfaddc67bcge1dd8"
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"  
MIDSCENE_MODEL_NAME="qwen3-vl-plus"
MIDSCENE_USE_QWEN3_VL=1

如果使用Midscene.js chrome插件试用，环境变量配置在设置中。

如果是在playwright中集成，环境变量可以配置在.env中，通过import 'dotenv/config';来导入。

export OPENAI_API_KEY="sk-585be53v82264254bfaddc67bcge1dd8"
export OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
export MIDSCENE_MODEL_NAME="qwen3-vl-plus"
export MIDSCENE_USE_QWEN3_VL=1
# export MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
# export MIDSCENE_USE_QWEN_VL=1

2.2. Midscene.js chrome插件使用

前往 Chrome 扩展商店安装 Midscene 扩展：Midscene

AI模型配置完成后的界面如下图所示：

Chrome插件提供了多个关键操作 Tab，作用如下：

Action: 与网页进行交互，这就是所谓的自动规划（Auto Planning）
Tap: 在某个元素上点击，这就是所谓的即时操作（Instant Action）
Query: 从界面中提取 JSON 数据
Assert: 验证页面
More：包含了其他何种页面动作(比如Scroll)以及数据类戏的判断操作

运行效果如下，结束后可以查看回放，下载报告与视频：

2.3. Midscene.js chrome桥接模式

这里以Trae举例, 在Trae配置中添加MCP，选择手动配置，输入并点击确认：

{
  "mcpServers": {
    "mcp-midscene": {
      "command": "npx",
      "args": [
        "-y",
        "@midscene/mcp"
      ],
      "env": {
        "MIDSCENE_MODEL_NAME": "qwen3-vl-plus",
        "OPENAI_API_KEY": "sk-585be53v82264254bfaddc67bcge1dd8",
        "OPENAI_BASE_URL": "https://dashscope.aliyuncs.com/compatible-mode/v1",
        "MCP_SERVER_REQUEST_TIMEOUT": "800000"
      }
    }
  }
}

然后在chrome中选择“Bridge Mode”，就可以在Trae中输入步骤了：
bridge

2.4. Midscene.js集成到playwright

2.4.1. 安装依赖

1	npm install @midscene/web playwright @playwright/test tsx --save-dev

2.4.2. 创建环境变量

AI模型配置参考2.1。
修改playwright.config.ts, 添加testDir，timeout，以及reporter路径。

export default defineConfig({
  testDir: './tests',
  timeout: 9000 * 1000,
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [["list"],["@midscene/web/playwright-report"]],
  ...
  })

2.4.3. 添加用例

添加一个简单的用例：

import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page }) => {
    await page.goto("http://192.168.31.110/");
    await page.waitForLoadState("networkidle");
});

test("简单的登录验证", async ({ page,
    ai,
    aiQuery,
    aiAssert,
    aiInput,
    aiTap,
    aiScroll,
    aiWaitFor,
}) => {
    await aiInput("admin", "username");
    await aiInput("admin", "password");

    await aiTap("submit");
    await aiWaitFor("Plant弹窗", { timeoutMs: 10000 });

    await aiWaitFor("China-Installation下拉选项框", { timeoutMs: 5000 });
    await aiTap("China-Installation下拉选项");

    await aiTap("在下拉选项中找到第一个选项并点击");
    await aiWaitFor("页面中显示了一个名为 'Area'的条目", { timeoutMs: 10000 });
    await aiTap("点击Area选项");
    
    await aiWaitFor("页面中显示了'Balance'选项", { timeoutMs: 10000 });
    await expect(page).toHaveURL(/home/);
    await aiAssert("当前页面显示了一个名为'Balance Chart'的图表界面");
});

执行测试用例：

1
2
3

DOTENV_CONFIG_PATH=.env DOTENV_CONFIG_OVERRIDE=true \
NODE_OPTIONS="--require=dotenv/config" \
npx playwright test ./tests/example.spec.ts

生成后html在report中，打开可以看到效果：

callback

2.5. 使用 YAML 格式的自动化脚本

在大多数情况下，开发者编写自动化脚本只是为了执行一些简单流程，比如检查某些内容是否出现，或者验证某个关键用户路径是否可用。此时维护一个大型测试项目会显得毫无必要。

Midscene 提供了一种基于 .yaml 文件的自动化测试方法，这有助于你专注于编写流程，而不是测试框架。

这里有一个示例，通过阅读它的内容，可以理解了它的工作原理：

web:
  url: https://www.bing.com

tasks:
  - name: 搜索天气
    flow:
      - ai: 搜索 "今日天气"
      - sleep: 3000

  - name: 检查结果
    flow:
      - aiAssert: 结果中展示了天气信息

2.5.1. 安装依赖

1	npm i @midscene/cli --save-dev

2.5.2. 运行脚本

midscene ./bing-search.yaml

# 或者如果你在项目中安装了midscene
npx midscene ./bing-search.yaml

# 使用通配符模式运行所有匹配的脚本
midscene './scripts/**/*.yaml'

# 或者使用 --files 参数来指定文件顺序，并行执行
midscene --files ./login.yaml ./buy/*.yaml ./checkout.yaml

# 以 4 个并发数运行所有脚本，并在任一文件出错时继续
midscene --files './scripts/**/*.yaml' --concurrent 4 --continue-on-error

通过当前的这些方案，基本可以代替人工的走查，节约了大量的人力成本。但这个方案中仍然有很多可以改进的地方，比如编写和调试prompt的时间似乎也并不少，运行的时间较长，会产生幻觉等问题，后面进行深入研究后再与大家分享。

3. 参考资料

https://midscenejs.com/zh/