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