在軟件開發(fā)測試領域，UI自動化測試一直是我們的“心頭大患”。傳統(tǒng)測試工具依賴繁瑣的元素定位（如CSS選擇器、XPath），一旦頁面結構變化，腳本就可能失效；復雜交互場景（如動態(tài)加載、多步驟驗證）需要編寫大量代碼，維護成本高昂；而數(shù)據(jù)抓取、性能監(jiān)控等場景更是讓測試人員苦不堪言。
然而，隨著AI技術的爆發(fā)，一款基于大語言模型(LLM)的AI驅(qū)動UI自動化測試工具: Midscene.js 橫空出世，有望打破這一局面。
它以“自然語言交互”為核心，讓開發(fā)者無需編寫代碼，只需用中文描述測試步驟，即可實現(xiàn)自動化操作，堪稱“小白秒變測試專家”的終極神器！
一、Midscene.js是什么？為什么它能火？
Midscene.js是字節(jié)跳動 Web Infra 團隊全新開源的一款 UI 自動化工具，它最大的亮點在于引入了多模態(tài) AI 推理能力。
Midscene.js 的核心開發(fā)語言為 TypeScript，并輔以 HTML、MDX、Less 等前端技術構建其功能框架。
1、核心亮點包括
自然語言交互：以往編寫自動化測試腳本，需要掌握專業(yè)的編程知識，這對很多測試人員來說是個不小的挑戰(zhàn)。但 Midscene.js你只需用自然語言描述自動化步驟，它就能理解你的指令，并在網(wǎng)頁上精準執(zhí)行相應操作。
強大的數(shù)據(jù)提取能力：能夠深度理解網(wǎng)頁結構，并根據(jù)提示生成所需數(shù)據(jù)結構，在進行數(shù)據(jù)抓取或測試時，從網(wǎng)頁中提取特定數(shù)據(jù)是常見需求。而Midscene.js 提供了強大的數(shù)據(jù)提取功能，你可以描述想要的數(shù)據(jù)結構，它會以 JSON 格式將數(shù)據(jù)返回給你。
可視化報告：提供動畫回放、步驟詳情，支持在報告中直接調(diào)試，方便用戶調(diào)試和優(yōu)化測試流程。
支持多種模型： 內(nèi)置對公共多模態(tài)大語言模型（如 GPT-4）和開源模型（如 UI-TARS）的支持。
開源+數(shù)據(jù)安全： MIT協(xié)議，支持私有化部署，數(shù)據(jù)不出本地。
2、為何它能火
- 降本增效： 傳統(tǒng)測試需要3天完成的腳本，Midscene.js僅需30分鐘；
- 靈活應對變化： 頁面改版？只需修改自然語言描述，無需重構腳本；
- 跨工具兼容： 支持Puppeteer、Playwright、YAML腳本，無縫集成現(xiàn)有測試體系。
二、安裝方式
2.1 Chrome 擴展安裝
如果你想快速體驗 Midscene.js 的核心功能，安裝 Chrome 擴展是個不錯的選擇。打開 Chrome 瀏覽器，進入 Chrome 網(wǎng)上應用店，搜索 “Midscene.js”，找到對應的擴展程序后，點擊 “添加到 Chrome” 按鈕，按照提示完成安裝。
2.2 Npm安裝
如果你需要更深入地使用 Midscene.js，進行復雜的自動化測試或集成到現(xiàn)有項目中，可以通過安裝SDK 來實現(xiàn)。以 Node.js 項目為例，首先確保你已經(jīng)安裝了 Node.js 環(huán)境，然后打開命令行工具，進入你的項目目錄，執(zhí)行以下命令安裝 Midscene.js 的 SDK：
npm install midscene.js
2.3 源碼安裝
如果你想深入地了解學習Midscene.js源碼或?qū)λM行二開改造，建議通過源碼來安裝。
# 克隆項目
git clone https://github.com/web-infra-dev/midscene.git
cd midscene
# 安裝依賴
npm install
# 啟動本地服務（可選）
npm run dev
三、使用方法及示例
3.1 Chrom插件使用方式
以Chrome 擴展插件安裝為例，安裝完成后，只需訪問Midscene.js插件打開即可。
通過使用 Midscene.js Chrome 插件，你可以快速在任意網(wǎng)頁上體驗 Midscene 的主要功能，而無需編寫任何代碼
啟動擴展，通過粘貼 Key=Value 格式配置插件環(huán)境：
OPENAI_API_KEY="sk-replace-by-your-own"
各配置選項：
溫馨提醒：
- midscene 默認使用 GPT-4o 為默認的推理模型，成本比較高。Midscene 需要將截圖和 DOM 樹一起發(fā)送給模型，這會導致 token 消耗較高。
- 當然你也可以選擇，千問 Qwen-2.5-VL 模型，同樣支持視覺定位，不需要發(fā)送 DOM 樹給模型。和 gpt-4o 相比，它可以節(jié)省 30% 到 50% 的 token 數(shù)量。不過在某些情況下，Qwen-2.5-VL 的斷言能力可能不如 gpt-4o。
上述配置完成后，你可以立即開始使用 Midscene。 它一共有三個關鍵操作Tab：
- Action: 與網(wǎng)頁進行交互，如 "在搜索框中輸入 Midscene" 或 "點擊登錄按鈕"
- Query: 從界面中提取 JSON 數(shù)據(jù)，如 "提取頁面中的用戶 ID，返回 { id: string }"
- Assert: 執(zhí)行斷言，如 "頁面標題是 Midscene"這里我是了下在搜索引擎中搜索hengshuai's blog，然后讓其點擊第一條結果：
上圖中可以看到全程沒有任何具體的代碼，僅僅通過自然語言就完成了一系列行為
3.2 YAML使用方式
Midscene 還提供了一種基于 .yaml 文件的自動化測試方法，這有助于你專注于腳本本身，任何團隊內(nèi)的成員都可以編寫自動化腳本，例如創(chuàng)建test.yml。
target:
url:https://www.
tasks:
-name:搜索耳機
flow:
-ai:在搜索框輸入"耳機"并敲回車
-sleep:2000
-aiQuery:'{itemTitle: string, price: Number}[], 提取前5個商品標題和價格'
-aiAssert:"搜索結果頁面包含'耳機’關鍵詞"
安裝@midscene/cli
npm install @midscene/cli -g
執(zhí)行腳本：
npx midscene ./test.yaml
3.3 使用Puppeteer集成
midscene.js 也提供了一種基于 Puppeteer 的集成方式，允許你使用 Puppeteer 的 API 來編寫自動化測試腳本，并使用 Midscene 的 API 來執(zhí)行自動化測試
const puppeteer = require('puppeteer');
const midscene = require('@midscene/web');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://');
// 輸入用戶名和密碼
await midscene.execute(page, '輸入用戶名 "testuser"');
await midscene.execute(page, '輸入密碼 "123456"');
await midscene.execute(page, '點擊登錄按鈕');
// 提取數(shù)據(jù)
const data = await midscene.query(page, '提取用戶信息為 JSON 格式');
console.log(data);
await browser.close();
})();
安裝依賴：
npm install @midscene/web puppeteer tsx --save-dev
運行腳本：
npx tsx ./test.ts
不管采用哪種方式，同樣都是需要配置必要的環(huán)境變量：
# 更新為你自己的 Key
export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
# 其他..
模型配置參考文檔：https:///model-provider.html
4、最后
Midscene.js 作為一款 AI 驅(qū)動的 UI 自動化測試利器，憑借其獨特的自然語言交互、強大的數(shù)據(jù)提取和斷言功能、可視化調(diào)試以及豐富的集成方式，為 UI 自動化測試帶來了全新的體驗。
它不僅讓測試工作變得更加高效、便捷，還降低了測試人員的技術門檻，讓更多人能夠參與到自動化測試中來。無論是對于追求高效的開發(fā)團隊，還是想要提升測試技能的個人，Midscene.js 都值得一試。如果你在使用過程中有任何問題或心得，歡迎在評論區(qū)留言分享。
文章中涉及到的工具更詳細使用可參考官網(wǎng):
?? 項目官網(wǎng)：https://
?? GitHub倉庫：https://github.com/web-infra-dev/midscene
?? Puppeteer: https://v/
