传统的UI自动化测试，通常分为元素定位、图像识别两大方向，脚本里需要去编写、维护大量的元素定位信息、图片信息。

而随着AI时代的到来，在研发们已经抛弃古法编程，全员Vibe Coding的情况下，如果测试人员依然需要手搓代码脚本，进行传统的自动化测试， 就如同在蒸汽机时代，还依然在使用马车来驱动！

AI时代理想中的UI自动化，应该是像和AI对话一样，不用写任何代码，我们只输出自然语言的描述。

比如脚本里面只需要自然语言描述：打开百度首页，输入关键字"AI测试"，执行搜索。然后AI就自动去执行相关的操作，并生成测试报告。

而字节开源的Midscene.js，就是一款能通过纯自然语言交互，来实现AI大模型驱动自动化测试的工具，并且Web端、移动端、桌面端都支持，能轻松驾驭端到端全流程测试。

一个常见的电商主流程测试示例：在移动端APP完成下单-》在Web端做订单数据流转-》回到移动端APP查看订单状态变化：

  • 如果使用传统的自动化测试，通常一个端就需要维护一套自动化测试框架，需要编写大量的自动化脚本代码。
  • 而如果使用Midscene来编写，只需要一套自动化测试框架，通过自然语言的步骤描述，就能完成整个端到端主流程的测试。

一、什么是Midscene

Midscene（又称 Midscene.js）是字节跳动Web Infra团队开源的、纯视觉驱动的AI UI自动化工具，核心是用自然语言操控界面，不靠 XPath/CSS 选择器，跨 Web / 移动端 / 桌面全平台。

传统 UI 自动化（如 Playwright、Appium）：

  • 依赖 DOM 结构 / 选择器（XPath、CSS）
  • 页面微调就导致脚本失效，维护成本高
  • 非技术人员难上手
  • Canvas、游戏画面、桌面应用难以自动化

Midscene：

  • 纯视觉，不依赖 DOM：只靠图像+ 视觉模型理解界面
  • 自然语言驱动：一句话完成点击、输入、验证
  • 界面变化不崩：元素位置 / 样式微调不影响脚本
  • 全平台统一：Web、Android、iOS、Windows/macOS/Linux 桌面应用都支持

优缺点

  • 优点：低代码 / 无代码、跨平台、抗界面变更、易上手
  • 缺点：依赖图像与大模型、执行速度略慢、有一定模型调用成本

二、Web AI自动化测试

2.1 安装Midscene Chrome插件

通过使用Midscene.js Chrome插件，你可以快速在任意网页上体验Midscene的主要功能，无需编写任何代码。

如果你可以直接访问Chrome扩展商店，那么可以直接安装Midscene扩展：
https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief

在这里插入图片描述
如果访问不了，那么国内网络可以百度搜索：midscene chrome插件下载，下载crx文件，然后通过chrome扩展程序安装：

在这里插入图片描述

安装好之后，打开插件，浏览器右侧会有midscene.js的Playground界面出来：

在这里插入图片描述
点击Playground的右上角齿轮设置按钮，粘贴你的 API Key 配置，配置LLM：

MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/coding/v3"
MIDSCENE_MODEL_API_KEY="your api key"
MIDSCENE_MODEL_NAME="Doubao-Seed-2.0-pro"
MIDSCENE_MODEL_FAMILY="doubao-seed"

我上面用的是字节火山方舟的大模型，如果你用的是其他的大模型，那么不同模型如何配置，可以参看官网文档，有详细的说明：https://midscenejs.com/zh/model-common-config.html

以上，配置就完成了，主要就是：下载插件+配置LLM。

2.2 Chrome插件自动化测试

接下来，就可以直接在插件聊天框里面，自然语言描述你要测试的内容，来测试AI自动化了。

比如你先打开百度首页，然后打开Midscene Chrome插件，插件对话框里输入：

搜索框输入：AI测试，点击“百度一下”按钮执行搜索

然后发送，就会看到Midscene会自动开始调用大模型，解析自然语言的测试内容，自动操控当前的浏览器tab页，执行测试，效果如下图：
在这里插入图片描述
执行完最后还会看到有一个执行过程的录像回放，可以快速查看整个执行的过程，非常方便。

2.3 如何脚本运行自动化测试

使用Chrome插件完成Playground测试，更多的是用于一次性的测试调试使用。如果想要将整个测试场景可复用，就创建对应的JavaScript脚本，以后每次运行脚本来达到可重复测试的目的。

下面我们以Windows电脑为例，选用集成到Playwright的方式，一步步来完成脚本文件的创建、运行：

2.3.1 安装依赖

我们可以在电脑D盘下新建一个目录：midscript，打开Windows的cmd窗口，到这个目录下，使用以下命令安装依赖：

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

npm是Node.js自带的包管理工具，如果你发现上面的命令不可用，需要先在你的电脑上安装Node.js，可以去中文官网安装：https://nodejs.org/zh-cn/
在这里插入图片描述
依赖安装完毕后，再分别使用下面的命令，安装Chrome浏览器驱动：

# 使用淘宝镜像，避免国内网络下载超时
set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright
# 安装Chrome浏览器驱动
npx playwright install chromium
2.3.2 创建脚本文件

依赖和驱动安装完毕后，下一步是在midscript目录下，创建.env文件，作为大模型调用的配置文件，文件里面填写大模型的配置项，比如：

MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_API_KEY="your api key"
MIDSCENE_MODEL_NAME="Doubao-Seed-2.0-pro"
MIDSCENE_MODEL_FAMILY="doubao-seed"

接下来就是写脚本文件的内容了，比如新建一个名称为：baidu-search.ts 的文件，在文件里编写脚本代码，示例如下：

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

// 休眠函数
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

Promise.resolve(
  (async () => {
    // 启动浏览器（可视化窗口，方便你看效果）
    const browser = await chromium.launch({
      headless: false,
      args: ['--no-sandbox'],
    });

    // 新建页面
    const page = await browser.newPage();
    await page.setViewportSize({ width: 1280, height: 720 });

    // 打开百度
    await page.goto('https://www.baidu.com');
    await sleep(2000);

    // 初始化官方标准 Agent
    const agent = new PlaywrightAgent(page);

    // ===================== 核心操作 =====================
    // 点击搜索框，输入AI测试
    await agent.aiTap('点击页面中的搜索框');
	await agent.aiInput('搜索框',{value:'AI测试'})
	await agent.aiTap('点击搜索按钮')


    // 等待结果
    await agent.aiWaitFor('页面显示搜索结果');

    // 验证成功
    await agent.aiAssert('搜索结果包含关键字"AI测试"');
	
	// 提取页面信息
	const resultTitle = await agent.aiQuery(
      '提取搜索结果中的标题名称：[{title: string}]',
    );
	
	console.log('搜索到的结果标题名称：', resultTitle);
	
	// 找到第一条数据点进去
	await agent.aiAct('搜索结果中点击第一条数据，查看详细信息');
    console.log('🎉 百度搜索执行成功！');

    // 关闭浏览器
    await browser.close();
  })(),
);
2.3.3 运行脚本文件

使用下面的命令运行这个脚本：

npx tsx baidu-search.ts

脚本执行结果：

在这里插入图片描述
执行完毕后，在D盘midscript目录下，midscene_run目录下，可以查看运行的log文件和report文件：

在这里插入图片描述
report报告内容如下图：

在这里插入图片描述

三、Android AI自动化测试

和Web AI自动化测试一样，我们依然是先安装Playground，先图形化操作验证一遍，然后再通过脚本的方式来运行。

3.1 安装Android Playground

CMD命令行，执行以下命令安装依赖：

npx --yes @midscene/android-playground

在这里插入图片描述

安装完毕后系统会自动打开Playground窗口页面：http://localhost:5800，点击 Playground 窗口中的齿轮设置按钮：

在这里插入图片描述
同样需要先粘贴你的 API Key 配置，配置LLM：

MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_API_KEY="your api key"
MIDSCENE_MODEL_NAME="Doubao-Seed-2.0-pro"
MIDSCENE_MODEL_FAMILY="doubao-seed"

试用playground: 打开QQ音乐，搜索歌曲：孤勇者：

在这里插入图片描述

AI操作过程录屏效果：
在这里插入图片描述

3.2 Android 脚本运行

同样，Playground跑通了之后，下一步就是做成可复用的JavaScript脚本。

3.2.1 安装依赖

D盘midscript目录，cmd到这个目录下，然后使用下面的命令安装依赖：

npm install @midscene/android dotenv --save-dev

在这里插入图片描述

3.2.2 创建脚本文件
import 'dotenv/config';
import {
  AndroidAgent,
  AndroidDevice,
  getConnectedDevices,
} from '@midscene/android';

// 休眠函数
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

Promise.resolve(
  (async () => {
    // 获取连接的PAD设备
    const devices = await getConnectedDevices();
    const device = new AndroidDevice(devices[0].udid);

    // AI上下文：中文配置，自动处理弹窗（权限、协议、登录页直接关闭/同意）
    const agent = new AndroidAgent(device, {
      aiActionContext: `
        如果出现权限申请、用户协议、位置授权、广告弹窗，直接点击允许/同意/关闭
        如果出现登录页面，直接关闭
      `,
    });

    // 连接PAD
    await device.connect();
    console.log('✅ 已成功连接安卓平板');

    // ===================== 全中文指令，极简易懂 =====================
    // 1. 打开QQ音乐
    await agent.aiAct('打开QQ音乐应用');
    await sleep(3000);

    // 2. 点击搜索框，输入孤勇者，执行搜索（核心指令，中文最稳）
    await agent.aiAct('点击搜索框，输入“孤勇者”，然后点击搜索');
    await sleep(3000);

    // 3. 等待搜索结果加载完成
    await agent.aiWaitFor('屏幕上显示出孤勇者的搜索结果');

    // 4. 查询歌曲信息（中文结构化输出）
    const songList = await agent.aiQuery(
      '提取页面上的歌曲名和歌手名，返回数组格式：[{songName: string, singer: string}]',
    );
    console.log('🎵 搜索到的歌曲：', songList);

    // 5. 验证结果存在
    await agent.aiAssert('页面上存在孤勇者相关的歌曲结果');

    console.log('🎉 脚本执行完毕！');
  })(),
);
3.2.3 运行脚本

使用下面的命令运行这个脚本：

npx tsx demo.ts

运行日志效果如下：

在这里插入图片描述

report报告效果如下：

在这里插入图片描述

四、常用API说明

在 Midscene 中，你可以选择使用自动规划（Auto Planning）或即时操作（Instant Action）两种方式来执行：

  • agent.ai() 是自动规划（Auto Planning）：Midscene 会自动规划操作步骤并执行。它更智能，更像流行的 AI Agent 风格，但可能较慢，且效果依赖于 AI 模型的质量。
  • agent.aiTap(), agent.aiHover(), agent.aiInput()等是即时操作（Instant Action）：Midscene 会直接执行指定的操作，而 AI 模型只负责底层任务，如定位元素等。这种接口形式更快、更可靠。当你完全确定自己想要执行的操作时，推荐使用这种接口形式。

两者也可以混合使用，比如我们上面的脚本里，对于打开QQ音乐APP的操作：有时候打开过程中会有广告加载，有时候没有广告加载，由于有没有广告是动态非固定的，这种时候让AI自主规划就比我们指定写死动作会更好，比如：

agent.aiAct('打开QQ音乐应用')

而对于像百度页面搜索文本框输入关键字搜索，这是一套固定的操作，不会有动态变化的地方，这种时候我们就用即时操作方式会更适合，比如：

agent.aiTap('点击页面中的搜索框')
4.1 API归类
4.1.1 执行操作类（让 AI 完成界面交互）

在这里插入图片描述

4.1.2 状态验证类（确保界面符合预期）

在这里插入图片描述

4.1.3 数据提取类（从界面获取信息）

在这里插入图片描述

4.1.4 辅助工具类（提升自动化效率）

在这里插入图片描述

4.2 常用API使用示例
4.2.1 aiAct：AI 自动规划多步任务（最核心）

作用：让 AI 理解自然语言描述的目标，自动规划并执行一系列操作，无需手动分步写点击 / 输入等细节。

写法与示例：

// 简单用法
await agent.aiAct('打开QQ音乐，搜索孤勇者并播放第一首歌');

// 带上下文的复杂用法（指定处理弹窗策略）
const agent = new AndroidAgent(device, {
  aiActionContext: `
    如果出现权限弹窗，点击允许
    如果出现登录页面，直接关闭
    优先选择免费歌曲播放
  `
});
await agent.aiAct('打开QQ音乐，搜索孤勇者并播放第一首免费歌曲');
4.2.2 aiWaitFor：智能等待（解决异步加载）

作用：持续检查界面状态，直到条件满足或超时，避免硬编码 sleep 导致的不稳定。

写法与示例：

// 基本用法
await agent.aiWaitFor('搜索结果页面已完全加载');

// 自定义超时和检查间隔
await agent.aiWaitFor(
  '购物车显示至少3件商品',
  { timeoutMs: 15000, checkIntervalMs: 2000 } // 15秒超时，每2秒检查一次
);

// 结合图片提示（复杂界面识别）
await agent.aiWaitFor({
  text: '支付成功页面已显示',
  image: './expected-success-screen.png' // 参考图片路径
});
4.2.3 aiQuery：结构化数据提取（测试数据收集）

作用：从界面提取符合指定结构的数据，支持数组、对象等复杂类型，AI 自动识别对应元素。

写法与示例：

// 提取商品列表（带类型定义）
const headphones = await agent.aiQuery(`
  {
    itemTitle: string,    // 商品标题
    price: Number,        // 价格（数字类型）
    rating: Number        // 评分（可选）
  }[], 请找出页面上所有耳机产品及对应价格和评分
`);
console.log('耳机产品列表:', headphones);

// 提取单个对象
const userProfile = await agent.aiQuery(`
  {
    name: string,
    email: string,
    membershipLevel: string
  }, 获取当前用户的个人资料信息
`);
4.2.4.aiAssert：断言验证（测试核心）

作用：验证界面状态是否符合预期，不满足时抛出错误，中断测试流程，确保测试结果可预期。

写法与示例：

// 基本断言
await agent.aiAssert('页面顶部显示"搜索结果"标题');

// 带自定义错误信息
await agent.aiAssert(
  '购物车总金额为99.99元',
  '购物车金额计算错误' // 断言失败时显示的错误信息
);

// 数值比较断言
await agent.aiAssert('商品价格低于500元');

// 否定断言（检查不存在的元素）
await agent.aiAssert('页面没有显示错误提示框');

以上就是本文的全部内容，如果对你有帮助，麻烦点赞+收藏+关注，一键三连，你的支持就是作者更新最大的动力！欢迎关注下方我的公众号：程序员杨叔，各类文章都会第一时间在上面发布，持续分享各类测试开发知识干货！

# 人工智能
Logo
乐奇 Rokid 开放社区

更多推荐

cover

AR巡检哪家好，和浪潮比哪家方案更成熟

avatar 乐奇 Rokid 开放社区
cover

AR巡检哪家好

avatar 乐奇 Rokid 开放社区
cover

瑞丰宝丽在AR巡检领域排名

avatar 乐奇 Rokid 开放社区