完所有按鈕：Midscene.js 視覺自動(dòng)化實(shí)戰(zhàn)指南)
10 分鐘讓 AI 替你點(diǎn)完所有按鈕Midscene.js 視覺自動(dòng)化實(shí)戰(zhàn)指南【免費(fèi)下載鏈接】midsceneGUI Agent for E2E Testing項(xiàng)目地址: https://gitcode.com/GitHub_Trending/mid/midscene早上 8 點(diǎn)小明的電腦準(zhǔn)時(shí)開機(jī)。接下來他要登錄 3 個(gè)內(nèi)部系統(tǒng)填 5 張格式幾乎一樣的表單再逐頁(yè)核對(duì) 10 個(gè)網(wǎng)頁(yè)的數(shù)據(jù)有沒有更新。這套動(dòng)作他干了三年每天至少 2 小時(shí)雷打不動(dòng)。直到他發(fā)現(xiàn)了一個(gè)叫 Midscene.js 的開源項(xiàng)目——他把這些重復(fù)步驟寫成自然語言AI 就照著屏幕一步一步替他點(diǎn)完了。你不需要會(huì)寫復(fù)雜的自動(dòng)化腳本也不需要死磕 CSS 選擇器用大白話告訴它點(diǎn)什么、填什么、檢查什么它就會(huì)像人一樣看著屏幕去操作。1 分鐘搞懂Midscene.js 是什么Midscene.js 是一個(gè)開源的 GUI Agent圖形界面智能體專為端到端E2E測(cè)試和界面自動(dòng)化而設(shè)計(jì)。你用自然語言描述任務(wù)和預(yù)期結(jié)果它基于截圖理解當(dāng)前界面自己找到按鈕、輸入框的位置完成點(diǎn)擊、輸入、滾動(dòng)等操作再用視覺方式驗(yàn)證結(jié)果是否符合預(yù)期。寫自動(dòng)化腳本的開發(fā)者把它接進(jìn) Playwright / Puppeteer補(bǔ)上傳統(tǒng)工具夠不著的視覺能力做 E2E 測(cè)試的工程師用一套 API 覆蓋 Web、Android、iOS、HarmonyOS 和桌面端非技術(shù)背景、只想消滅重復(fù)點(diǎn)擊的普通用戶用它的 Chrome 擴(kuò)展或 Playground零代碼體驗(yàn)它憑什么比傳統(tǒng)自動(dòng)化省事用過 Playwright 或 Selenium 的人都熟悉那種痛今天還好好的明天前端一改版#search-box找不到了整條腳本跟著報(bào)廢。你有沒有過半夜爬起來修選擇器的經(jīng)歷Midscene.js 的思路完全不同它不看 DOM只看屏幕。就像人用軟件一樣——先觀察屏幕長(zhǎng)什么樣再?zèng)Q定點(diǎn)哪里、輸什么最后檢查界面呈現(xiàn)的結(jié)果。純圖標(biāo)按鈕、canvas繪制的內(nèi)容、跨域 iframe這些選擇器夠不著的地方它照樣能定位。對(duì)比維度傳統(tǒng)自動(dòng)化Playwright/SeleniumMidscene.js學(xué)習(xí)成本需要掌握選擇器、DOM 結(jié)構(gòu)、測(cè)試框架寫自然語言指令即可維護(hù)成本界面改版后選擇器失效需逐條重寫按元素外觀定位界面微調(diào)后多數(shù)情況仍能識(shí)別覆蓋范圍以 DOM 元素為主canvas、原生 App 基本無解Web、Android、iOS、HarmonyOS、桌面端一套 API 全平臺(tái)斷言方式查 DOM 屬性和文本直接看界面顏色、高亮、布局都能驗(yàn)證省掉的是選擇器維護(hù)的持續(xù)開銷多出來的是對(duì)用戶真正看到的效果的驗(yàn)證能力——DOM 里寫了什么不重要用戶屏幕上看到什么才重要。3 步跑通你的第一個(gè)腳本動(dòng)手前先確認(rèn)一件事Midscene.js 依賴多模態(tài)模型你需要準(zhǔn)備一個(gè)有 UI 理解能力的模型服務(wù)。以豆包為例設(shè)置 4 個(gè)環(huán)境變量即可千問、GLM、Gemini 等也支持# 配置模型服務(wù)替換為你的 API Key export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed第二步寫一個(gè)腳本demo.tsimport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框輸入 Headphones 并回車搜索); // 一句話完成操作 // ...其余查詢步驟同理第三步運(yùn)行它npx tsx demo.ts你會(huì)看到什么終端打印出搜索到的商品標(biāo)題和價(jià)格列表運(yùn)行結(jié)束后控制臺(tái)輸出報(bào)告路徑瀏覽器打開那個(gè) HTML 文件每一步的截圖、AI 的決策過程和耗時(shí)都躺在里面像一份帶圖的操作回放。如果你完全不想寫代碼也可以先裝它的 Chrome 擴(kuò)展打開任意網(wǎng)頁(yè)在右側(cè) Midscene 側(cè)邊欄輸入點(diǎn)擊登錄按鈕或提取頁(yè)面中的商品直接看效果。4 個(gè)值得知道的核心能力一句話指揮多步流程aiAct傳統(tǒng)寫法里輸入關(guān)鍵詞 點(diǎn)搜索是兩行代碼Midscene.js 里是一句自然語言await agent.aiAct(搜索耳機(jī)然后把結(jié)果篩選為價(jià)格低于 100 美元);AI 自己拆解步驟、執(zhí)行、糾錯(cuò)。指令越具體越穩(wěn)比如點(diǎn)擊右上角藍(lán)色登錄按鈕比登錄更好用。用眼睛寫斷言aiAssertawait agent.aiAssert(選中的套餐帶有藍(lán)色邊框和勾選標(biāo)記); await agent.aiAssert(郵箱輸入框下方顯示了錯(cuò)誤提示);驗(yàn)證的是用戶真實(shí)看到的樣子顏色、高亮、布局都能檢查canvas和原生應(yīng)用界面同樣適用。一套 API 跑遍五個(gè)平臺(tái)Web、Android、iOS、HarmonyOS、桌面端共用同一套方法名。比如控制手機(jī)import { AndroidAgent } from midscene/android; const agent new AndroidAgent(device); await agent.aiAct(打開應(yīng)用商店搜索微信并安裝);重復(fù)執(zhí)行自動(dòng)加速緩存同樣的任務(wù)指令在相似的頁(yè)面上重復(fù)跑時(shí)Midscene.js 會(huì)復(fù)用已緩存的 AI 規(guī)劃和元素定位官方示例里執(zhí)行耗時(shí)從 51 秒降到了 28 秒。創(chuàng)建 Agent 時(shí)加一個(gè)配置就能開啟const agent new PlaywrightAgent(page, { cache: { id: my-cache-id } });緩存失效時(shí)會(huì)自動(dòng)回退到 AI 重新分析不用你操心失效邏輯。拿它干過什么三個(gè)真實(shí)場(chǎng)景場(chǎng)景一每天盯 5 個(gè)商品的價(jià)格你遇到的情況每天花 20 分鐘在 5 個(gè)電商頁(yè)面之間來回切換看價(jià)格有沒有變化。你寫了一段什么const items await agent.aiQuery( {name: string, price: number}[], 找出頁(yè)面中的商品和價(jià)格, );結(jié)果是什么items直接返回結(jié)構(gòu)化的商品名和價(jià)格數(shù)組循環(huán) 5 個(gè)頁(yè)面就能湊齊一份比價(jià)清單全程不需要一行選擇器。場(chǎng)景二驗(yàn)證篩選功能真的生效了嗎你遇到的情況E2E 測(cè)試?yán)顳OM 顯示篩選條件已選中但用戶屏幕上列表還是舊數(shù)據(jù)。你寫了一行什么await agent.aiAssert(搜索結(jié)果中每件商品價(jià)格都低于 100 美元)。結(jié)果是什么斷言基于截圖做判斷用戶看到什么就驗(yàn)證什么視覺層的問題第一次變得可測(cè)。場(chǎng)景三手機(jī) App 的兼容性走查你遇到的情況新 App 要在 3 臺(tái) Android 機(jī)型上跑同一套冒煙用例手動(dòng)點(diǎn)點(diǎn)點(diǎn)一天就沒了。你寫了一段什么adb devices -l確認(rèn)設(shè)備在線后用AndroidAgent對(duì)每臺(tái)設(shè)備執(zhí)行打開應(yīng)用商店搜索微信并安裝這類指令。結(jié)果是什么同一份指令跑遍所有設(shè)備每臺(tái)的執(zhí)行情況都記錄在 HTML 報(bào)告里對(duì)比一目了然。踩坑快查3 個(gè)高頻問題模型配置不對(duì)腳本起不來確認(rèn) 4 個(gè)MIDSCENE_MODEL_*環(huán)境變量都設(shè)置了模型要選有視覺理解能力的多模態(tài)模型而不是純文本模型。AI 沒找到界面元素先打開 HTML 報(bào)告看當(dāng)時(shí)的截圖——頁(yè)面沒加載完、彈窗遮擋、截圖模糊是三大元兇再試試把指令寫得更具體比如加上顏色和位置描述。Android 設(shè)備連不上跑一下adb devices -l確認(rèn)設(shè)備在線設(shè)備上彈出的授權(quán)提示要點(diǎn)擊允許仍不行就重新插拔 USB 或重啟 adb 服務(wù)。接下來怎么走建議按這個(gè)順序上手先裝 Chrome 擴(kuò)展玩十分鐘找到自然語言能指揮界面的手感再回到3 步跑通那節(jié)把第一個(gè)腳本跑起來之后按需深入——要接測(cè)試體系就看 Playwright 集成文檔要操作手機(jī)就看 Android 指南。項(xiàng)目文檔的快速開始和API 參考是入口遇到問題可以在項(xiàng)目的 Discord 社區(qū)提問或者直接在倉(cāng)庫(kù)提交 issue?；氐叫∶髂?2 小時(shí)的早晨?，F(xiàn)在 3 個(gè)系統(tǒng)、5 張表單、10 個(gè)網(wǎng)頁(yè)都躺在一份腳本里他只需要看一眼運(yùn)行報(bào)告。你的那份重復(fù)勞動(dòng)清單今天就可以開始寫第一條指令了。【免費(fèi)下載鏈接】midsceneGUI Agent for E2E Testing項(xiàng)目地址: https://gitcode.com/GitHub_Trending/mid/midscene創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 10 分鐘讓 AI 替你點(diǎn)完所有按鈕：Midscene.js 視覺自動(dòng)化實(shí)戰(zhàn)指南
10 分鐘讓 AI 替你點(diǎn)完所有按鈕Midscene.js 視覺自動(dòng)化實(shí)戰(zhàn)指南【免費(fèi)下載鏈接】midsceneGUI Agent for E2E Testing項(xiàng)目地址: https://gitcode.com/GitHub_Trending/mid/midscene早上 8 點(diǎn)小明的電腦準(zhǔn)時(shí)開機(jī)。接下來他要登錄 3 個(gè)內(nèi)部系統(tǒng)填 5 張格式幾乎一樣的表單再逐頁(yè)核對(duì) 10 個(gè)網(wǎng)頁(yè)的數(shù)據(jù)有沒有更新。這套動(dòng)作他干了三年每天至少 2 小時(shí)雷打不動(dòng)。直到他發(fā)現(xiàn)了一個(gè)叫 Midscene.js 的開源項(xiàng)目——他把這些重復(fù)步驟寫成自然語言AI 就照著屏幕一步一步替他點(diǎn)完了。你不需要會(huì)寫復(fù)雜的自動(dòng)化腳本也不需要死磕 CSS 選擇器用大白話告訴它點(diǎn)什么、填什么、檢查什么它就會(huì)像人一樣看著屏幕去操作。1 分鐘搞懂Midscene.js 是什么Midscene.js 是一個(gè)開源的 GUI Agent圖形界面智能體專為端到端E2E測(cè)試和界面自動(dòng)化而設(shè)計(jì)。你用自然語言描述任務(wù)和預(yù)期結(jié)果它基于截圖理解當(dāng)前界面自己找到按鈕、輸入框的位置完成點(diǎn)擊、輸入、滾動(dòng)等操作再用視覺方式驗(yàn)證結(jié)果是否符合預(yù)期。寫自動(dòng)化腳本的開發(fā)者把它接進(jìn) Playwright / Puppeteer補(bǔ)上傳統(tǒng)工具夠不著的視覺能力做 E2E 測(cè)試的工程師用一套 API 覆蓋 Web、Android、iOS、HarmonyOS 和桌面端非技術(shù)背景、只想消滅重復(fù)點(diǎn)擊的普通用戶用它的 Chrome 擴(kuò)展或 Playground零代碼體驗(yàn)它憑什么比傳統(tǒng)自動(dòng)化省事用過 Playwright 或 Selenium 的人都熟悉那種痛今天還好好的明天前端一改版#search-box找不到了整條腳本跟著報(bào)廢。你有沒有過半夜爬起來修選擇器的經(jīng)歷Midscene.js 的思路完全不同它不看 DOM只看屏幕。就像人用軟件一樣——先觀察屏幕長(zhǎng)什么樣再?zèng)Q定點(diǎn)哪里、輸什么最后檢查界面呈現(xiàn)的結(jié)果。純圖標(biāo)按鈕、canvas繪制的內(nèi)容、跨域 iframe這些選擇器夠不著的地方它照樣能定位。對(duì)比維度傳統(tǒng)自動(dòng)化Playwright/SeleniumMidscene.js學(xué)習(xí)成本需要掌握選擇器、DOM 結(jié)構(gòu)、測(cè)試框架寫自然語言指令即可維護(hù)成本界面改版后選擇器失效需逐條重寫按元素外觀定位界面微調(diào)后多數(shù)情況仍能識(shí)別覆蓋范圍以 DOM 元素為主canvas、原生 App 基本無解Web、Android、iOS、HarmonyOS、桌面端一套 API 全平臺(tái)斷言方式查 DOM 屬性和文本直接看界面顏色、高亮、布局都能驗(yàn)證省掉的是選擇器維護(hù)的持續(xù)開銷多出來的是對(duì)用戶真正看到的效果的驗(yàn)證能力——DOM 里寫了什么不重要用戶屏幕上看到什么才重要。3 步跑通你的第一個(gè)腳本動(dòng)手前先確認(rèn)一件事Midscene.js 依賴多模態(tài)模型你需要準(zhǔn)備一個(gè)有 UI 理解能力的模型服務(wù)。以豆包為例設(shè)置 4 個(gè)環(huán)境變量即可千問、GLM、Gemini 等也支持# 配置模型服務(wù)替換為你的 API Key export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed第二步寫一個(gè)腳本demo.tsimport { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch(); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(在搜索框輸入 Headphones 并回車搜索); // 一句話完成操作 // ...其余查詢步驟同理第三步運(yùn)行它npx tsx demo.ts你會(huì)看到什么終端打印出搜索到的商品標(biāo)題和價(jià)格列表運(yùn)行結(jié)束后控制臺(tái)輸出報(bào)告路徑瀏覽器打開那個(gè) HTML 文件每一步的截圖、AI 的決策過程和耗時(shí)都躺在里面像一份帶圖的操作回放。如果你完全不想寫代碼也可以先裝它的 Chrome 擴(kuò)展打開任意網(wǎng)頁(yè)在右側(cè) Midscene 側(cè)邊欄輸入點(diǎn)擊登錄按鈕或提取頁(yè)面中的商品直接看效果。4 個(gè)值得知道的核心能力一句話指揮多步流程aiAct傳統(tǒng)寫法里輸入關(guān)鍵詞 點(diǎn)搜索是兩行代碼Midscene.js 里是一句自然語言await agent.aiAct(搜索耳機(jī)然后把結(jié)果篩選為價(jià)格低于 100 美元);AI 自己拆解步驟、執(zhí)行、糾錯(cuò)。指令越具體越穩(wěn)比如點(diǎn)擊右上角藍(lán)色登錄按鈕比登錄更好用。用眼睛寫斷言aiAssertawait agent.aiAssert(選中的套餐帶有藍(lán)色邊框和勾選標(biāo)記); await agent.aiAssert(郵箱輸入框下方顯示了錯(cuò)誤提示);驗(yàn)證的是用戶真實(shí)看到的樣子顏色、高亮、布局都能檢查canvas和原生應(yīng)用界面同樣適用。一套 API 跑遍五個(gè)平臺(tái)Web、Android、iOS、HarmonyOS、桌面端共用同一套方法名。比如控制手機(jī)import { AndroidAgent } from midscene/android; const agent new AndroidAgent(device); await agent.aiAct(打開應(yīng)用商店搜索微信并安裝);重復(fù)執(zhí)行自動(dòng)加速緩存同樣的任務(wù)指令在相似的頁(yè)面上重復(fù)跑時(shí)Midscene.js 會(huì)復(fù)用已緩存的 AI 規(guī)劃和元素定位官方示例里執(zhí)行耗時(shí)從 51 秒降到了 28 秒。創(chuàng)建 Agent 時(shí)加一個(gè)配置就能開啟const agent new PlaywrightAgent(page, { cache: { id: my-cache-id } });緩存失效時(shí)會(huì)自動(dòng)回退到 AI 重新分析不用你操心失效邏輯。拿它干過什么三個(gè)真實(shí)場(chǎng)景場(chǎng)景一每天盯 5 個(gè)商品的價(jià)格你遇到的情況每天花 20 分鐘在 5 個(gè)電商頁(yè)面之間來回切換看價(jià)格有沒有變化。你寫了一段什么const items await agent.aiQuery( {name: string, price: number}[], 找出頁(yè)面中的商品和價(jià)格, );結(jié)果是什么items直接返回結(jié)構(gòu)化的商品名和價(jià)格數(shù)組循環(huán) 5 個(gè)頁(yè)面就能湊齊一份比價(jià)清單全程不需要一行選擇器。場(chǎng)景二驗(yàn)證篩選功能真的生效了嗎你遇到的情況E2E 測(cè)試?yán)顳OM 顯示篩選條件已選中但用戶屏幕上列表還是舊數(shù)據(jù)。你寫了一行什么await agent.aiAssert(搜索結(jié)果中每件商品價(jià)格都低于 100 美元)。結(jié)果是什么斷言基于截圖做判斷用戶看到什么就驗(yàn)證什么視覺層的問題第一次變得可測(cè)。場(chǎng)景三手機(jī) App 的兼容性走查你遇到的情況新 App 要在 3 臺(tái) Android 機(jī)型上跑同一套冒煙用例手動(dòng)點(diǎn)點(diǎn)點(diǎn)一天就沒了。你寫了一段什么adb devices -l確認(rèn)設(shè)備在線后用AndroidAgent對(duì)每臺(tái)設(shè)備執(zhí)行打開應(yīng)用商店搜索微信并安裝這類指令。結(jié)果是什么同一份指令跑遍所有設(shè)備每臺(tái)的執(zhí)行情況都記錄在 HTML 報(bào)告里對(duì)比一目了然。踩坑快查3 個(gè)高頻問題模型配置不對(duì)腳本起不來確認(rèn) 4 個(gè)MIDSCENE_MODEL_*環(huán)境變量都設(shè)置了模型要選有視覺理解能力的多模態(tài)模型而不是純文本模型。AI 沒找到界面元素先打開 HTML 報(bào)告看當(dāng)時(shí)的截圖——頁(yè)面沒加載完、彈窗遮擋、截圖模糊是三大元兇再試試把指令寫得更具體比如加上顏色和位置描述。Android 設(shè)備連不上跑一下adb devices -l確認(rèn)設(shè)備在線設(shè)備上彈出的授權(quán)提示要點(diǎn)擊允許仍不行就重新插拔 USB 或重啟 adb 服務(wù)。接下來怎么走建議按這個(gè)順序上手先裝 Chrome 擴(kuò)展玩十分鐘找到自然語言能指揮界面的手感再回到3 步跑通那節(jié)把第一個(gè)腳本跑起來之后按需深入——要接測(cè)試體系就看 Playwright 集成文檔要操作手機(jī)就看 Android 指南。項(xiàng)目文檔的快速開始和API 參考是入口遇到問題可以在項(xiàng)目的 Discord 社區(qū)提問或者直接在倉(cāng)庫(kù)提交 issue?；氐叫∶髂?2 小時(shí)的早晨?，F(xiàn)在 3 個(gè)系統(tǒng)、5 張表單、10 個(gè)網(wǎng)頁(yè)都躺在一份腳本里他只需要看一眼運(yùn)行報(bào)告。你的那份重復(fù)勞動(dòng)清單今天就可以開始寫第一條指令了。【免費(fèi)下載鏈接】midsceneGUI Agent for E2E Testing項(xiàng)目地址: https://gitcode.com/GitHub_Trending/mid/midscene創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考