推荐一款最新开源，基于AI人工智能UI自动化测试工具！支持自然语言编写脚本！

随着互联网技术的飞速发展，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接口，方便开发者进行自定义扩展和集成。

其内部采用了先进的 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/