欢迎光临我的个人博客查看最新文章：river's blog

一、Midscene.js简介

1.1 什么是Midscene.js？

Midscene.js是一款基于多模态大语言模型（LLM）的AI驱动UI自动化测试框架，由字节跳动Web Infra团队开源。它的核心理念是"自然语言即测试脚本"，通过AI技术让测试人员能够用自然语言描述测试步骤，而无需编写复杂的代码。

• 官方文档：https://midscenejs.com
• GitHub仓库：GitHub - web-infra-dev/midscene

传统方式：await page.click('#login-button')

Midscene.js：点击登录按钮

1.2 核心特性一览

特性	传统工具	Midscene.js
脚本编写	需要编写复杂的选择器和代码	自然语言描述即可
维护成本	页面变化时需要大量更新	AI自适应页面变化
学习曲线	需要编程基础	零代码，业务人员可用
断言方式	需要编写复杂的断言逻辑	自然语言断言
数据提取	需要解析DOM结构	JSON格式直接返回

二、安装与配置

2.1 快速体验方式

Chrome扩展安装

1. 访问 Chrome Web Store 搜索"Midscene.js"
2. 点击"添加至Chrome"完成安装
3. 安装完成后，在浏览器扩展程序中打开Midscene.js面板

Chrome扩展离线安装

方法一：通过GitHub Release下载

1. 访问 Midscene.js GitHub Releases
2. 下载最新版本的chrome-extension.zip文件
3. 解压到本地目录，例如：~/midscene-extension/
4. 打开Chrome浏览器，访问 chrome://extensions/
5. 开启右上角的"开发者模式"
6. 点击"加载已解压的扩展程序"
7. 选择解压后的扩展目录
8. 确认扩展已启用，图标显示在工具栏

打开插件，如下图所示：

方法二：手动构建扩展

# 克隆项目 
git clone https://github.com/web-infra-dev/midscene.git 
cd midscene 
# 安装依赖 
npm install 

# 构建Chrome扩展 
npm run build:extension 
# 构建完成后，扩展位于 dist/chrome-extension/

方法三：通过npm包获取

# 全局安装后获取扩展文件
npm install -g @midscene/cli 

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

2.2 环境配置

配置OpenAI API密钥

创建.env文件：

OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1" 
OPENAI_API_KEY="api key" 
MIDSCENE_MODEL_NAME="qwen2.5-vl-72b-instruct"

大模型api key 可以到 阿里云百炼申请：
https://bailian.console.aliyun.com/?tab=model#/api-key

三、测试运行

3.1 Chrome插件运行

按照2.2的配置，点击右上角的设置按钮，填写模型的环境配置

配置好后，我们先打开一个网页如：百度， 打开Midscene.js。

输入Action：

 await mid.ai('在搜索框输入稀土掘金，然后回车执行搜索');

然后就能看到执行过程及报告

3.2 控制台运行

编写 search.yaml 任务脚本

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

tasks:
  - name: 搜索掘金网站
    flow:
      - ai: 搜索 "稀土掘金" 网站，并打开
      - sleep: 5000

  - name: 检查结果
    flow:
      - aiAssert: 结果中展示掘金首页

执行脚本（已进行2.2环境配置）

midscene search.yaml

运行结果：

打开控制台中的html报告：
file:///Users/river106/AI/midscene/midscene_run/report/search_juejin-2025-08-03_21-34-23-6snvq22l.html

展示执行过程：

默认情况下，脚本会在无界面模式下运行。

如果你想运行在有界面模式下，你可以使用--headed 选项。此外，如果你想在脚本运行结束后保持浏览器窗口打开，你可以使用 --keep-window 选项。–keep-window 选项会自动开启 --headed 模式。

headed 模式会消耗更多资源，所以建议你仅在本地使用。

四、同类产品对比分析

4.1 功能对比

特性	Midscene.js	Playwright	Cypress	Puppeteer	Selenium
AI驱动	✅ 原生支持	❌ 无	❌ 无	❌ 无	❌ 无
自然语言	✅ 支持	❌ 不支持	❌ 不支持	❌ 不支持	❌ 不支持
学习曲线	极低	中等	中等	中等	陡峭
维护成本	极低	中等	中等	中等	极高
执行速度	中等	快	快	快	中等
跨浏览器	支持	支持	支持	Chrome为主	支持
可视化调试	内置	支持	支持	有限	❌ 无
社区生态	新兴	成熟	成熟	成熟	非常成熟

4.2 使用场景对比

4.3 选择建议

• 选择Midscene.js的场景
  • 快速原型开发
  • 业务人员参与测试
  • 页面结构频繁变化
  • 需要快速验证想法
• 选择传统工具的场景
  • 需要极致性能
  • 复杂业务逻辑验证
  • 已有成熟测试体系
  • 需要精细控制

文章同步发布在我的头条号：Midscene.js：AI驱动的UI自动化测试框架