Hengshuai's blog

Appearance

Midscene.js - AI 驱动的UI自动化测试 ​

最近字节跳动开源的全新的 midscene.js UI 自动化测试框架火爆了，midscene基于多模态AI推理能力使得UI的自动化测试变得更加便捷

读者应该都知道UI自动化测试为了模拟真实的用户操作，比如往期文章中讲的cypress，通常需要通过选择器如class、id选择页面的元素后，然后做一些点击、输入类的操作。然而当页面元素变得极其庞大和复杂时，元素的选择将会变得越来越麻烦和不可控，维护也越来越麻烦

midscene.js借助AI推理能力开创UI测试新赛道，让这一切都变得更简单

核心功能 ​

和其他的自动化测试框架类似，midscene也提供了和其他框架相似的api，其中最关键的为以下几种：

  • aiAction：执行交互行为，这个方法允许你通过自然语言描述一系列 UI 操作步骤。Midscene 会自动规划这些步骤并执行。比如：在搜索框中输入 "DeepSeek"，然后点击搜索按钮

  • aiQuery：使用此方法，你可以直接从 UI 提取数据，并借助多模态 AI 的推理能力，实现智能提取。只需通过描述定义期望格式（如字符串、数字、JSON、数组等），Midscene 即返回相应结果

  • aiAssert：执行断言，使用此方法你可以通过自然语言描述一个断言条件，让 AI 判断该条件是否为真

除此之外还有很多其他的API，如：aiTap点击某个元素、aiInput输入文本等等，都是一些辅助性的API，丰富自动化测试的流程

从Chrome插件快速上手 ​

为了能快速的体验midscene的能力，官方提供了Chrome插件快速上手，只需访问Midscene.js插件地址安装后打开即可

通过使用 Midscene.js Chrome 插件，你可以快速在任意网页上体验 Midscene 的主要功能，而无需编写任何代码

启动扩展，通过粘贴 Key=Value 格式配置插件环境：

sh
OPENAI_API_KEY="sk-replace-by-your-own"

配置完成后，你可以立即开始使用 Midscene。它一共有三个关键操作 Tab：

  • Action: 与网页进行交互，如 "在搜索框中输入 Midscene" 或 "点击登录按钮"
  • Query: 从界面中提取 JSON 数据，如 "提取页面中的用户 ID，返回 { id: string }"
  • Assert: 执行断言，如 "页面标题是 Midscene"

这里我是了下在搜索引擎中搜索hengshuai's blog，然后让其点击第一条结果：

上图中可以看到全程没有任何具体的代码，仅仅通过自然语言就完成了一系列行为

使用YAML自动化配置 ​

Midscene 提供了一种基于 .yaml 文件的自动化测试方法，这有助于你专注于脚本本身，任何团队内的成员都可以编写自动化脚本，而无需学习任何 API

yaml
target:
  url: https://www.bing.com

tasks:
  - name: 搜索天气
    flow:
      - ai: 搜索 "今日天气"
      - sleep: 3000

  - name: 检查结果
    flow:
      - aiAssert: 结果中展示了天气信息

配置环境变量：

sh
OPENAI_API_KEY="sk-xxxxxxx"
# 其他...

安装@midscene/cli

sh
npm install @midscene/cli -g

执行脚本：

sh
npx midscene ./test.yaml

除此之外还有一些其他的脚本参数，读者可以参考YAML介绍文档

集成到 Puppeteer ​

使用Puppeteer的开发者应该都知道Puppeteer是一个Node.js的库，它允许你使用JavaScript控制浏览器，以编程方式执行网络请求，处理DOM，并捕获屏幕截图和PDF

midscene.js也提供了一种基于 Puppeteer 的集成方式，允许你使用 Puppeteer 的 API 来编写自动化测试脚本，并使用 Midscene 的 API 来执行自动化测试

安装依赖：

sh
npm install @midscene/web puppeteer tsx --save-dev

同样的也要配置必要的环境变量：

sh
# 更新为你自己的 Key
export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
# 其他...

编写Nodejs脚本：

ts
import puppeteer from "puppeteer";
import { PuppeteerAgent } from "@midscene/web/puppeteer";

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
  (async () => {
    const browser = await puppeteer.launch({
      headless: false, // here we use headed mode to help debug
    });

    const page = await browser.newPage();
    await page.setViewport({
      width: 1280,
      height: 800,
      deviceScaleFactor: 1,
    });

    await page.goto("https://www.ebay.com");
    await sleep(5000);

    // 👀 初始化 Midscene agent 
    const agent = new PuppeteerAgent(page);

    // 👀 执行搜索
    // 注：尽管这是一个英文页面，你也可以用中文指令控制它
    await agent.aiAction('在搜索框输入 "Headphones" ，敲回车');
    await sleep(5000);

    // 👀 理解页面，提取数据
    const items = await agent.aiQuery(
      '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格',
    );
    console.log("耳机商品信息", items);

    // 👀 用 AI 断言
    await agent.aiAssert("界面左侧有类目筛选功能");

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

运行脚本：

sh
npx tsx ./test.ts

集成到 Playwright ​

Playwright.js 是由微软开发的一个开源端到端自动化测试框架，主要用于对网络应用程序进行端到端测试（end-to-end test）和网页抓取

安装依赖：

sh
npm install @midscene/web --save-dev

更新 playwright.config.ts：

ts
export default defineConfig({
  testDir: './e2e',
+ timeout: 90 * 1000,
+ reporter: [["list"], ["@midscene/web/playwright-report"]],
});

扩展 test 实例：

ts
import { test as base } from '@playwright/test';
import type { PlayWrightAiFixtureType } from '@midscene/web/playwright';
import { PlaywrightAiFixture } from '@midscene/web/playwright';

export const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture());

编写测试脚本：

ts
import { expect } from "@playwright/test";
import { test } from "./fixture";

test.beforeEach(async ({ page }) => {
  page.setViewportSize({ width: 400, height: 905 });
  await page.goto("https://www.ebay.com");
  await page.waitForLoadState("networkidle");
});

test("search headphone on ebay", async ({ 
  ai, 
  aiQuery, 
  aiAssert,
  aiInput,
  aiTap,
  aiScroll 
}) => {
  // 使用 aiInput 输入搜索关键词
  await aiInput('Headphones', '搜索框');
  
  // 使用 aiTap 点击搜索按钮
  await aiTap('搜索按钮');
  
  // 等待搜索结果加载
  await aiWaitFor('搜索结果列表已加载', { timeoutMs: 5000 });
  
  // 使用 aiScroll 滚动到页面底部
  await aiScroll(
    { 
      direction: 'down',
      scrollType: 'untilBottom'
    },
    '搜索结果列表'
  );
  
  // 使用 aiQuery 获取商品信息
  const items = await aiQuery<Array<{title: string, price: number}>>(
    '获取搜索结果中的商品标题和价格'
  );
  
  console.log("headphones in stock", items);
  expect(items?.length).toBeGreaterThan(0);
  
  // 使用 aiAssert 验证筛选功能
  await aiAssert("界面左侧有类目筛选功能");
});

运行测试脚本：

sh
npx playwright test ./e2e/ebay-search.spec.ts

模型对比 ​

GPT-4o：midscene默认使用GPT-4o为默认的推理模型，成本比较高。Midscene 需要将截图和 DOM 树一起发送给模型，这会导致 token 消耗较高。例如，在 1280x800 分辨率下，eBay 首页需要 6000 个 token 输入，搜索结果页面则需要 9000 个 token 输入。因此，它的成本会显著高于其他模型

千问 Qwen-2.5-VL 模型:Qwen-2.5-VL 支持视觉定位，不需要发送 DOM 树给模型。和 gpt-4o 相比，它可以节省 30% 到 50% 的 token 数量。在阿里云官方部署版本中，费用消耗可以下降 80% 以上；小图标识别能力较差：和 gpt-4o 一样，它可能无法准确定位小图标。断言能力一般：在某些情况下，Qwen-2.5-VL 的断言能力可能不如 gpt-4o

其他模型:

  • claude-3-opus-20240229
  • gemini-1.5-pro
  • doubao-vision-pro-32k（豆包）

Midscene测试意义 ​

  • 降低测试门槛与范式迁移
    • 非技术人员（如产品经理）可通过自然语言参与测试设计，团队协作效率提升40%
    • 可视化报告与调试Playground简化问题定位，减少50%的调试时间
    • 重构测试团队角色，从“脚本工人”转向质量策略师与风险预测师
  • 突破传统UI自动化测试的局限性
    • 用户通过自然语言描述操作（如“点击登录按钮，输入用户名”），无需编写选择器代码，降低维护成本90%
    • 结合视觉截图、DOM结构和语义分析，实现跨模态元素定位（准确率98.7%）

感谢支持

再次感谢您的支持，您的支持将鼓励我继续创作。文章通常首发公众号，可以关注我的公众号，获取最新优质文章；同时如果你有 珠宝首饰之类 的需求，也可以微信扫码光临小店，种类多多欢迎来选👏🏻
大卫talk
 
aphrodite-u

若您在阅读过程中发现一些错误：如语句不通、文字、逻辑等错误，可以在评论区指出，我会及时调整修改，感谢您的阅读。同时您觉得这篇文章对您有帮助的话，可以打赏作者一笔作为鼓励，金额不限，感谢支持🤝。
支付宝捐赠   微信支付捐赠

Released under the MIT License.

Copyright © 2018-2025 HengShuai