Midscene.js用自然語言做端到端 UI 測試最快 10 分鐘跑通【免費下載鏈接】midsceneGUI Agent for E2E Testing項目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是面向 E2E 測試的 GUI Agent它只靠截圖和多模態模型識別界面元素你寫自然語言指令它替你完成點擊、輸入、斷言和取數覆蓋瀏覽器、Android、iOS 和桌面應用。它解決什么問題適合誰大多數 UI 自動化依賴 DOM 選擇器一旦界面重構選擇器就失效純圖標按鈕、canvas 畫布、原生 App 里的控件對讀取 DOM 或無障礙樹的工具來說是看不見的。Midscene 換了一條路它把當前屏幕截圖交給具備 UI 定位能力的多模態模型如 Qwen、UI-TARS、Doubao-Seed 等也支持自托管開源模型人眼看得見的地方它就能定位和斷言還能校驗顏色、高亮、布局這類視覺狀態。它適合三類人需要維護 E2E 用例的測試工程師不想追著改選擇器做數據抓取和自動化腳本的開發者希望用一句話描述目標而不寫定位代碼以及需要驗證用戶實際看到什么的團隊。不適合的場景是暫時無法準備多模態模型 API 的情況它每一步都要調模型以及追求單次操作極致低延遲的高頻任務。第一次跑通4 步從零到報告 最短路徑是裝好倉庫、配好模型、寫一份 YAML、一條命令運行。第 1 步克隆倉庫并構建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build看到各包構建成功、packages/*/dist目錄生成即為通過。構建工具鏈要求 Node.js 20.19、22.12 或 24見 package.json 的engines字段。第 2 步準備多模態模型配置export MIDSCENE_MODEL_BASE_URL你的模型服務地址/v1 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAME模型名稱 export MIDSCENE_MODEL_FAMILY模型系列env | grep MIDSCENE能看到這四條變量即為成功。不同廠商模型的取值差異參考 模型配置文檔。第 3 步寫第一份 YAML 腳本page: url: https://www.bing.com tasks: - name: 搜索天氣 flow: - ai: 搜索 今日天氣 - sleep: 3000 - aiAssert: 結果顯示天氣信息保存為bing-search.yaml。ai是交互指令aiAssert是斷言都是自然語言。第 4 步運行并查看報告midscene ./bing-search.yaml終端出現Midscene - report file updated: .../midscene_run/report/xxx.html即為成功用瀏覽器打開這個 HTML能看到每一步的截圖、耗時和操作軌跡失敗步驟一目了然。核心能力逐個看 挑出四個對日常價值最大的能力按能做什么→怎么用→實際效果講。自然語言三件套交互、取數、斷言能做什么覆蓋操作、提取、校驗三類需求是全部平臺的統一 API。 怎么用在代碼里拿一個 Agent 實例后調用對應方法await agent.aiAct(點擊登錄按鈕); const items await agent.aiQuery{ name: string; price: number }[]( 頁面中的商品{name: string, price: number}[], ); await agent.aiAssert(頁面頂部顯示導航欄);實際效果aiAct會自動規劃并執行多步操作aiQuery直接返回結構化數據aiAssert用視覺判斷界面狀態。三者配合一條登錄流程或一次列表取數都不用寫選擇器。YAML 腳本 命令行運行器能做什么不搭測試框架也能跑完整流程Web、Android、iOS 換一下配置段即可。 怎么用page:/android:/ios:段描述目標tasks:段寫流程midscene 腳本.yaml直接執行也支持.env文件管理模型密鑰YAML 腳本運行器。 實際效果一份腳本跨平臺復用新人不用理解框架就能讀、改、跑。AI 規劃與定位緩存能做什么把 AI 規劃出的步驟和 Web 元素的定位信息存成緩存文件./midscene_run/cache命中時跳過模型調用。 怎么用給 Agent 配置cache: { id: my-cache-id }即默認讀寫模式CI 場景可用read-only策略并在測試通過后手動flushCache()。 實際效果官方文檔給出的示例中同一腳本執行耗時從 51 秒降到 28 秒模型調用次數同步下降。注意查詢類操作aiQuery、aiAssert永不緩存頁面結構變化時緩存自動失效并回退到模型重算詳見 緩存文檔。可視化執行報告能做什么每次運行生成獨立 HTML 報告含截圖時間線、每步耗時、成功/失敗標記。 怎么用默認開啟終端直接打印報告路徑接入 Playwright 時通過 reporter 可合并多個用例為一份報告。 實際效果排查失敗不用翻日志對著截圖時間線找那一步的現場即可。一個真實場景走一遍商品搜索與價格提取目標打開電商類頁面搜索關鍵詞等待結果加載提取商品標題和價格并斷言結果符合預期。步驟基于 Playwright 集成指南 的示例流程用 Playwright 啟動 Chromium 并打開目標頁面等頁面加載完成new PlaywrightAgent(page)創建 Agent——它就是頁面級的 Midscene 代理aiAct(type Headphones in search box, hit Enter)完成輸入搜索這一步不需要知道搜索框的選擇器aiWaitFor(there is at least one headphone item on page)用自然語言等待條件替代固定 sleep結果出來就繼續aiQuery({itemTitle: string, price: number}[])提取結構化商品列表aiBoolean(Is the price ... more than 1000?)做業務判斷aiAssert(There is a category filter on the left)校驗頁面布局。結果終端打印出商品標題、價格、價格區間判斷等字段報告文件里能看到從搜索框輸入到結果列表的完整截圖鏈。整個過程沒有一行 CSS 選擇器頁面改版后只要元素長得不一樣到認不出腳本才需要調整措辭。踩坑與解決?? 三個高頻問題每個都是現象→原因→解法。1. Android 設備識別不到adb devices 列表為空現象YAML 里配了deviceId運行報設備找不到。原因手機 USB 調試未開啟或連接后彈出的授權框沒有點允許。解法開發者選項中打開 USB 調試重新插線并在手機上確認允許調試再執行adb devices確認設備在列Android 平臺指南 有完整檢查清單。2. 下拉框點了沒反應截圖里看不到選項現象aiTap點了下拉框但報告截圖里沒有出現選項面板自然點不到目標項。原因頁面用的是原生select展開面板由操作系統渲染不在瀏覽器截圖范圍內。解法Midscene 默認開啟forceChromeSelectRendering強制由 Chrome 渲染下拉框使其進入截圖若你顯式關掉了它恢復為true即可。3. Ollama 本地模型返回 403現象Chrome Extension 或腳本里配 Ollama 時請求被拒。原因Ollama 默認不允許來自擴展/跨源地址的請求。解法設置環境變量OLLAMA_ORIGINS*后重啟 Ollama 再試。接下來去哪 跑通第一份腳本后按需求選方向深入想控制成本和提速精讀 緩存文檔學會read-only策略和 CI 緩存提交想接入已有測試體系看 Playwright 集成 和 Puppeteer 集成把aiAct系列方法塞進現有用例想擴展到手機端和桌面端分別對照 Android、iOS、HarmonyOS 指南準備設備環境同一套 API 不變想看每個方法的完整參數查 API 參考以及正在演進的新版 Test Runner。Midscene 的價值在于把定位元素這件事從你的職責里拿走你負責描述目標和預期它負責看屏幕、動手、留證。先用一條 YAML 腳本建立信心再逐步把緩存、報告和多平臺能力拼進自己的工作流即可。【免費下載鏈接】midsceneGUI Agent for E2E Testing項目地址: https://gitcode.com/GitHub_Trending/mid/midscene創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Midscene.js：用自然語言做端到端 UI 測試，最快 10 分鐘跑通
Midscene.js用自然語言做端到端 UI 測試最快 10 分鐘跑通【免費下載鏈接】midsceneGUI Agent for E2E Testing項目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是面向 E2E 測試的 GUI Agent它只靠截圖和多模態模型識別界面元素你寫自然語言指令它替你完成點擊、輸入、斷言和取數覆蓋瀏覽器、Android、iOS 和桌面應用。它解決什么問題適合誰大多數 UI 自動化依賴 DOM 選擇器一旦界面重構選擇器就失效純圖標按鈕、canvas 畫布、原生 App 里的控件對讀取 DOM 或無障礙樹的工具來說是看不見的。Midscene 換了一條路它把當前屏幕截圖交給具備 UI 定位能力的多模態模型如 Qwen、UI-TARS、Doubao-Seed 等也支持自托管開源模型人眼看得見的地方它就能定位和斷言還能校驗顏色、高亮、布局這類視覺狀態。它適合三類人需要維護 E2E 用例的測試工程師不想追著改選擇器做數據抓取和自動化腳本的開發者希望用一句話描述目標而不寫定位代碼以及需要驗證用戶實際看到什么的團隊。不適合的場景是暫時無法準備多模態模型 API 的情況它每一步都要調模型以及追求單次操作極致低延遲的高頻任務。第一次跑通4 步從零到報告 最短路徑是裝好倉庫、配好模型、寫一份 YAML、一條命令運行。第 1 步克隆倉庫并構建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build看到各包構建成功、packages/*/dist目錄生成即為通過。構建工具鏈要求 Node.js 20.19、22.12 或 24見 package.json 的engines字段。第 2 步準備多模態模型配置export MIDSCENE_MODEL_BASE_URL你的模型服務地址/v1 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAME模型名稱 export MIDSCENE_MODEL_FAMILY模型系列env | grep MIDSCENE能看到這四條變量即為成功。不同廠商模型的取值差異參考 模型配置文檔。第 3 步寫第一份 YAML 腳本page: url: https://www.bing.com tasks: - name: 搜索天氣 flow: - ai: 搜索 今日天氣 - sleep: 3000 - aiAssert: 結果顯示天氣信息保存為bing-search.yaml。ai是交互指令aiAssert是斷言都是自然語言。第 4 步運行并查看報告midscene ./bing-search.yaml終端出現Midscene - report file updated: .../midscene_run/report/xxx.html即為成功用瀏覽器打開這個 HTML能看到每一步的截圖、耗時和操作軌跡失敗步驟一目了然。核心能力逐個看 挑出四個對日常價值最大的能力按能做什么→怎么用→實際效果講。自然語言三件套交互、取數、斷言能做什么覆蓋操作、提取、校驗三類需求是全部平臺的統一 API。 怎么用在代碼里拿一個 Agent 實例后調用對應方法await agent.aiAct(點擊登錄按鈕); const items await agent.aiQuery{ name: string; price: number }[]( 頁面中的商品{name: string, price: number}[], ); await agent.aiAssert(頁面頂部顯示導航欄);實際效果aiAct會自動規劃并執行多步操作aiQuery直接返回結構化數據aiAssert用視覺判斷界面狀態。三者配合一條登錄流程或一次列表取數都不用寫選擇器。YAML 腳本 命令行運行器能做什么不搭測試框架也能跑完整流程Web、Android、iOS 換一下配置段即可。 怎么用page:/android:/ios:段描述目標tasks:段寫流程midscene 腳本.yaml直接執行也支持.env文件管理模型密鑰YAML 腳本運行器。 實際效果一份腳本跨平臺復用新人不用理解框架就能讀、改、跑。AI 規劃與定位緩存能做什么把 AI 規劃出的步驟和 Web 元素的定位信息存成緩存文件./midscene_run/cache命中時跳過模型調用。 怎么用給 Agent 配置cache: { id: my-cache-id }即默認讀寫模式CI 場景可用read-only策略并在測試通過后手動flushCache()。 實際效果官方文檔給出的示例中同一腳本執行耗時從 51 秒降到 28 秒模型調用次數同步下降。注意查詢類操作aiQuery、aiAssert永不緩存頁面結構變化時緩存自動失效并回退到模型重算詳見 緩存文檔。可視化執行報告能做什么每次運行生成獨立 HTML 報告含截圖時間線、每步耗時、成功/失敗標記。 怎么用默認開啟終端直接打印報告路徑接入 Playwright 時通過 reporter 可合并多個用例為一份報告。 實際效果排查失敗不用翻日志對著截圖時間線找那一步的現場即可。一個真實場景走一遍商品搜索與價格提取目標打開電商類頁面搜索關鍵詞等待結果加載提取商品標題和價格并斷言結果符合預期。步驟基于 Playwright 集成指南 的示例流程用 Playwright 啟動 Chromium 并打開目標頁面等頁面加載完成new PlaywrightAgent(page)創建 Agent——它就是頁面級的 Midscene 代理aiAct(type Headphones in search box, hit Enter)完成輸入搜索這一步不需要知道搜索框的選擇器aiWaitFor(there is at least one headphone item on page)用自然語言等待條件替代固定 sleep結果出來就繼續aiQuery({itemTitle: string, price: number}[])提取結構化商品列表aiBoolean(Is the price ... more than 1000?)做業務判斷aiAssert(There is a category filter on the left)校驗頁面布局。結果終端打印出商品標題、價格、價格區間判斷等字段報告文件里能看到從搜索框輸入到結果列表的完整截圖鏈。整個過程沒有一行 CSS 選擇器頁面改版后只要元素長得不一樣到認不出腳本才需要調整措辭。踩坑與解決?? 三個高頻問題每個都是現象→原因→解法。1. Android 設備識別不到adb devices 列表為空現象YAML 里配了deviceId運行報設備找不到。原因手機 USB 調試未開啟或連接后彈出的授權框沒有點允許。解法開發者選項中打開 USB 調試重新插線并在手機上確認允許調試再執行adb devices確認設備在列Android 平臺指南 有完整檢查清單。2. 下拉框點了沒反應截圖里看不到選項現象aiTap點了下拉框但報告截圖里沒有出現選項面板自然點不到目標項。原因頁面用的是原生select展開面板由操作系統渲染不在瀏覽器截圖范圍內。解法Midscene 默認開啟forceChromeSelectRendering強制由 Chrome 渲染下拉框使其進入截圖若你顯式關掉了它恢復為true即可。3. Ollama 本地模型返回 403現象Chrome Extension 或腳本里配 Ollama 時請求被拒。原因Ollama 默認不允許來自擴展/跨源地址的請求。解法設置環境變量OLLAMA_ORIGINS*后重啟 Ollama 再試。接下來去哪 跑通第一份腳本后按需求選方向深入想控制成本和提速精讀 緩存文檔學會read-only策略和 CI 緩存提交想接入已有測試體系看 Playwright 集成 和 Puppeteer 集成把aiAct系列方法塞進現有用例想擴展到手機端和桌面端分別對照 Android、iOS、HarmonyOS 指南準備設備環境同一套 API 不變想看每個方法的完整參數查 API 參考以及正在演進的新版 Test Runner。Midscene 的價值在于把定位元素這件事從你的職責里拿走你負責描述目標和預期它負責看屏幕、動手、留證。先用一條 YAML 腳本建立信心再逐步把緩存、報告和多平臺能力拼進自己的工作流即可。【免費下載鏈接】midsceneGUI Agent for E2E Testing項目地址: https://gitcode.com/GitHub_Trending/mid/midscene創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考