隨著互聯網技術的飛速發展，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/

總結

以上是生活随笔為你收集整理的推荐一款最新开源，基于AI人工智能UI自动化测试工具！支持自然语言编写脚本！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。