Midscene.js 是由字節跳動 Web Infra 團隊全新開源的 UI 自動化工具。通過引入多模態 AI 推理能力，Midscene.js 將幫助開發者打破傳統 UI 自動化難於編寫和維護的困境。本文由字節跳動 Web Infra Al 負責人茅曉鋒於阿里巴巴第十九屆 D2 終端技術大會演講實錄整理而成。
- 項目網站：https://midscenejs.com/
- 開源倉庫：https://github.com/web-infra-dev/midscene
一、起源：AI 大模型與 UI 自動化
1.1 AI x UI 自動化的典型 Demo
首先，我們通過一個 Demo 展示AI操作的UI自動化這個概念。在這個過程中，你能夠觀察到AI是如何一步一步思考的。它首先完成深入的分析，然後開始在界面上執行操作。接着，AI將一個一個地篩選界面中的元素。例如，它會決定複製哪個字段，並識別出哪些字段位於左側，以及它們在右側表單中的對應位置。所有步驟完整無誤後，整個流程就此完成。
https://www.bilibili.com/video/BV1gXXPYBECP/?aid=114192694643...
視頻摘錄 - Claude Computer-use
在演示中，我們看到人工智能能夠高效地控制計算機操作。國際上，許多知名廠商正在開發相關產品，大家熟悉的如 Computer Use 以及不久前 OpenAI 發佈的 Operator，還有最近備受關注的 Manus。這些產品展現了人工智能在計算機操作中的廣泛應用。如今，人工智能似乎已成為每個工具中不可或缺的特性。
1.2 大模型與 UI 自動化
在當前的技術領域中，有許多模型致力於識別用户界面（UI）上的元素，幫助用户清晰地識別哪些元素是可交互的以及它們的功能特性。
例如，蘋果公司的 Ferret UI 和微軟近期發佈的 OminParser V2 版本，這些都是大模型產品，以提高用户界面的交互性和可操作性。此外，在 SDK 產品方面，我們開發了 Midscene.js，而在開源社區中，Browser Use 相當活躍。這些都是類型豐富的 SDK 產品。例如，字節跳動公司推出的 UI-TARS，是一個開源模型，用來支持圖形用户界面（GUI）代理的開發，它能夠在執行自動規劃，以及將一些工作流程有效落地方面提供幫助。
產品形態多種多樣，有的表現為技術論文，有的是模型，還有 SDK，既有商業化的產品，也有開源的和閉源的項目，以及收費與免費的選擇。總體而言，這一領域的產品和技術非常豐富且活躍，為用户提供了廣泛多樣的選擇。
- 廠商範圍大：OpenAI, Microsoft, Anthoropic...
- 產品領域廣：論文、模型、SDK、應用產品...
- 落地路徑豐富：開源、商業化、App、SaaS、雲...
1.3 Web 自動化向 AI 轉型
我們自然會想，既然用户界面（UI）自動化看似已經相當成熟，那麼我們是否可以將其切實應用到我們的日常工作中呢？尤其是，Web 界面的 UI 能否實現自動化？答案是肯定的。在這方面，我們進行了深入的推演。首先，我們需要了解傳統的 Web UI 自動化存在哪些問題。傳統的 Web UI 自動化主要依賴於 Selector API，即大家熟悉的 ID 選擇器、類選擇器和 Xpath 等。這些是傳統 Web 自動化的核心方法。而對於那些熟悉 Web UI 自動化的同事來説，其中最大的挑戰在於測試代碼和業務代碼的深度耦合。這種耦合性會在系統維護中帶來很大困擾。尤其是，當業務代碼經歷重構後，自動化用例可能就無法正常執行了。
這就討論到一個非常有意思的話題：測試的存在主要是為了保障重構後的質量。然而，在界面重構之後測試偏偏可能無法正常運行，這顯然是一個不合理的情況。更值得注意的問題是，許多開發人員對測試並不熟悉，因為他們認為測試的投資回報率（ROI）太低，所以缺乏書寫測試用例的動力。但事實上，測試在軟件開發領域中佔據着非常大的市場份額，因為每一個軟件都需要進行測試。那麼，在這種情況下，我們該如何解決這些問題呢？我們進行了一些推演，在 AI 驅動下，UI 自動化測試將會發生一些變化。首先，我們可以基於整個界面進行理解。我們的測試用例更應該以自然語言進行表述，這是一個更為合理的方法，這也是 AI 時代的常用交互。其次，這種方法使測試與我們的業務代碼解耦。我編寫的是自然語言指令，是在對界面的理解基礎上進行操作，這樣就與代碼完全解耦了。由此，測試的可維護性自然得到了提升。一旦這些問題得到了解決，我們的研發體驗必定會得到一個劃時代的提升，因此，這個推演是非常順其自然的發展趨勢。
我們需要更加具體、務實地探討一下，在完成 AI 轉型之後，UI 自動化具體會是什麼樣子。這可能是大家比較關注的一個方面。在這裏，我準備了四個視頻給大家分享。我們使用了一個名為 Shadcn 的 Vercel 組件庫，這是個比較網紅的組件庫。
https://www.bilibili.com/video/BV1gXXPYBEBq/?aid=114192694643...
Shadcn / Data Table
https://www.bilibili.com/video/BV14nXPY8ENu/?aid=114192711419...
Shadcn / Data Picker
https://www.bilibili.com/video/BV1xnXPY8Eqy/?aid=114192711421...
Shadcn / Drawer
https://www.bilibili.com/video/BV1xnXPY8EDd/?aid=114192711420...
Shadcn / Dropdown
我們在很多中後台的測試場景中，需要對一些複雜的表單控件進行精確控制，例如日曆、彈出窗口和數據表格等。在這些需要複雜操作的場景中，如果我們使用 AI 進行驅動，就可以實現類似於今天我們在屏幕上看到的視頻效果。在操作中，例如可以選擇一個特定的日期並完成表單處理，這就是實現自動化的一個具體應用。從實際效果來看，我們基本上已經能夠達到預期的演示效果。我很高興地告訴大家，剛才展示的幾個演示實際上都是利用 Midscene.js 來實現的。這是我們已經開源的一個 SDK，它的主要作用就是在 AI 驅動下實現 UI 自動化。
二、Midscene.js : AI 驅動的 UI 自動化
2.1 三個核心接口
接下來，我將為大家詳細介紹我們 SDK 的一些具體內容。
首先，我會從它的三個接口開始介紹。在這一年的時間裏，我們只寫了三個核心接口。
核心接口（1/3）——執行交互 Action
第一個接口是 Action，是執行交互。在下面的 Demo 視頻中：我們要求在搜索引擎中輸入關鍵詞“AI 101”，然後點擊搜索並稍作等待，並點擊第三條搜索結果。我們通過瀏覽器的插件發送這個指令，AI 將按照步驟逐一執行，首先將內容輸入到搜索框中，然後調用相關模型，思考下一步的操作。在進入下一個界面後，AI 會點擊頁面中的搜索結果，這樣操作就完成了。
輸入完整的提示詞：“輸入 AI 101，點擊搜索，等待，點擊第三條結果”。其中提到“輸入什麼”、“點擊什麼”、“等待再點擊什麼”。這種模式我們稱之為“步驟驅動”，即你需要一步一步地指導 AI 完成任務。
https://www.bilibili.com/video/BV14nXPY8EPf/?aid=114192711419...
接下來，我想介紹另一種方法，叫做“目標驅動”，這是一個更高階、更接近 AI 自主操作的模式。例如，現在我們要求 AI 打開 Twitter 併發布一條信息，內容是“this is the Tweet from Midscene.js”。AI 首先在當前的 Google 界面中找到 Twitter 的位置，然後將 Twitter 打開。一旦進入 Twitter，AI 就知道如何發佈推文，會自動將內容輸入到頂部的輸入框中，最後點擊“發佈”。這樣，信息就成功發佈了。這整個交互過程被稱為“目標驅動”，與剛才提到的“步驟驅動”有本質的區別。相信通過這個例子，大家能夠清楚地看到，這條推文已經成功發佈了。以上是我們所討論的第一個交互接口。
目標驅動示例提示詞：Open twitter and post a tweet, "this is a tweet from Midscene.js"
https://www.bilibili.com/video/BV14nXPY8Eae/?aid=114192711418...
核心接口（2/3）——數據提取 Query
第二個接口是數據提取接口。在這個過程中，我們通過 AI 來幫助理解用户的操作界面。當獲取到界面後，再將需要理解的內容以 JSON 形式返回給使用者。舉個例子，比如在一個搜索結果頁面上，我們告訴 AI 我們需要幾條搜索結果的標題，那麼在界面的最右邊，你會看到這些標題已經以 JSON 的格式返回給我們了。這正是 AI 賦予我們的能力。有同學可能會問，如果我們的需求是不斷變化的，這個格式應該如何定義呢？AI 到底以什麼樣的形式返回數據給我們呢？這個問題實際上體現了 AI 強大的理解能力。格式也是可以在你的指令裏定義的。當前最右邊的這個格式實際上是通過我們的指令生成的。例如，我們需要一個對象，數組對象裏有一個鍵叫 title，那麼只需要在指令裏寫明這些要求，AI 就會按照指令將所有的數據返回給你。對於我們的工程師來説，當你獲得 JSON 數據後，接下來的工作就會順暢許多。這就是數據提取接口的核心功能。
- 舉例：搜索結果列表，{title: string}[]
核心接口（3/3）——斷言 Assert
第三個接口是斷言，斷言在測試中是一個非常常見的場景。我要知道當前頁面的表現是否符合我的需求。比如説，在搜索結果頁中，我們告訴 AI 這是 Midscene.js 的 Github 主頁。然後 AI 進行斷言，結果是 false。AI 理解到這只是一個搜索結果頁，而不是 Github，因此斷言未通過。這種結果在測試中是非常實用的。我們在核心的時間裏經過一年努力，開發了三大 AI 接口：一個是 action，一個是 query，一個是 assert。基本上，核心場景已經全部能夠覆蓋。
理解界面，執行斷言。舉例：這是 Midscene.js 的 Github 頁面
我們應該從哪裏開始體驗呢？我想介紹我們的瀏覽器插件，你可以在 Chrome 的擴展商店中找到。利用這個插件，你可以在任何網站上運行 Midscene。
Midscene.js 瀏覽器插件
https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief
舉個例子，如果你有一箇中後台頁面，或者你在自己公司內部的業務中有什麼特殊需求，你可能會擔心 Midscene.js 是否能夠正常運行。在這種情況下，你只需通過瀏覽器插件，無需編寫任何代碼，就可以通過寫指令來運行這些交互。這樣，你可以先實際體驗這個 SDK，看看它是否能夠滿足你的需求。這是一種非常方便的體驗方式。這個插件目前的用户數接近 1 萬，非常受歡迎。
2.2 Javascript SDK
我們還提供了 Javascript SDK。Midscene.js SDK 可以與 Puppeteer 和 Playwright 相結合，運行前面提到的接口。屏幕上展示了我們的 SDK 樣例代碼，接口的輸入參數都是自然語言。你可以通過 agent.aiAction 來指示具體操作。同樣地，對於 Query，也只需要將你的需求以自然語言形式傳入，整個 Javascript 代碼便能與頁面中的內容進行交互。當代碼數量增加時，我們發現，vscode 屏幕上顯示的幾乎都是中文，這應該是 AI 時代的一種特色吧。
2.3 Yaml 格式自動化腳本
我們還有一種格式叫做 Yaml 格式自動化腳本。我們可以使用 Yaml 來定義流程，並對其進行編排，就像將 CI 流程進行定義和編排一樣。通過這種方式，整個過程會顯得更加清晰。此外，我們還可以通過命令行來驅動它。比如，對於一些代碼庫的編譯需求，編譯完成後，你可能想運行代碼進行查看，確認是否出現白屏，或者檢查某個按鈕是否出現，點擊按鈕後是否會彈出框。這類簡單需求無需搭建 Playwright 工程或測試工程，只需編寫一個 Yaml 文件，然後運行一條命令，將其放入 CI 系統中即可完成整個任務。這是一個非常實用的場景。另一個實用場景是，通過 JavaScript 驅動 Yaml。我們知道在場的許多同學可能是工具類、平台類的開發者。當你需要與用户交互時，使用一個 Yaml 文件交流是最低成本的，整個流程也更容易控制。總之，Yaml 格式的自動化腳本是一種維護起來相對簡單的形式。
還有這份測試報告，在報告中可以看到整個運行過程的回放，展示 AI 是如何一步步完成任務的，幫助你調試整個運行流程。在最後的環節中，我們也會對此進行詳細講解。
2.4 更多特性
另外，還有一些小特性值得關注。其中一個叫做 aiWaitFor，從字面上理解就是讓 AI 幫你進行等待操作，比如等待界面加載完成或者等到某個元素出現。此外，還有橋接模式，幫助大家使用桌面 Chrome 進行交互處理，比如處理登錄驗證碼時，使用橋接模式是最方便的。我們還支持 Langsmith 。如果你需要調試 Midscene.js 和模型之間的信息，使用某些 Langsmith 插件會非常方便。
最後，讓我們總結一下我們產品的一些信息。我們的官網是 midscenejs.com。如果你想開始體驗，我們建議從瀏覽器插件入手。接下來，可能需要準備一些 AI 的基礎設施，例如開通一些 AI 的服務。對於數據安全問題，可以諮詢公司的數據安全同事。然後，你可以開始編寫腳本。當腳本一切就緒後，連接核心流程和 CI 巡檢。一旦這些流程順利運行，你就應該能夠對整個體系有一個完整的瞭解。
三、原理與模型
3.1 模型的關鍵特性
下面讓我具體談談在這方面的一些原理和模型的話題。我們把 AI 操作界面這件事情拆分開來看，其實話題並沒有那麼複雜。就像把大象放進冰箱一樣簡單。第一步需要具備 OCR 的能力，即理解界面。接着，需要有控件定位的能力，也就是找到需要操作的元素。還有一種能力叫做交互理解，指的是瞭解如何與這個元素進行交互，知道你的動作是拖動、點擊還是滑動。最後一部分是步驟規劃的能力。
在當前階段，Midscene.js 並不提供自有的模型，我們使用的是業界較為易得的一些模型。我們的定位更像是一個工程產品，而工程產品最核心要關注的是控件定位和交互理解這兩個方面。我們會首先致力於以最佳形式完成這兩部分的完整交互流程。
3.2 核心流程
首先，我會向大家展示一下這個過程中最核心的流程。第一步是規劃，也就是 Planning。當用户向你提供了一項自然語言的 AI 任務時，我們需要首先給出一個結論，即第一步的動作應該做什麼。接下來的兩步是定位和交互。在規劃之後，我們需要人工智能告訴我們該如何進行。例如，如果今天我們要定位一個表單的提交按鈕，那麼這個提交按鈕究竟在哪裏？人工智能會為我們提供一個精確的定位。之後，通過一些工程代碼，我們會執行這個定位後的整個交互過程。
這樣，我們就實現了一個最基本的驅動。如果是一些具有目標驅動能力的模型，我們還會將所有反思需要的信息輸入，把規劃和反思聯動起來。如果操作沒有完成，我們會回到起點，再次進行規劃和反思，使這個循環完整運行，整個 AI 驅動的流程就完成了。剛才提到過，我們實際上有一個測試報告。在這個報告的左上角，我們會向大家展示每一次運行時具體發生的過程，包括規劃、定位和交互是如何進行的，所有這些信息都會被詳細記錄和展現，包括每一步的細節以及 AI 的具體規劃內容。
這個報告有兩個優點。首先，它看起來非常炫酷，能夠展示我們所應用的技術。其次，更重要的是，它為調試提供了便利。因為在很多情況下，AI 可能會出現一些幻覺或者不穩定的表現，這個報告能夠幫助大家理解和感受這種情況。通過與 AI 的不斷交互，我們可以將原本不穩定的功能調整得更加穩定，這也是我們提供這個報告的一個關鍵能力。
3.3 Midscene.js 支持的三大模型
接下來，我將分享 Midscene.js 支持的三大 AI 模型。在之前提到過，Midscene.js 目前並不提供模型。我們現在支持的三大模型在業界中都是相對普遍可獲取的。
GPT-4o
第一個模型是大家比較熟悉的 GPT-4o，這是 OpenAI 的一個閉源模型。在使用 GPT-4o 的時候，我們建議採用步驟驅動的方式。這意味着要一步一步地指明我要查找的點，以及下一步需要做什麼。通過這種步驟驅動的方式，通常可以獲得最佳效果。GPT-4o 的整體表現比較均衡。為了更好地利用該模型，我們目前是將截圖和 DOM 一起發送過去。熟悉 AI 的朋友可能已經瞭解到這樣做時會遇到一個顯著的問題，那就是費用較高，因為一起發送數據會導致 token 數量增多，推理速度也會受到影響。因此，大家需要根據自身的實際情況來選擇。如果希望嘗試，完全可以，只是需要注意費用較高。
另一個問題是關於分辨率的限制。在 GPT-4o 的官方文檔中提到，其分辨率最高只能支持到 2000*768。這對某些 PC 頁面來説會產生影響，尤其是在識別小圖標方面可能會遇到一些問題。然而，值得注意的是，這種情況是許多當前模型的共同特徵。
Qwen-2.5-VL（千問）
第二個我們目前支持的模型是阿里的千問 Qwen-2.5-VL，這是阿里巴巴推出的一個開源模型。這個模型的使用方式與 GPT-4o 有些相似，我們希望用户能夠使用較為詳細的提示詞來驅動它，而不僅僅是目標導向。這個模型的交互表現基本上與 GPT-4o 相當，甚至有時候表現得更為出色。此外，由於它是一個原生的圖像模型，在推理速度和費用消耗方面都表現得非常出色。不過，在斷言能力上可能會稍有欠缺，使用時如果需要關注細節，可能會有所體會。
UI-TARS
最後一個模型是開源的，叫做 UI-TARS，是字節跳動發佈的一個專為 UI 自動化而訓練的模型。這個模型在整個行業中的評分非常出色。前面提到了一個完全由 AI 自主規劃的 Twitter 發佈演示，就是基於 UI-TARS 實現的。該模型具備一定的自主規劃和自主糾錯能力，能完成開放性的任務。它現在已經在火山雲上有商業化部署。
這是我們當前主流推薦的三大模型之一。如果大家希望使用其他模型，我們也有一種 GPT-4o 兼容模式，可以通過我們的配置進行運行。
四、實踐與展望
接下來講一些實踐展望部分的事情，這裏有我們的血淚史，也有我們的困境。
4.1 模型的創意發揮與穩定性的衝突
首先，我們面臨的挑戰之一是模型的創意發揮和穩定性。我們的模型往往過於傾向於進行自主思考。我們曾經發現一些極端的案例，例如，當你讓某些模型填入用户名和密碼後，它會自動幫你完成提交。這種行為是模型在訓練過程中形成的一些固定模式所致。在特定情況下，如對外展示演示時，這種創意發揮可能顯得很智能，具有一定優勢。然而，開發者真正需要的並不是這種不確定性和過度智能化，他們更看重的是穩定性。他們希望每一次執行的結果都是一致的。因此，目前我們提供給大家的方案更加務實，尤其是在控制 UI 自動化時。你需要在提示詞上遵循一些技巧，比如撰寫更詳盡的提示詞、用舉例來引導模型，從而使其表現更加穩定。表面上看來，你似乎是多寫了幾個字，但實際上，這可能為你節省了數小時的調試時間。這就是提示詞技巧的重要性。
《編寫提示詞（指令）的技巧》
https://midscenejs.com/zh/prompting-tips.html
4.2 模型的不可能三角
第二個問題，也是當前業界面臨的一個重要話題，就是關於模型的選擇。這其中涉及到一個所謂的“不可能三角”。不可能三角指的是存在三個特性，你每次只能選擇其中的兩個，而無法同時兼顧所有三者。這三個特性分別是：成本低、速度快和效果好。在我們所支持的所有模型中，永遠只能選擇其中的兩個特性。如果你想要速度快且效果好，那麼最好是進行私有化部署一個超大的模型。如果不太注重效果，也可以選擇一個更小的模型進行部署，但這會影響其穩定性。在未來選擇 Midscene.js 模型時，如果如果發現某些需求不能完全滿足，不必過於糾結，因為這是該行業目前普遍存在的困境。通常，大多數業務會在速度方面做出妥協，傾向於使用公用模型，這可能導致每次請求的時間在大約 4 秒左右。他們在速度上稍微讓步，而在其他方面則能滿足需求。這就是模型選擇中所謂的不可能三角問題。
4.3 展望 AI x UI 自動化
接下來我將為大家展望一下 UI 自動化領域的發展趨勢。首先，最重要的一點是，未來將以 AI 驅動為主導。在我們的項目推進過程中，這一結論變得越來越明確。雖然目前還有一些極端情況尚未完全解決，但未來的方向一定是以 AI 作為核心推動力，這一發展是必然的。其次，我們發現，很多開發者對安全可控的解決方案有着迫切的需求。由於大量系統依然運行在各個公司的內網中，或涉及一些數據機密，開發者可能需要依賴開源的 SDK 和開源模型來支撐整個系統，以確保商業運作的安全性和可控性。此外，系統的運行速度需求也越來越高。人們對更快運行速度的追求是理所當然的，這一需求在未來必將得到滿足。
還有兩個話題需要討論。首先是智能規劃。儘管今天許多模型在智能規劃上傾向於自主發揮，因此我們強調要循序漸進，但我們仍然對未來抱有期待，認為某天它有可能會實現。最後一個話題是跨端支持，桌面、Web 以及移動端的支持理應被自然地實現。儘管我們在這裏稱之為“展望”，但大家今天可以看到整個業界的狀況，每個廠商都在各個層次推出這些產品，參與者眾多。我們判斷，到 2025 年可能有 60%到 70%甚至更高比例的用户將會完成這一轉變。UI 自動化將在未來成為整個行業的一種基礎能力，整個行業將在其基礎上開發更高級的產品，比如 Midscene.js 就在朝着那個方向前進。
UI 自動化這個領域即將蓬勃發展。我們歡迎所有對此感興趣的朋友將自己的業務在測試方向上向 UI 自動化遷移，去親身體驗和感受在這個 AI 時代下 UI 自動化到底會帶來什麼樣的變化。
下方公眾號是字節的 ByteDance Web Infra 團隊的微信公眾號，我們會發布技術分享、產品更新、招聘等信息。感興趣的同學可以關注一下。謝謝大家！
相關鏈接
項目網站：https://midscenejs.com/
開源倉庫： https://github.com/web-infra-dev/midscene
