戰(zhàn)指南:從環(huán)境搭建到生產(chǎn)級(jí)調(diào)優(yōu)的 AI 自動(dòng)化測(cè)試全流程)
Midscene.js 配置實(shí)戰(zhàn)指南從環(huán)境搭建到生產(chǎn)級(jí)調(diào)優(yōu)的 AI 自動(dòng)化測(cè)試全流程【免費(fèi)下載鏈接】midsceneGUI Agent for E2E Testing項(xiàng)目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款 AI 驅(qū)動(dòng)的 UI 自動(dòng)化測(cè)試工具GUI Agent for E2E Testing你用自然語言描述操作它自動(dòng)完成點(diǎn)擊、輸入、斷言。本文按「運(yùn)行時(shí)環(huán)境 → 設(shè)備連接 → 執(zhí)行策略 → 輸出可觀測(cè) → 跨平臺(tái)」的配置分層帶你在 10 分鐘內(nèi)跑通第一條 AI 自動(dòng)化測(cè)試并拿到一套可直接用于 CI 的調(diào)優(yōu)參數(shù)。跑通之后你能得到一份.env、一條midscene命令、一個(gè)可并發(fā)批次的執(zhí)行配置、一套省 AI 調(diào)用成本的緩存策略以及 HTML JSON 報(bào)告。第一層運(yùn)行時(shí)環(huán)境——安裝 CLI 并配置模型Midscene.js 環(huán)境搭建分三步確認(rèn) Node 版本、安裝 CLI、寫.env。CLI 執(zhí)行鏈路依賴 Rstest/Rspack 工具鏈Node.js 必須是20.19、22.12或2420.17.0這類舊 patch 版本會(huì)被直接拒絕。新手推薦全局安裝 CLI如果想從源碼跑比如貢獻(xiàn)代碼再走倉庫克隆路線# 路線一快速上手推薦 npm i -g midscene/cli # 路線二源碼方式參與開發(fā)時(shí)使用 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install最小可運(yùn)行配置midscene命令用 dotenv 加載.env文件。下面的配置解決模型服務(wù)在哪、密鑰是什么、用哪個(gè)模型三個(gè)問題# .env 必須放在 CLI 執(zhí)行目錄下不是 YAML 所在目錄 MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 # 模型服務(wù)地址 MIDSCENE_MODEL_API_KEYyour-api-key # 你的 API Key MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 # 模型名稱 MIDSCENE_MODEL_FAMILYdoubao-seed # 模型系列決定適配邏輯配好之后一個(gè)最小 YAML 腳本加一條命令就能跑midscene ./bing-search.yaml命令行會(huì)輸出執(zhí)行進(jìn)度并在完成后自動(dòng)生成可視化報(bào)告。[!TIP].env里不要寫export前綴dotenv 約定它默認(rèn)不覆蓋全局同名環(huán)境變量可用--dotenv-override修改。懷疑沒生效時(shí)加--dotenv-debug看加載日志。模型參數(shù)怎么選四個(gè)變量里最容易踩坑的是MIDSCENE_MODEL_FAMILY。它不是給模型看的名字而是告訴 Midscene 按哪套邏輯適配這個(gè)模型包括坐標(biāo)處理、UI 定位策略。選錯(cuò)會(huì)直接報(bào)MIDSCENE_MODEL_FAMILY is not set to a multimodal model with UI localization。常用模型的 family 對(duì)照模型MIDSCENE_MODEL_FAMILY豆包 Seed 2.xdoubao-seed千問 Qwen3qwen3DeepSeekdeepseekGeminigeminiGPT-5gpt-5GLM-Vglm-v選模型的思路先按你的密鑰供應(yīng)商鎖定MIDSCENE_MODEL_NAME和BASE_URL再對(duì)照上表填 family三者必須成套。第二層設(shè)備與目標(biāo)連接——Android、iOS、瀏覽器橋接模式Midscene 的 UI 自動(dòng)化支持三類目標(biāo)Android 真機(jī)/模擬器、iOS 設(shè)備、瀏覽器。連接方式在 YAML 里聲明三端對(duì)比如下目標(biāo)端連接方式Y(jié)AML 關(guān)鍵配置路徑/端口要點(diǎn) Androidadb USB 調(diào)試android.deviceId設(shè)備 ID 由adb devices查詢 iOSWebDriverAgent (WDA)ios.wdaPort/ios.wdaHostWDA 默認(rèn)端口8100 瀏覽器無頭 Puppeteer / CDP / 橋接模式page.url/page.cdpEndpoint/page.bridgeMode橋接 Server 默認(rèn)127.0.0.1:3766Android ADB 連接三步走手機(jī)開啟 USB 調(diào)試設(shè)置 → 開發(fā)者選項(xiàng)連上電腦并確認(rèn)信任提示確保adb在 PATH 中adb devices能看到設(shè)備且狀態(tài)為device把設(shè)備 ID 寫進(jìn) YAMLandroid: deviceId: s4ey59 # adb devices 輸出的設(shè)備序列號(hào) tasks: - name: 地圖導(dǎo)航 flow: - ai: 打開地圖應(yīng)用 - ai: 在搜索欄輸入 杭州西湖然后點(diǎn)擊搜索按鈕iOS WDA 連接WebDriverAgent 需要預(yù)先構(gòu)建并在設(shè)備上跑起來Midscene 通過 HTTP 端口與它通信ios: wdaPort: 8100 # WDA 默認(rèn)端口非本機(jī) WDA 時(shí)配 wdaHost 瀏覽器橋接模式橋接模式Bridge Mode讓本地腳本直接接管你桌面上已登錄的 Chrome復(fù)用 cookies、插件和頁面狀態(tài)——這是手動(dòng)登錄一次自動(dòng)化跑一百次的關(guān)鍵也常被稱作 man-in-the-loop。配置步驟在 Chrome 應(yīng)用商店安裝 Midscene 擴(kuò)展裝好后后臺(tái)持續(xù)監(jiān)聽圖標(biāo)黃點(diǎn)監(jiān)聽中、綠點(diǎn)已連接→ 安裝依賴npm i midscene/web tsx --save-dev→ 寫腳本。最小示例import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); // 接管新標(biāo)簽頁 await agent.ai(Type AI 101 and hit Enter); await agent.aiAssert(there are some search results); await agent.destroy();腳本運(yùn)行后擴(kuò)展會(huì)彈確認(rèn)窗點(diǎn) Allow 授權(quán)本次連接。YAML 場(chǎng)景下只需在page里加bridgeMode: newTabWithUrl復(fù)用當(dāng)前頁則填currentTab。跨機(jī)器部署時(shí)可用new AgentOverChromeBridge({ allowRemoteAccess: true })監(jiān)聽0.0.0.0:3766僅限可信網(wǎng)絡(luò)使用。[!TIP] 橋接模式下MIDSCENE_MODEL_API_KEY等模型配置要寫在**終端Node.js 側(cè)**環(huán)境變量里不是瀏覽器側(cè)。另外userAgent、viewportWidth、cookie等頁面選項(xiàng)在橋接模式下會(huì)被忽略因?yàn)閺?fù)用的是你真實(shí)瀏覽器的配置。第三層執(zhí)行策略——并發(fā)參數(shù)與緩存策略單腳本跑通后真正的效率問題出現(xiàn)在批量執(zhí)行幾十個(gè) YAML 串行跑要等一夜反復(fù)調(diào)同一個(gè) AI 模型又貴又慢。這一層解決兩個(gè)問題吞吐量怎么調(diào)、緩存怎么省。? 吞吐量怎么調(diào)CLI 用--concurrent控制并發(fā)、--retry控制失敗重試參數(shù)還能落到一個(gè) YAML 配置文件里讓 CI 復(fù)現(xiàn)同一套執(zhí)行策略# config.yaml批量執(zhí)行的并發(fā)與重試策略 files: - ./scripts/search-*.yaml # glob 匹配所有搜索腳本 concurrent: 4 # 并發(fā)數(shù)建議不超過 CPU 核心數(shù)腳本必須互不依賴 continueOnError: true # 單個(gè)失敗不阻塞批次 retry: 2 # 失敗腳本的額外嘗試次數(shù)緩解偶發(fā)失敗midscene --config ./config.yaml兩條硬規(guī)則concurrent: 1時(shí)按files列表順序執(zhí)行大于 1 時(shí)執(zhí)行順序不確定腳本不得依賴彼此的啟動(dòng)/完成順序。若多個(gè)腳本共享登錄態(tài)用setup前置腳本 shareBrowserContext: true復(fù)用 BrowserContext僅限 Puppeteer Web 場(chǎng)景。緩存怎么省Midscene 的緩存策略分四種strategyread-write默認(rèn)、read-only、write-only以及cache: false禁用。它緩存的是AI 規(guī)劃步驟和Web 元素的 XPath 定位Canvas、跨域 iframe、closed Shadow DOM 等無穩(wěn)定 DOM 的場(chǎng)景除外。官方實(shí)測(cè)中緩存命中讓同一腳本執(zhí)行耗時(shí)從 51 秒降到 28 秒# 在 YAML 腳本中開啟緩存 agent: cache: id: search-flow # 緩存標(biāo)識(shí)腳本間互相隔離 strategy: read-write # 讀舊緩存自動(dòng)寫回CI 生產(chǎn)環(huán)境建議 read-only緩存文件落在./midscene_run/cache目錄.cache.yaml擴(kuò)展名。頁面變了緩存會(huì)自動(dòng)失效并回退 AI 重新規(guī)劃所以它不會(huì)把腳本焊死在舊頁面上。想定期瘦身用agent.flushCache({ cleanUnused: true })清理未命中的記錄。[!TIP] 查詢類操作aiAssert、aiQuery、aiBoolean永不緩存需要實(shí)時(shí)結(jié)果時(shí)放心用它們。CI 里緩存不命中把./midscene_run/cache提交到倉庫——沒有緩存文件命中率永遠(yuǎn)是 0。第四層輸出與可觀測(cè)性——報(bào)告與運(yùn)行結(jié)果AI 自動(dòng)化測(cè)試的可觀測(cè)性核心是三樣?xùn)|西每個(gè)步驟的截圖、AI 調(diào)用記錄、緩存命中提示。Midscene 執(zhí)行完成后會(huì)在輸出目錄里生成三類產(chǎn)物--summary指定的 JSON 匯總報(bào)告默認(rèn)index.json整批腳本的執(zhí)行狀態(tài)與統(tǒng)計(jì)每個(gè) YAML 對(duì)應(yīng)的獨(dú)立 JSON 執(zhí)行結(jié)果每個(gè)腳本一份 HTML 可視化報(bào)告步驟截圖、AI 輸入輸出、耗時(shí)、緩存命中都會(huì)標(biāo)注在對(duì)應(yīng)步驟上。把匯總報(bào)告指到固定路徑方便 CI 歸檔midscene --files ./scripts/*.yaml --summary ./reports/summary.json --headed # --headed 僅 Web 場(chǎng)景打開有界面瀏覽器便于肉眼驗(yàn)收排查偶發(fā)失敗時(shí)直接打開對(duì)應(yīng)腳本的 HTML 報(bào)告定位到失敗步驟查看當(dāng)時(shí)的截圖和模型返回批量對(duì)比各腳本耗時(shí)與狀態(tài)則看summary.json。報(bào)告與緩存統(tǒng)一放在./midscene_run/目錄下清理時(shí)整體移除即可。橫切關(guān)注點(diǎn)跨平臺(tái)適配一份配置多端復(fù)用Midscene 調(diào)用的是 PATH 中的adb、按wdaHost/wdaPort連接 WDA、按page配置驅(qū)動(dòng)瀏覽器——也就是說它不綁定操作系統(tǒng)路徑。跨平臺(tái)的差異集中在各 OS 上工具裝在哪用一段腳本收口后業(yè)務(wù) YAML 一行都不用改這就是一份配置、多端復(fù)用// ci/device-paths.js按操作系統(tǒng)生成本地工具路徑 import os from os; const platform os.platform(); export const devicePaths { win32: { adb: C:\\Android\\Sdk\\platform-tools\\adb.exe, chrome: C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe, }, darwin: { adb: ~/Library/Android/sdk/platform-tools/adb, chrome: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome, }, linux: { adb: /usr/local/android-sdk/platform-tools/adb, chrome: /usr/bin/google-chrome, }, }[platform];差異點(diǎn)WindowsmacOSLinuxadb 常見路徑C:\Android\Sdk\platform-tools~/Library/Android/sdk/platform-tools/usr/local/android-sdk/platform-tools需額外注意裝 Platform Tools 后加進(jìn) PATHiOS WDA 需 Xcode 簽名構(gòu)建無頭瀏覽器依賴系統(tǒng)字體庫原則設(shè)備路徑差異放 CI 腳本層MIDSCENE_MODEL_*與業(yè)務(wù) YAML 保持在同一份配置里三端行為一致。排障速查與上線前驗(yàn)收清單Top 5 常見報(bào)錯(cuò)報(bào)錯(cuò)/現(xiàn)象根因解法Unsupported Node.js versionRspack 拋出Node 版本低于工具鏈要求升級(jí)到 20.19 / 22.12 / 24重裝 CLIMIDSCENE_MODEL_FAMILY is not set to a multimodal model...family 未設(shè)置或不是 UI 定位多模態(tài)模型按模型對(duì)照表成套填四個(gè)MIDSCENE_MODEL_*.env改了不生效放錯(cuò)目錄或?qū)懥薳xport前綴放到 CLI 執(zhí)行目錄去掉export--dotenv-debug驗(yàn)證橋接模式腳本無響應(yīng)擴(kuò)展未安裝或確認(rèn)窗沒點(diǎn) Allow裝擴(kuò)展并等待黃點(diǎn)彈窗點(diǎn) Allow 后重試CI 中緩存永不命中緩存默認(rèn)禁用 / 倉庫里沒有緩存文件配agent.cache.id提交./midscene_run/cache到倉庫上線前驗(yàn)收清單Node 為 20.19/22.12/24midscene命令可執(zhí)行.env四項(xiàng)模型配置齊全首條腳本跑通并生成 HTML 報(bào)告adb devices能識(shí)別 Android 設(shè)備deviceId已寫入 YAMLWDA 已構(gòu)建啟動(dòng)ios.wdaPort默認(rèn) 8100可連通Chrome 擴(kuò)展已安裝橋接確認(rèn)窗可正常 Allow--concurrent按 CI 機(jī)器規(guī)格設(shè)置依賴順序的腳本保持concurrent: 1agent.cache.id已配置緩存文件已提交倉庫summary.json與各腳本 HTML 報(bào)告可正常打開歸檔【免費(fèi)下載鏈接】midsceneGUI Agent for E2E Testing項(xiàng)目地址: https://gitcode.com/GitHub_Trending/mid/midscene創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考