UI自动化测试的革新，新一代AI工具MidScene.js实测！

前言

AI已经越来越深入地走入我们的实际工作，在软件测试领域，和AI相关的新测试工具、方法也层出不穷。在之前我们介绍过结合 mcp server 实现 AI 驱动测试的案例，本文我们将介绍一个近期崭露头角的国产AI测试工具 Midscene.js

Midscene.js简介

MidScene.js 是由字节跳动 web-infra 团队推出的一个开源 ai 自动化测试工具，基于多模态大模型，通过针对页面的智能视觉解析来理解我们的自然语言指令，并进一步完成自动化操作。可以显著降低编写自动化测试脚本的复杂性，并更好适应页面结构和元素的变化，使自动化测试脚本的稳定性也有较大提升。

官网地址： https://midscenejs.com/

Midscene工作原理

和之前我们介绍 mcp server 时，利用通用大模型来理解页面并调用本地工具能力进行扩展不同，Midscene使用多模态大模型如 ChatGPT-4o，qwen-vl, 字节的 UI-TARS等，也就是能支持视觉输入的大模型来理解页面，更接近我们进行实际功能测试的场景。

MidScene会首先获取页面当前截图和具体的页面结构信息，再和用户指令一起提交给大模型，由大模型判断出需要操作的页面控件位置，并进行下一步动作。

以在待办页面任务框中输入 “今天学习Playwright”为例：

MidScene的内部操作大致如下：

1. 获取用户指令 “在任务框输入 学习Playwright，按回车键”
2. MidScene截图，获取页面整体元素结构
3. 提交大模型完成页面特征提取
4. 获取大模型分析结果，确定下一步操作类型(Tap)和控件的具体位置(坐标)
5. 规划下一步操作
6. 完成执行

大模型的选择

从以上Midscene的原理分析，MidScene 主要依赖多模态大模型的如下能力

1. 理解截图和 规划 操作步骤的能力。
2. 给出指定元素的坐标信息（Visual Grounding）的能力。

支持以上能力的大模型，目前官网提供的支持包括如下几种：

• OPENAI GPT-4o
• 阿里 Qwen-2.5-VL
• 字节 UI-TARS
• 字节火山引擎 Doubao-1.5-thinking-vision-pro
• Google Gemini-2.5-Pro

从工作原理上，需要提供给大模型包括截图和页面结构等信息，对大模型的Token消耗还是比较可观。从官方的评估，每个操作通常都要至少数千Token的消耗。而其中性价比较好的大模型，官方推荐的QWen-VL。

Chrome插件方式使用

零代码的Chrome插件方式，可以帮助我们快速理解MidScene的应用。

通过Chrome的插件商店可以直接安装 Midscene插件

配置大模型

启用插件后，需要配置使用的大模型。这里我们使用对token消耗比较少的阿里千问多模态模型qwen-vl-max-latest, 通过阿里云百炼平台申请对应的API Key即可，现在申请还赠送100W Token额度。

完成申请后，在插件的模型配置界面中配置对应的大模型参数，qwen模型需要配置以下四个参数

OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1" 
OPENAI_API_KEY="sk- your API KEY"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1 

操作浏览器

接下来就可以在插件界面中体验Midscene对浏览器的操控了，这里主要支持四种行为：

• Action：对应AI自动规划操作，Midscene会自动规划操作步骤并执行。更智能，但速度较慢，效果依赖大模型的质量。
• Query：直接从 UI 提取数据，并借助多模态 AI 的推理能力，实现智能提取
• Assert：通过自然语言描述一个断言条件，让 AI 判断该条件是否为真
• Tap：对应页面点击的即时操作，Midscene会直接执行，大模型只负责底层如元素定位等任务。效率更高，适合已确定要执行的操作时使用

我们可以用接近自然语言的AI提示词输入提示词指令，针对不同的行为模式，插件会驱动浏览器完成不同的操作，并反馈操作结果。

具体执行过程也可参见下方视频演示。

脚本集成

除了通过浏览器插件调用Midscene，更推荐的方法是通过测试框架的脚本集成Midscene能力。

通过脚本集成，同样需要配置相关模型调用参数，和插件中配置的相关变量值一样，只是需要将相关变量配置为系统环境变量

因为 Midscene 是基于JS的工具，这里的和测试框架集成，也是需要支持JS。这里以 Playwright 为例

安装

首先自然需要具备 Playwright 框架，进入项目目录，初始化并安装Playwright，然后安装Midscene

npm init playwright@latest
npm install @midscene/web --save-dev

playwright框架配置

在 playwright.config.ts 文件中配置框架本身的测试发现目录和测试脚本，加载环境变量以及浏览器类型，执行策略等基础配置