隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，Web應(yīng)用越來越普及，前端頁面也越來越復(fù)雜。為了確保產(chǎn)品質(zhì)量，UI自動(dòng)化測(cè)試成為了開發(fā)過程中不可或缺的一環(huán)。然而，傳統(tǒng)的UI自動(dòng)化測(cè)試工具往往存在學(xué)習(xí)成本高、維護(hù)困難等問題。特別是UI 自動(dòng)化腳本里往往到處都是選擇器，比如 #ids、data-test、.selectors。在需要重構(gòu)的時(shí)候，這可能會(huì)讓人感到非常頭疼。

今天，我們將為您推薦一款基于AI人工智能的開源UI自動(dòng)化測(cè)試工具——Midscene，讓您輕松應(yīng)對(duì)UI自動(dòng)化測(cè)試挑戰(zhàn)。

1、Midscene介紹

Midscene.js 是一款由 web-infra-dev開發(fā)的開源 AI 驅(qū)動(dòng)的自動(dòng)化 SDK。其核心功能是能夠讓測(cè)試人員使用自然語言來控制頁面、執(zhí)行斷言以及提取 JSON 格式的數(shù)據(jù)。這種以自然語言為交互方式的設(shè)計(jì)，極大地降低了自動(dòng)化測(cè)試的門檻，即使是非專業(yè)編程人員也能夠較為輕松地開展 UI 自動(dòng)化測(cè)試工作。

Midscene.js 采用了多模態(tài)大語言模型（LLM），能夠直觀地“理解”你的用戶界面并執(zhí)行必要的操作。你只需描述交互步驟或期望的數(shù)據(jù)格式，AI 就能為你完成任務(wù)。

默認(rèn)選擇的是 OpenAI GPT-4o 作為模型，你也可以自定義為其他多模態(tài)模型。

2、核心特性

1、自然語言交互：

• Midscene.js允許用戶通過自然語言描述測(cè)試步驟，工具將自動(dòng)規(guī)劃并控制用戶界面。這種交互方式大大降低了編寫測(cè)試腳本的難度，提高了測(cè)試腳本的可讀性和可維護(hù)性。

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

• 用戶只需提供所需數(shù)據(jù)的格式提示，Midscene.js即可返回以JSON格式組織的預(yù)期響應(yīng)。這使得數(shù)據(jù)提取和驗(yàn)證過程更加直觀和高效。

3、直觀斷言：

• 用戶可以用自然語言進(jìn)行斷言，Midscene.js將基于AI理解執(zhí)行這些斷言。這減少了編寫復(fù)雜斷言邏輯的需求，提高了測(cè)試的準(zhǔn)確性和可靠性。

4、無需定制訓(xùn)練的LLM：

• Midscene.js支持使用公共的多模態(tài)LLM（如GPT-4等），無需進(jìn)行任何定制訓(xùn)練。這降低了使用門檻，使得更多開發(fā)者能夠輕松上手這款工具。

5、可視化報(bào)告：

• Midscene.js提供了可視化報(bào)告文件，用戶可以輕松理解和調(diào)試整個(gè)測(cè)試過程。這有助于快速定位問題，提高測(cè)試效率。

3、技術(shù)實(shí)現(xiàn)與架構(gòu)

1、語言構(gòu)成

Midscene 的代碼主要由 HTML、TypeScript、MDX、Less和 JavaScript等語言編寫。這種多語言的組合構(gòu)建了一個(gè)功能豐富且靈活的測(cè)試工具框架。其中，TypeScript 的使用為代碼提供了強(qiáng)類型檢查，有助于提高代碼的質(zhì)量和可維護(hù)性；HTML 用于構(gòu)建相關(guān)的頁面結(jié)構(gòu)（可能用于測(cè)試頁面的模擬或展示測(cè)試結(jié)果等方面）；MDX 和 Less 則在文檔編寫、樣式處理等方面發(fā)揮作用；JavaScript 作為前端開發(fā)的重要語言，也在一些交互邏輯處理等環(huán)節(jié)起到補(bǔ)充作用。

2、AI 驅(qū)動(dòng)機(jī)制

Midscene.js基于多模態(tài)AI技術(shù)構(gòu)建，通過AI agent實(shí)現(xiàn)自然語言控制頁面、頁面信息提取和斷言頁面狀態(tài)等功能。它采用了多種工程手段，如AI結(jié)果緩存、AI任務(wù)報(bào)告等，以提升執(zhí)行速度和中間透明化。

此外，Midscene.js還支持豐富的API接口，方便開發(fā)者進(jìn)行自定義擴(kuò)展和集成。

其內(nèi)部采用了先進(jìn)的 AI 技術(shù)來理解自然語言指令并轉(zhuǎn)化為實(shí)際的自動(dòng)化測(cè)試操作。它可能基于自然語言處理（NLP）模型來解析測(cè)試人員輸入的自然語言文本，識(shí)別其中的操作意圖和目標(biāo)元素等關(guān)鍵信息。然后，通過與底層的自動(dòng)化測(cè)試框架進(jìn)行交互，將這些解析后的指令映射為具體的頁面操作代碼，如使用 Playwright 或 Puppeteer 等常見的自動(dòng)化測(cè)試庫來實(shí)現(xiàn)對(duì)瀏覽器頁面的控制和交互。

4、安裝與使用

如果你想要使用Midscene中的核心能力，有多種方式，可以安裝瀏覽器插件 開始快速體驗(yàn)。插件里可以用自然語言與任意網(wǎng)頁聯(lián)動(dòng)，調(diào)用交互、提取、斷言三種接口，無需搭建代碼項(xiàng)目。

此外，還有幾種形式支持將 Midscene 集成到代碼：

• 使用 YAML 格式的自動(dòng)化腳本
• 集成到 Puppeteer
• 集成到 Playwright

Midscene一共有三種關(guān)鍵方法：交互（.ai, .aiAction）, 提取 (.aiQuery), 斷言 (.aiAssert)。

• 用 .ai方法描述步驟并執(zhí)行交互
• 用 .aiQuery 從 UI 中“理解”并提取數(shù)據(jù)，返回值是 JSON 格式，你可以盡情描述想要的數(shù)據(jù)結(jié)構(gòu)
• 用 .aiAssert 來執(zhí)行斷言

舉例：

// ?? 輸入關(guān)鍵字，執(zhí)行搜索
// 注：盡管這是一個(gè)英文頁面，你也可以用中文指令控制它
await ai('在搜索框輸入 "Headphones" ，敲回車');

// ?? 找到列表里耳機(jī)相關(guān)的信息
const items = await aiQuery(
  '{itemTitle: string, price: Number}[], 找到列表里的商品標(biāo)題和價(jià)格'
);

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

4.1 通過 Chrome 插件快速體驗(yàn)

前往 Chrome 擴(kuò)展商店安裝 Midscene 擴(kuò)展：Midscene
啟動(dòng)擴(kuò)展（可能默認(rèn)是折疊的），通過粘貼 Key=Value 格式配置插件環(huán)境：

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

通過使用 Midscene.js Chrome 插件，你可以快速在任意網(wǎng)頁上體驗(yàn) Midscene 的主要功能，而無需編寫任何代碼。

4.2 使用 YAML 格式的自動(dòng)化腳本

在大多數(shù)情況下，開發(fā)者編寫自動(dòng)化腳本只是為了執(zhí)行一些冒煙測(cè)試，比如檢查某些內(nèi)容是否出現(xiàn)，或者驗(yàn)證某個(gè)關(guān)鍵用戶路徑是否可用。在這種情況下，維護(hù)一個(gè)大型測(cè)試項(xiàng)目會(huì)顯得毫無必要。

?Midscene 提供了一種基于 .yaml 文件的自動(dòng)化測(cè)試方法，這有助于你專注于腳本本身，而不是測(cè)試框架。以此，任何團(tuán)隊(duì)內(nèi)的成員都可以編寫自動(dòng)化腳本，而無需學(xué)習(xí)任何 API。

1、編寫一個(gè)名為 bing-search.yaml 的文件。

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

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

  - name: 檢查結(jié)果
    flow:
      - aiAssert: 結(jié)果中展示了天氣信息

2、配置 OpenAI API Key

# 更新為你自己的 Key

export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"

或使用 .env 文件存儲(chǔ)配置

.env
OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"

3、全局安裝 @midscene/cli

npm i -g @midscene/cli
# 或在項(xiàng)目中安裝
npm i @midscene/cli --save-dev

4、運(yùn)行腳本

midscene ./bing-search.yaml
# 或者如果你在項(xiàng)目中安裝了 midscene
npx midscene ./bing-search.yaml

你應(yīng)該會(huì)看到腳本的執(zhí)行進(jìn)度和可視化運(yùn)行報(bào)告文件。

4.3 集成到 Playwright

Playwright 是由微軟開發(fā)的一個(gè)開源自動(dòng)化庫，主要用于對(duì)網(wǎng)絡(luò)應(yīng)用程序進(jìn)行端到端測(cè)試（end-to-end test）和網(wǎng)頁抓取。

這里我們假設(shè)你已經(jīng)擁有一個(gè)集成了 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、編寫測(cè)試用例，例如下方代碼，保存為 ./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 }) => {
  // ?? 輸入關(guān)鍵字，執(zhí)行搜索
  // 注：盡管這是一個(gè)英文頁面，你也可以用中文指令控制它
  await ai('在搜索框輸入 "Headphones" ，敲回車');

  // ?? 找到列表里耳機(jī)相關(guān)的信息
  const items = await aiQuery(
    '{itemTitle: string, price: Number}[], 找到列表里的商品標(biāo)題和價(jià)格'
  );

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

  // ?? 用 AI 斷言
  await aiAssert("界面左側(cè)有類目篩選功能");
});

5、運(yùn)行測(cè)試用例

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

6、查看測(cè)試報(bào)告
當(dāng)上面的命令執(zhí)行成功后，會(huì)在控制臺(tái)輸出：Midscene - report file updated: ./current_cwd/midscene_run/report/some_id.html，通過瀏覽器打開該文件即可看到報(bào)告。

5、小結(jié)

Midscene作為一款開源的基于 AI 人工智能的 UI 自動(dòng)化測(cè)試工具，在簡(jiǎn)化測(cè)試流程、提高測(cè)試效率和降低測(cè)試門檻等方面有著顯著的優(yōu)勢(shì)。它為軟件測(cè)試人員提供了一種全新的測(cè)試手段，尤其適用于快速迭代開發(fā)的項(xiàng)目和團(tuán)隊(duì)中測(cè)試資源相對(duì)有限的情況。然而，如同任何工具一樣，它也有其自身的局限性，在實(shí)際使用過程中需要測(cè)試人員根據(jù)具體的項(xiàng)目需求和場(chǎng)景進(jìn)行合理的評(píng)估和應(yīng)用。

但總體而言，Midscene 無疑是 UI 自動(dòng)化測(cè)試領(lǐng)域中一顆極具潛力的新星，值得廣大測(cè)試人員和開發(fā)團(tuán)隊(duì)關(guān)注與嘗試。

項(xiàng)目地址：https://github.com/web-infra-dev/midscene

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