告别元素定位！我用 Midscene.js 和 AI，几句话搞定了 Web 与 App 的 UI 自动化测试

你是否也曾深陷在繁琐的 UI 自动化脚本编写中？每天为了找到一个动态变化的元素 ID 而抓狂，为了维护一长串脆弱的定位器而心力交瘁？如果说，有一种方法，能让你像和人聊天一样，用几句大白话就完成这些自动化步骤，你会不会觉得是天方譚？
今天，我们就来浅尝一下这款名为 Midscene.js 的 AI 自动化神器。它能将自然语言直接转化为可执行的测试指令，让你彻底从元素定位的泥潭中解放出来。

一、浏览器快速体验

1. 安装 Midscene.js 插件
   首先，在浏览器中安装 Midscene.js 插件。
   

2. 配置三要素
   接下来，需要配置大模型服务地址、大模型名称以及你自己的大模型 API-KEY。
   

3. 开始尝鲜
   配置完成后，就可以开始体验了。以下是使用自然语言描述测试步骤的截图：
   自然语言描述测试步骤：
   

Midscene 识别并执行：Midscene.js 会将你的自然语言指令识别成机器语言并执行。

生成测试报告：执行完毕后，会生成一个 HTML 格式的测试报告，并记录了详细的执行过程。

至此，使用 Midscene.js 扩展的快速体验就结束了。接下来，我们看看 Midscene.js 如何支持 web 和 Android 的 UI 自动化。
二、WEB UI 自动化和 Android UI 自动化
2.1 本地环境配置准备
安装 Node.js：
确保你已经成功安装了 Node.js。可以通过以下命令查看版本：
Generated bash

npm --version
node --version

安装 Midscene 命令行工具：
全局安装或在项目中安装 Midscene 命令行工具。

# 全局安装
npm i -g @midscene/cli

# 项目中安装
npm i @midscene/cli --save-dev

安装成功后，可以通过以下命令查看版本：

midscene --version

配置环境变量：
将 OPENAI_BASE_URL、MIDSCENE_MODEL_NAME、OPENAI_API_KEY 添加到环境变量中。

2.2 web UI 自动化体验过程
Midscene.js 支持 yaml 和 JS 格式的脚本。[4] 这里以 yaml 格式为例，展示其低代码和自然语言实现 UI 自动化的能力。

• 创建 yaml 脚本： 创建一个空的 test.yaml 文件，并编写以下测试步骤：
• 

web:
  url: https://www.baidu.com # 要测试的网址地址
tasks:
  - name: 搜索小红书
    flow:
      - ai: 搜索“小红书”
      - ai: 点击“百度一下”按钮
      - sleep: 3000
  - name: 检查结果
    flow:
      - aiAssert: 有小红书的官方网址

运行脚本：
使用命令 midscene test.yaml 运行脚本。运行后，会在当前目录下生成一个 midscene_run 文件夹，其中包含了运行日志和生成的报告。

查看结果：
在 midscene_run/report 目录下可以找到生成的 HTML 报告，点击即可查看用例执行过程。


2.3 Android app UI 自动化体验
本地环境准备：

1. 安装 Android SDK：并将其路径添加到环境变量 ANDROID_HOME 中。
   

2. 准备其他工具：确保已安装上述 web UI 自动化体验中提到的所有工具。

2.3.1 Yaml 格式演示
以 某个app的登录–》签到流程为例：
编写脚本 (login.yaml)：

android:
  deviceId: "3443348804001VS" # 设备ID, 可通过adb devices命令获取
  launch: "your_app_name"
tasks:
  - name: 登录流程
    flow:
      - aiAction: 启动xxx应用
      - aiWaitFor: 出现“通过手机号登录”按钮
      - aiAction: 点击“通过手机号登录”按钮
      - aiWaitFor: 登录页面出现
      - aiAction: 在第一个输入框中输入2024023181
      - aiAction: 在第二个输入框中输入9527
      - sleep: 5000
      - aiAssert: 登录页面不再展示
  - name: 签到流程
    flow:
      - #1. 关闭开通PRO弹窗（如有）
      - aiAction: 如果出现的是开通PRO弹窗, 而非“每日奖励”的签到弹窗, 则点击右上角“x”按钮关闭
      - aiAction: 如果没有“开通PRO”弹窗, 则跳过此步骤
      - #2. 处理每日奖励弹窗
      - aiAction: 如果出现“每日奖励”弹窗, 观察“领取”按钮是否可点击, 如果没有“每日奖励”弹窗, 则跳过此步骤和后面一个步骤
      - aiAction: 如果领取按钮可点击, 则点击领取按钮, 如果领取按钮不可点击, 则跳过此步骤
      - aiAction: 循环检测页面中间是否还有其他弹窗, 如果有, 则点击右上角“x”按钮或退出按钮或页面任意空白位置关闭这些弹窗
      - #4. 最终断言
      - aiAssert: 不再有任意弹窗

连接设备并运行：
将你的安卓设备连接到电脑，然后运行 midscene login.yaml。

2.3.2 JavaScript 脚本

○创建步骤：
■创一个新的文件夹
■创一个新的ts文件
■初始化该项目：npm init -y，你会看到项目文件夹下生成了package.json
■

■还需要为此项目安装@midscene/android库，因此还需要执行命令：
■ npm install @midscene/android，安装成功后可以看到项目下又多了点东西：

编写脚本 (login.ts)：
可以直接使用自然语言描述测试步骤。

■运行：使用命令：npx tsx login.ts
■查看结果：同样也会在文件夹下生成新的HTML报告，可查看运行过程
○举手：这样的JS有点儿丑耶，不好看，也不好调试，想写结构化的代码，对于代码能力较为薄弱的QA小同学来说有点儿苛刻了，咋整？
○很简单，借助Cursor！让Cursor帮我把这一堆的测试步骤转成结构化代码，且要调用Midscne的API，如下图：

```javascript
import { AndroidAgent, AndroidDevice, getConnectedDevices } from '@midscene/android';
import 'dotenv/config';

const main = async () => {
    const devices = await getConnectedDevices();
    const page = new AndroidDevice(devices[0].udid);
    const agent = new AndroidAgent(page);

    await page.connect();

    // 测试步骤
    await agent.aiAction(`
        1、启动名为ai.mate.app的应用
        2、出现“通过手机号登录”按钮
        3、点击“通过手机号登录”按钮
        4、等待登录页面出现
        5、在第一个输入框中输入2024023182
        6、在第二个输入框中输入9527
        7、等待5秒后,断言登录页面不再展示,说明登录成功
        8、如果出现的是开通PRO弹窗,而非“每日奖励”的签到弹窗,则点击右上角“x”按钮关闭
        9、如果没有“开通PRO”弹窗,则跳过此步骤
        10、如果出现“每日奖励”弹窗,观察“领取”按钮是否可点击,如果没有“每日奖励”弹窗,则跳过此步骤和后面一个步骤
        11、如果领取按钮可点击,则点击领取按钮,如果领取按钮不可点击,则跳过此步骤
        12、循环检测页面中间是否还有其他弹窗,如果有,则点击右上角“x”按钮或退出按钮或页面任意空白位置关闭这些弹窗
        13、断言不再有任何弹窗存在,说明弹窗处理完成了
    `);
};

●这样一来，代码就变成了这样：

就显得专业多了，而且需要的时候还可以通过改代码的方式来调试干预，否则过于智能也未必是件好事~

三、总结
优点
自然语言驱动：不再受制于繁琐的元素定位，通过自然语言即可描述测试步骤，编写脚本非常容易。[2]
高效率：两三句自然语言就可以替代原来冗长的脚本代码。
缺点
可控性：过于智能有时反而不利于干预和预判，使用 JS 编写可能会有更好的控制。
复杂场景处理：对于需要使用 continue、break 等逻辑的复杂场景，自然语言描述会显得力不从心，需要不断优化用词，否则脚本可能会失败。[7]
成本：试用期过后，API-KEY 需要付费。