一、概述

Midscene.js是一个开源的基于多模态大型语言模型的UI自动化测试工具，由字节的web-infra团队开发。它能够智能地“解析”用户界面并自动执行所需操作，从而简化端到端（e2e）测试流程。

二、快速体验
1. 浏览器插件安装

Midscene提供了Chrome浏览器插件，可以在Chrome拓展商店找到并安装。安装后，需配置插件环境，包括选择并配置大模型API。由于OpenAI已不向我国提供服务，可以选择其他兼容的模型服务，如阿里云的qwen-vl-max-latest模型。

2. 核心功能
交互‌：使用.ai或.aiAction方法描述步骤并执行交互。在Action栏输入自然语言指令。
提取‌：使用.aiQuery从UI中“理解”并提取数据，返回值是JSON格式。在Query栏输入想提取的信息。
断言‌：使用.aiAssert执行断言。在Assert栏输入需要执行的断言。
3. 运行报告

Midscene运行完毕后会生成可视化报告，包括AI的思考过程、动画回放、每一步的参数和输出信息。报告中还集成了Playground，可重新运行Prompt并调试。

三、Yaml自动化脚本使用
1. 环境配置

配置大模型API的环境变量，方法因操作系统而异。Linux系统使用export命令，Windows系统可在系统属性、命令行（cmd）或PowerShell中配置。若使用非OpenAI的API，如阿里云的qwen-vl-max-latest模型，需确保配置正确。

2. 安装Midscene CLI

全局或项目中安装@midscene/cli：

bash
Copy Code
npm i -g @midscene/cli
# 或
npm i @midscene/cli --save-dev

3. 编写Yaml脚本

Yaml脚本定义了测试任务的基本信息和执行步骤。例如：

yaml
Copy Code
target:
  url: https://www.bing.com
tasks:
  - name: 搜索天气
    flow:
      - ai: 搜索 "今日天气"
      - sleep: 3000
      - aiAssert: 结果显示天气信息

4. 运行Yaml脚本

在命令行中运行脚本：

bash
Copy Code
midscene ./bing-search.yaml
# 或
npx midscene ./bing-search.yaml

运行结果将存储在项目下的midscene_run/report文件中。

四、桥接模式（Bridge Mode）
1. 安装依赖

桥接模式需安装@midscene/web和tsx依赖：

bash
Copy Code
npm install @midscene/web tsx --save-dev

2. TypeScript脚本编写

使用TypeScript脚本控制桌面版本的谷歌浏览器。需创建.env文件配置模型服务，并在脚本中导入dotenv模块加载环境变量。示例脚本如下：

typescript
Copy Code
import { AgentOverChromeBridge } from "@midscene/web/bridge-mode";
import * as dotenv from 'dotenv';
dotenv.config();

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

(async () => {
  const agent = new AgentOverChromeBridge();
  await agent.connectNewTabWithUrl("https://www.bing.com");
  await agent.ai('type "AI 101" and hit Enter');
  await sleep(3000);
  await agent.aiAssert("there are some search results");
  await agent.destroy();
})();

3. 运行脚本

运行TypeScript脚本：

bash
Copy Code
tsx demo-new-tab.ts

确保Midscene插件的桥接模式已打开。

在Yaml自动化脚本中也可使用桥接模式，配置target中的bridgeMode属性。

五、Puppeteer集成使用
1. 安装依赖

安装@midscene/web、puppeteer和tsx依赖：

bash
Copy Code
npm install @midscene/web puppeteer tsx --save-dev

2. 编写TypeScript脚本

使用Puppeteer控制Chrome浏览器，并集成Midscene进行自动化测试。示例脚本如下：

typescript
Copy Code
import puppeteer from "puppeteer";
import { PuppeteerAgent } from "@midscene/web/puppeteer";
import * as dotenv from 'dotenv';
dotenv.config();

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  await page.goto("https://www.ebay.com");
  await sleep(5000);

  const mid = new PuppeteerAgent(page);
  await mid.aiAction('在搜索框输入 "Headphones" ，敲回车');
  await sleep(5000);
  const items = await mid.aiQuery('{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格');
  console.log("耳机商品信息", items);
  await mid.aiAssert("界面左侧有类目筛选功能");

  await browser.close();
})();

3. 运行脚本

运行TypeScript脚本：

bash
Copy Code
npx tsx demo.ts

六、结语

Midscene是一款方便的AI+UI自动化测试工具，适用于多种自动化测试场景。更多功能和使用教程可参考官方文档：Midscene官方文档。