在軟件開(kāi)發(fā)測(cè)試領(lǐng)域，UI自動(dòng)化測(cè)試一直是我們的“心頭大患”。傳統(tǒng)測(cè)試工具依賴繁瑣的元素定位（如CSS選擇器、XPath），一旦頁(yè)面結(jié)構(gòu)變化，腳本就可能失效；復(fù)雜交互場(chǎng)景（如動(dòng)態(tài)加載、多步驟驗(yàn)證）需要編寫(xiě)大量代碼，維護(hù)成本高昂；而數(shù)據(jù)抓取、性能監(jiān)控等場(chǎng)景更是讓測(cè)試人員苦不堪言。

然而，隨著AI技術(shù)的爆發(fā)，一款基于大語(yǔ)言模型(LLM)的AI驅(qū)動(dòng)UI自動(dòng)化測(cè)試工具: Midscene.js 橫空出世，有望打破這一局面。

它以“自然語(yǔ)言交互”為核心，讓開(kāi)發(fā)者無(wú)需編寫(xiě)代碼，只需用中文描述測(cè)試步驟，即可實(shí)現(xiàn)自動(dòng)化操作，堪稱“小白秒變測(cè)試專家”的終極神器！

一、Midscene.js是什么？為什么它能火？

Midscene.js是字節(jié)跳動(dòng) Web Infra 團(tuán)隊(duì)全新開(kāi)源的一款 UI 自動(dòng)化工具，它最大的亮點(diǎn)在于引入了多模態(tài) AI 推理能力。

Midscene.js 的核心開(kāi)發(fā)語(yǔ)言為 ??TypeScript??，并輔以 HTML、MDX、Less 等前端技術(shù)構(gòu)建其功能框架。

1、核心亮點(diǎn)包括

• 自然語(yǔ)言交互：以往編寫(xiě)自動(dòng)化測(cè)試腳本，需要掌握專業(yè)的編程知識(shí)，這對(duì)很多測(cè)試人員來(lái)說(shuō)是個(gè)不小的挑戰(zhàn)。但 Midscene.js你只需用自然語(yǔ)言描述自動(dòng)化步驟，它就能理解你的指令，并在網(wǎng)頁(yè)上精準(zhǔn)執(zhí)行相應(yīng)操作。

• 強(qiáng)大的數(shù)據(jù)提取能力：能夠深度理解網(wǎng)頁(yè)結(jié)構(gòu)，并根據(jù)提示生成所需數(shù)據(jù)結(jié)構(gòu)，在進(jìn)行數(shù)據(jù)抓取或測(cè)試時(shí)，從網(wǎng)頁(yè)中提取特定數(shù)據(jù)是常見(jiàn)需求。而Midscene.js 提供了強(qiáng)大的數(shù)據(jù)提取功能，你可以描述想要的數(shù)據(jù)結(jié)構(gòu)，它會(huì)以 JSON 格式將數(shù)據(jù)返回給你。

• 零代碼測(cè)試：無(wú)需編寫(xiě)選擇器，告別“錨點(diǎn)依賴癥”；

• 可視化報(bào)告：提供動(dòng)畫(huà)回放、步驟詳情，支持在報(bào)告中直接調(diào)試，方便用戶調(diào)試和優(yōu)化測(cè)試流程。

• 支持多種模型： 內(nèi)置對(duì)公共多模態(tài)大語(yǔ)言模型（如 GPT-4）和開(kāi)源模型（如 UI-TARS）的支持。

• 開(kāi)源+數(shù)據(jù)安全： MIT協(xié)議，支持私有化部署，數(shù)據(jù)不出本地。

2、為何它能火

• 降本增效： 傳統(tǒng)測(cè)試需要3天完成的腳本，Midscene.js僅需30分鐘；
• 靈活應(yīng)對(duì)變化： 頁(yè)面改版？只需修改自然語(yǔ)言描述，無(wú)需重構(gòu)腳本；
• 跨工具兼容： 支持Puppeteer、Playwright、YAML腳本，無(wú)縫集成現(xiàn)有測(cè)試體系。

二、安裝方式

2.1 Chrome 擴(kuò)展安裝

如果你想快速體驗(yàn) Midscene.js 的核心功能，安裝 Chrome 擴(kuò)展是個(gè)不錯(cuò)的選擇。打開(kāi) Chrome 瀏覽器，進(jìn)入 Chrome 網(wǎng)上應(yīng)用店，搜索 “Midscene.js”，找到對(duì)應(yīng)的擴(kuò)展程序后，點(diǎn)擊 “添加到 Chrome” 按鈕，按照提示完成安裝。

2.2 Npm安裝

如果你需要更深入地使用 Midscene.js，進(jìn)行復(fù)雜的自動(dòng)化測(cè)試或集成到現(xiàn)有項(xiàng)目中，可以通過(guò)安裝SDK 來(lái)實(shí)現(xiàn)。以 Node.js 項(xiàng)目為例，首先確保你已經(jīng)安裝了 Node.js 環(huán)境，然后打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目目錄，執(zhí)行以下命令安裝 Midscene.js 的 SDK：

npm install midscene.js

2.3 源碼安裝

如果你想深入地了解學(xué)習(xí)Midscene.js源碼或?qū)λM(jìn)行二開(kāi)改造，建議通過(guò)源碼來(lái)安裝。

# 克隆項(xiàng)目
git clone https://github.com/web-infra-dev/midscene.git
cd midscene

# 安裝依賴
npm install

# 啟動(dòng)本地服務(wù)（可選）
npm run dev

三、使用方法及示例

3.1 Chrom插件使用方式

以Chrome 擴(kuò)展插件安裝為例，安裝完成后，只需訪問(wèn)Midscene.js插件打開(kāi)即可。

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

啟動(dòng)擴(kuò)展，通過(guò)粘貼 Key=Value 格式配置插件環(huán)境：

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

各配置選項(xiàng)：

溫馨提醒：

• midscene 默認(rèn)使用 GPT-4o 為默認(rèn)的推理模型，成本比較高。Midscene 需要將截圖和 DOM 樹(shù)一起發(fā)送給模型，這會(huì)導(dǎo)致 token 消耗較高。
• 當(dāng)然你也可以選擇，千問(wèn) Qwen-2.5-VL 模型，同樣支持視覺(jué)定位，不需要發(fā)送 DOM 樹(shù)給模型。和 gpt-4o 相比，它可以節(jié)省 30% 到 50% 的 token 數(shù)量。不過(guò)在某些情況下，Qwen-2.5-VL 的斷言能力可能不如 gpt-4o。

上述配置完成后，你可以立即開(kāi)始使用 Midscene。
它一共有三個(gè)關(guān)鍵操作Tab：

• Action: 與網(wǎng)頁(yè)進(jìn)行交互，如 "在搜索框中輸入 Midscene" 或 "點(diǎn)擊登錄按鈕"
• Query: 從界面中提取 JSON 數(shù)據(jù)，如 "提取頁(yè)面中的用戶 ID，返回 { id: string }"
• Assert: 執(zhí)行斷言，如 "頁(yè)面標(biāo)題是 Midscene"這里我是了下在搜索引擎中搜索hengshuai's blog，然后讓其點(diǎn)擊第一條結(jié)果：

上圖中可以看到全程沒(méi)有任何具體的代碼，僅僅通過(guò)自然語(yǔ)言就完成了一系列行為

3.2 YAML使用方式

Midscene 還提供了一種基于 .yaml 文件的自動(dòng)化測(cè)試方法，這有助于你專注于腳本本身，任何團(tuán)隊(duì)內(nèi)的成員都可以編寫(xiě)自動(dòng)化腳本，例如創(chuàng)建test.yml。

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

tasks:
  - name: 搜索耳機(jī)
    flow:
      - ai: 在搜索框輸入 "耳機(jī)" 并敲回車
      - sleep: 2000
      - aiQuery: '{itemTitle: string, price: Number}[], 提取前5個(gè)商品標(biāo)題和價(jià)格'
      - aiAssert: "搜索結(jié)果頁(yè)面包含‘耳機(jī)’關(guān)鍵詞"

安裝@midscene/cli

npm install @midscene/cli -g

執(zhí)行腳本：

npx midscene ./test.yaml

3.3 使用Puppeteer集成

midscene.js 也提供了一種基于 Puppeteer 的集成方式，允許你使用 Puppeteer 的 API 來(lái)編寫(xiě)自動(dòng)化測(cè)試腳本，并使用 Midscene 的 API 來(lái)執(zhí)行自動(dòng)化測(cè)試

const puppeteer = require('puppeteer');
const midscene = require('@midscene/web');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 輸入用戶名和密碼
  await midscene.execute(page, '輸入用戶名 "testuser"');
  await midscene.execute(page, '輸入密碼 "123456"');
  await midscene.execute(page, '點(diǎn)擊登錄按鈕');

  // 提取數(shù)據(jù)
  const data = await midscene.query(page, '提取用戶信息為 JSON 格式');
  console.log(data);

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

安裝依賴：

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

運(yùn)行腳本：

npx tsx ./test.ts

不管采用哪種方式，同樣都是需要配置必要的環(huán)境變量：

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

模型配置參考文檔：https://midscenejs.com/model-provider.html

4、最后

Midscene.js 作為一款 AI 驅(qū)動(dòng)的 UI 自動(dòng)化測(cè)試?yán)鳎瑧{借其獨(dú)特的自然語(yǔ)言交互、強(qiáng)大的數(shù)據(jù)提取和斷言功能、可視化調(diào)試以及豐富的集成方式，為 UI 自動(dòng)化測(cè)試帶來(lái)了全新的體驗(yàn)。

它不僅讓測(cè)試工作變得更加高效、便捷，還降低了測(cè)試人員的技術(shù)門(mén)檻，讓更多人能夠參與到自動(dòng)化測(cè)試中來(lái)。無(wú)論是對(duì)于追求高效的開(kāi)發(fā)團(tuán)隊(duì)，還是想要提升測(cè)試技能的個(gè)人，Midscene.js 都值得一試。如果你在使用過(guò)程中有任何問(wèn)題或心得，歡迎在評(píng)論區(qū)留言分享。

文章中涉及到的工具更詳細(xì)使用可參考官網(wǎng):

?? 項(xiàng)目官網(wǎng)：https://midscenejs.com

?? GitHub倉(cāng)庫(kù)：https://github.com/web-infra-dev/midscene

?? Puppeteer: https://pptr.dev/