告别元素定位！我用 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 --versionnode --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，如下图：

```javascriptimport { 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 需要付费。