基于AI人工智能UI自动化测试工具：Midscene

news/2025/2/26 23:25:21

前言

随着互联网技术的飞速发展，Web应用越来越普及，前端页面也越来越复杂。为了确保产品质量，UI自动化测试成为了开发过程中不可或缺的一环。然而，传统的UI自动化测试工具往往存在学习成本高、维护困难等问题。特别是UI 自动化脚本里往往到处都是选择器，比如 #ids、data-test、.selectors。在需要重构的时候，这可能会让人感到非常头疼。

今天，我们将为您推荐一款基于AI人工智能的开源UI自动化测试工具——Midscene，让您轻松应对UI自动化测试挑战。


1、Midscene介绍

Midscene.js 是一款由 web-infra-dev开发的开源 AI 驱动的自动化 SDK。其核心功能是能够让测试人员使用自然语言来控制页面、执行断言以及提取 JSON 格式的数据。这种以自然语言为交互方式的设计，极大地降低了自动化测试的门槛，即使是非专业编程人员也能够较为轻松地开展 UI 自动化测试工作。

Midscene.js 采用了多模态大语言模型（LLM），能够直观地“理解”你的用户界面并执行必要的操作。你只需描述交互步骤或期望的数据格式，AI 就能为你完成任务。

默认选择的是 OpenAI GPT-4o 作为模型，你也可以自定义为其他多模态模型。


2、核心特性

1、自然语言交互：

  • Midscene.js允许用户通过自然语言描述测试步骤，工具将自动规划并控制用户界面。这种交互方式大大降低了编写测试脚本的难度，提高了测试脚本的可读性和可维护性。

2、理解UI，JSON格式回答：

  • 用户只需提供所需数据的格式提示，Midscene.js即可返回以JSON格式组织的预期响应。这使得数据提取和验证过程更加直观和高效。

3、直观断言：

  • 用户可以用自然语言进行断言，Midscene.js将基于AI理解执行这些断言。这减少了编写复杂断言逻辑的需求，提高了测试的准确性和可靠性。

4、无需定制训练的LLM：

  • Midscene.js支持使用公共的多模态LLM（如GPT-4等），无需进行任何定制训练。这降低了使用门槛，使得更多开发者能够轻松上手这款工具。

5、可视化报告：

  • Midscene.js提供了可视化报告文件，用户可以轻松理解和调试整个测试过程。这有助于快速定位问题，提高测试效率。


3、技术实现与架构

1、语言构成

Midscene 的代码主要由 HTML、TypeScript、MDX、Less和 JavaScript等语言编写。这种多语言的组合构建了一个功能丰富且灵活的测试工具框架。其中，TypeScript 的使用为代码提供了强类型检查，有助于提高代码的质量和可维护性；HTML 用于构建相关的页面结构（可能用于测试页面的模拟或展示测试结果等方面）；MDX 和 Less 则在文档编写、样式处理等方面发挥作用；JavaScript 作为前端开发的重要语言，也在一些交互逻辑处理等环节起到补充作用。

2、AI 驱动机制

Midscene.js基于多模态AI技术构建，通过AI agent实现自然语言控制页面、页面信息提取和断言页面状态等功能。它采用了多种工程手段，如AI结果缓存、AI任务报告等，以提升执行速度和中间透明化。

此外，Midscene.js还支持丰富的API接口，方便开发者进行自定义扩展和集成。

以下是 Midscene.js 的一个介绍视频

视频审核中

其内部采用了先进的 AI 技术来理解自然语言指令并转化为实际的自动化测试操作。它可能基于自然语言处理（NLP）模型来解析测试人员输入的自然语言文本，识别其中的操作意图和目标元素等关键信息。然后，通过与底层的自动化测试框架进行交互，将这些解析后的指令映射为具体的页面操作代码，如使用 Playwright 或 Puppeteer 等常见的自动化测试库来实现对浏览器页面的控制和交互。


4、安装与使用

如果你想要使用Midscene中的核心能力，有多种方式，可以安装浏览器插件 开始快速体验。插件里可以用自然语言与任意网页联动，调用交互、提取、断言三种接口，无需搭建代码项目。

此外，还有几种形式支持将 Midscene 集成到代码：

  • 使用 YAML 格式的自动化脚本

  • 集成到 Puppeteer

  • 集成到 Playwright

Midscene一共有三种关键方法：交互（.ai, .aiAction）, 提取 (.aiQuery), 断言 (.aiAssert)。

  • 用 .ai方法描述步骤并执行交互

  • 用 .aiQuery 从 UI 中“理解”并提取数据，返回值是 JSON 格式，你可以尽情描述想要的数据结构

  • 用 .aiAssert 来执行断言

举例：

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

// 👀 找到列表里耳机相关的信息
const items = await aiQuery(
  '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
);

console.log("headphones in stock", items);


4.1 通过 Chrome 插件快速体验

前往 Chrome 扩展商店安装 Midscene 扩展：Midscene启动扩展（可能默认是折叠的），通过粘贴 Key=Value 格式配置插件环境：

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

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


4.2 使用 YAML 格式的自动化脚本

在大多数情况下，开发者编写自动化脚本只是为了执行一些冒烟测试，比如检查某些内容是否出现，或者验证某个关键用户路径是否可用。在这种情况下，维护一个大型测试项目会显得毫无必要。

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

1、编写一个名为 bing-search.yaml 的文件。

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

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

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

2、配置 OpenAI API Key

# 更新为你自己的 Key

export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"

或使用 .env 文件存储配置

.env
OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"

3、全局安装 @midscene/cli

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

4、运行脚本

midscene ./bing-search.yaml
# 或者如果你在项目中安装了 midscene
npx midscene ./bing-search.yaml

你应该会看到脚本的执行进度和可视化运行报告文件。


4.3 集成到 Playwright

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

这里我们假设你已经拥有一个集成了 Playwright 的仓库。

1、配置 OpenAI API Key

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

2、新增依赖

npm install @midscene/web --save-dev

3、更新配置文件，把下方代码保存为 ./e2e/fixture.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());

4、编写测试用例，例如下方代码，保存为 ./e2e/ebay-search.spec.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 }) => {
  // 👀 输入关键字，执行搜索
  // 注：尽管这是一个英文页面，你也可以用中文指令控制它
  await ai('在搜索框输入 "Headphones" ，敲回车');

  // 👀 找到列表里耳机相关的信息
  const items = await aiQuery(
    '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
  );

  console.log("headphones in stock", items);
  expect(items?.length).toBeGreaterThan(0);

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

5、运行测试用例

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

6、查看测试报告 当上面的命令执行成功后，会在控制台输出：Midscene - report file updated: ./current_cwd/midscene_run/report/some_id.html，通过浏览器打开该文件即可看到报告。


5、小结

Midscene作为一款开源的基于 AI 人工智能的 UI 自动化测试工具，在简化测试流程、提高测试效率和降低测试门槛等方面有着显著的优势。它为软件测试人员提供了一种全新的测试手段，尤其适用于快速迭代开发的项目和团队中测试资源相对有限的情况。然而，如同任何工具一样，它也有其自身的局限性，在实际使用过程中需要测试人员根据具体的项目需求和场景进行合理的评估和应用。

但总体而言，Midscene 无疑是 UI 自动化测试领域中一颗极具潜力的新星，值得广大测试人员和开发团队关注与尝试。

项目地址：https://github.com/web-infra-dev/midscene

使用文档：https://midscenejs.com/zh/

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接开发Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。


http://www.niftyadmin.cn/n/5869270.html

相关文章

QT各种版本下载安装

QT各种版本下载安装

参考链接&#xff1a; 【Qt】超详细&#xff01;Qt4.8.6和VS2010的配置及使用 由于QT官网一般现在进不去&#xff0c;所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行&#xff0c;现在推荐两种方法 从参考链接中搬过来&#xff1a; 方案一&#xff1a;国内镜…
阅读更多...
Qt在Linux嵌入式开发过程中复杂界面滑动时卡顿掉帧问题分析及解决方案

Qt在Linux嵌入式开发过程中复杂界面滑动时卡顿掉帧问题分析及解决方案

Qt在Linux嵌入式设备开发过程中&#xff0c;由于配置较低&#xff0c;加上没有GPU&#xff0c;我们有时候会遇到有些组件比较多的复杂界面&#xff0c;在滑动时会出现掉帧或卡顿的问题。要讲明白这个问题还得从CPU和GPU的分工说起。 一、硬件层面核心问题根源剖析 CPU&#x…
阅读更多...
计算机考研之数据结构：斐波那契数列专题(1)

计算机考研之数据结构：斐波那契数列专题(1)

不论是在算法还是在编程语言的教材中&#xff0c;都可能会以斐波那契数列为例&#xff0c;或说明其算法上的特点——主要是递归&#xff0c;或说明如何运用某种编程语言编写相应函数。 本文是一篇关于“斐波那契数列”的专题文章&#xff0c;目的是让学习《数据结构》这门课程…
阅读更多...
FreiHAND （handposeX-json 格式）数据集-release ＞＞ DataBall

FreiHAND （handposeX-json 格式）数据集-release ＞＞ DataBall

FreiHAND &#xff08;handposeX-json 格式&#xff09;数据集-release 注意&#xff1a; 1)为了方便使用&#xff0c;按照 handposeX json 自定义格式存储 2)使用常见依赖库进行调用,降低数据集使用难度。 3)部分数据集获取请加入&#xff1a;DataBall-X数据球(free) 4)完…
阅读更多...
第15章-超声波避障功能 HC-SR04超声波测距模块详解STM32超声波测距

第15章-超声波避障功能 HC-SR04超声波测距模块详解STM32超声波测距

原文链接 功能介绍放开头&#xff0c; 使用便捷无需愁 这是全网最详细、性价比最高的STM32实战项目入门教程&#xff0c;通过合理的硬件设计和详细的视频笔记介绍&#xff0c;硬件使用STM32F103主控资料多方便学习&#xff0c;通过3万字笔记、12多个小时视频、20多章节代码手…
阅读更多...
网易云音乐分布式KV存储实践与演进

网易云音乐分布式KV存储实践与演进

随着网易云音乐业务的快速发展&#xff0c;推荐和搜索场景对分布式KV存储的需求日益增长。本文将深入探讨网易云音乐在分布式KV存储方面的实践和演进&#xff0c;分析其技术选型、架构设计以及未来发展方向。 一、业务背景 网易云音乐的业务场景对分布式KV存储提出了高并发、…
阅读更多...
java23种设计模式-命令模式

java23种设计模式-命令模式

命令模式&#xff08;Command Pattern&#xff09;学习笔记 1. 模式定义 行为型设计模式&#xff0c;将请求封装为对象&#xff0c;使请求的发送者与接收者解耦。支持请求的排队、记录、撤销/重做等操作。 2. 适用场景 ✅ 需要将操作参数化 ✅ 需要支持事务操作&#xff08…
阅读更多...
重构清洁想象，石头科技首创五轴仿生机械手打破传统清洁边界

重构清洁想象，石头科技首创五轴仿生机械手打破传统清洁边界

2月25日&#xff0c;主题为“重构清洁想象”的石头科技2025发布会在上海天文馆正式召开。石头科技清洁产品BU总裁钱启杰在会上宣布&#xff0c;石头科技正式成为上海天文馆授权合作伙伴&#xff0c;希望借助航天科技到家庭科技的跨越&#xff0c;进一步简化家庭清洁工作&#x…
阅读更多...
最新文章

Copyright @ 2022~2023