使用 Antigravity (AGY) CLI、BrowserMCP、Playwright 和 Browser Agent 自動執行 UI 測試

1. 簡介

代理式 AI 革命正在改變軟體建構方式，讓整個過程變得非常酷炫、令人興奮且容易上手。以往開發人員需要數月才能完成的任務和專案，現在只要使用代理工具，就能在單一工作階段內完成。

網頁應用程式測試就是一個適合這類代理轉換的領域。傳統上，測試網頁應用程式是件苦差事，而且必須不斷與脆弱性抗衡。但如果可以完全略過這項複雜作業呢？如果只要以簡單的自然語言告訴代理要測試的內容，然後讓代理推論如何執行測試呢？

b09119516acbc09e.png

在本程式碼研究室中，我們將探討如何搭配代理程式技能和多模態 MCP 工具 (例如 BrowserMCP)，使用 Antigravity CLI。您將瞭解如何使用自然語言建立及執行自動化 UI 測試，並瞭解代理程式工具如何處理複雜工作，讓您在建構時如虎添翼。

請務必注意，雖然本程式碼研究室著重於 UI 自動化和瀏覽器遠端控制的特定用途，但真正重要的是基本原則，以及這些原則所帶來的無限可能。透過教導代理程式使用本機 CLI 和 MCP 伺服器，我們可以委派複雜的工作流程，否則我們可能沒有時間或專業知識來自行處理。

課程內容

  • 瞭解 Antigravity CLI，以及它在 Antigravity 生態系統中的作用。
  • 瞭解 Model Context Protocol (MCP) 的用途，以及為何這項技術能帶來重大變革。
  • 瞭解 BrowserMCP 如何讓 AI 代理程式控制網路瀏覽器。
  • 如何透過 Antigravity CLI 執行自動化 UI 測試。
  • 瞭解代理程式技能及其優點。
  • 教導代理使用 Playwright 技能。
  • 瞭解 Antigravity 的內建瀏覽器代理程式。
  • 瀏覽器控制項的其他用途。

學習內容

本程式碼實驗室會使用 Antigravity CLI、MCP 工具、代理程式技能和 React 示範應用程式。

您將學會以下內容：

  • 設定您的開發環境。
  • 探索需要測試的示範應用程式。
  • 使用 Antigravity CLI 透過 BrowserMCP 與應用程式互動。
  • 透過代理程式技能，教導代理程式如何使用 Playwright。

2. Antigravity 生態系統

Google 於 2026 年 5 月放棄了新的 Antigravity 套件。這是 Antigravity 的重大改版，並拆分為以下四項產品：

  • Antigravity 2.0，也就是現在桌機上的專屬代理程式優先「建構工具」環境。值得注意的是，這項工具本身不包含 IDE。現在我們只會與代理程式管理員互動。這個介面旨在引領我們進入「從構想發想到產品」的時代，透過代理程式實現目標，不必擔心程式碼問題。許多沒有程式設計背景的建構者都會喜歡這項功能。
  • Antigravity IDE，提供我們更熟悉的 VS Code 程式設計環境，並由 Antigravity 代理程式架構支援。我們可以在這裡進行代理輔助開發，而且隨時都能看到程式碼。程式設計師會覺得很熟悉。
  • Antigravity SDK：提供 Antigravity 支援的架構和工具，但以 Python Agent SDK 形式公開。從 google.antigravity 匯入後，我們就能以程式輔助方式運用 Antigravity 的功能。
  • Antigravity CLI，這是非常厲害的 Gemini CLI 的下一個進化版本。這仍是與 Gemini 模型互動的終端機優先環境。但新的 Antigravity CLI 是以 Go 語言建構，因此無論是啟動或一般使用，都比 Gemini CLI 快得多。這項功能與 Antigravity 2.0 和 IDE 使用相同的代理程式「架構」，因此 Antigravity 套件可共用設定和配置。

雖然本實驗室的重點是使用 Antigravity CLI，但您也可以使用 Agy IDE 或 Agy 2.0 完成本實驗室的所有操作。

3. 必要條件

開始瞭解有趣的功能前，請先確認您已備妥所需的一切。

工具

本實驗室假設您已具備下列條件：

如要使用 Antigravity CLI，請先向 Google 進行驗證。首次啟動 agy 時，系統會透過預設網頁瀏覽器自動提示您進行 Google 登入。這個選項提供大量免費 Gemini 使用配額，且不需要 Google Cloud 專案。如果您有 Gemini API 金鑰或 Google Cloud 雲端專案，也可以自由設定。

這些操作說明假設您是在 Linux (或 WSL) 或 macOS 環境中作業。如果您使用 Windows (像我一樣)，可以透過 WSL 進行操作。

(請注意，BrowserMCP 無法透過 Google Cloud Shell 運作，因為它只會連線至在同一部電腦上執行的本機瀏覽器)。

設定開發環境

我已在 GitHub 建立示範存放區。其中包含可用於 UI 測試的範例應用程式。請在本機終端機執行下列指令，複製這個存放區：

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

我們提供 Makefile，方便您設定環境來啟動示範應用程式。請執行該檔案來初始化環境：

make install

# Or if you don't have make
npm install --prefix demo-app

4. 我們的示範應用程式

我們今天測試的應用程式是「The Dazbo Omni-Dash」，這款未來感十足的深色主題資訊主頁，可管理安全性遙測資料。(沒錯，這是直覺式程式碼！)

3b004164e4db3f8e.png

為什麼要使用這個應用程式？

這個平台提供逼真的測試介面，包括：

  • 模擬驗證：需要特定憑證的登入流程。
  • 動態內容：模擬即時資料的遙測資訊卡和安全性記錄。
  • 互動式狀態：導覽選單和表單輸入內容會根據使用者動作而變更。
  • 現代技術：採用 React 和 Vite 建構，提供快速且反應靈敏的體驗。

啟動應用程式

如要啟動應用程式，只要執行下列指令即可：

make dev

# Or if you don't have make
npm run dev --prefix demo-app

開發伺服器應會很快啟動，應用程式則會顯示在 http://localhost:5173。

dbd4ccd437f0ef92.png

我們只要點按連結，即可在瀏覽器中開啟應用程式。只要讓這個程序在終端機中執行即可。我們會在另一個終端機工作階段中執行後續的終端機指令。

5. UI 測試的挑戰

傳統的 UI 測試眾所皆知難以正確執行，維護起來更是困難。常見痛點包括：

  • 學習曲線陡峭：開發人員必須投入大量時間，才能精通複雜的特定領域語言和架構特有功能 (例如 Selenium 或 Playwright)，僅為自動執行基本互動。
  • 脆弱的選取器和自動化：傳統指令碼依賴嚴格的 DOM 結構 (例如 div > div > button) 或特定文字標籤。如果將「登出」按鈕重新命名為「登出」，會發生什麼情況？或者將按鈕移至完全不同的選單？還是要變更 HTML 結構？如果您這麼做，傳統測試工具就會中斷，導致指令碼需要不斷維護。
  • 測試「不穩定」：由於時間問題、競爭條件或資產載入緩慢，測試在一分鐘內通過，下一分鐘卻失敗。
  • 環境同位：難以複製的應用程式狀態，以及清除測試資料的額外負擔。

7afb2d2f08c71c32.png

意圖與實作

如要解決這些問題，我們需要一種測試方法，著重於意圖而非實作。

運用代理式 AI 工具，我們可以建立可重複執行的自動化作業，完全不受 UI 細微調整和結構變更影響。代理程式會根據使用者的自然語言意圖執行動作，而不是硬式編碼名稱、標籤或物件的確切階層。如果按鈕移動或標籤略有變更，代理程式的多模態功能可協助找出元素並順利完成工作。

6. MCP 救援行動

Model Context Protocol (MCP) 是一項開放標準，可讓 AI 模型和代理與外部工具、API 和資料互動。您可以將其視為通用介面，模型和代理可藉此尋找並執行有權存取的工具。

傳統上，如要將大型語言模型 (LLM) 與外部資料和工具整合，開發人員必須為每個新資料來源編寫自訂的硬式編碼 API 連線，造成難以持續的「M x N」整合問題，也就是每新增一個模型和工具，維護負擔就會倍增。Model Context Protocol (MCP) 解決了這個問題，因為您不必編寫特定程式碼來協調這些功能。開發人員不必明確編碼複雜的執行工作流程，而是依賴 LLM 解讀使用者的自然語言要求，並動態判斷要使用哪些工具。

當使用者發出自然語言指令 (例如「前往 localhost:5173，以『admin』身分登入，然後按一下『Submit』按鈕」)，LLM 會找出可用功能，並生成結構化要求來叫用特定工具。MCP 用戶端會做為翻譯器，將這項要求傳送至指定的 MCP 伺服器，後者會執行動作或擷取資料，並將脈絡傳回模型。這樣一來，AI 就能自主運作，開發人員不必硬式編碼特定執行路徑。

86d97bfc6d81bee7.png

MCP 建立通用標準 (通常稱為「AI 應用程式的 USB-C」)，因此可大幅重複使用現成資源。開發人員只要建構一次 MCP 伺服器，任何相容的 AI 主機都能立即連線，解決 M x N 整合問題。您不必再為每個平台建構自訂 API 橋接器，而是可以運用預先建構的開放原始碼 MCP 伺服器生態系統，用於 GitHub、Slack、資料庫等常見服務，直接將這些伺服器插入代理工作流程。這種模組化隨插即用架構可確保您日後切換 LLM 供應商或升級工具時，核心整合基礎架構完全不會變動。

7. 使用 BrowserMCP 自動執行作業

什麼是 BrowserMCP？

這是我們今天要使用的第一個工具。BrowserMCP 是一種 MCP 伺服器，可為 AI 代理提供與網頁瀏覽器互動所需的「眼睛」和「雙手」。簡單來說，這項工具會模擬人類與瀏覽器的互動。BrowserMCP 是開放原始碼工具，您可以在這裡查看 GitHub 存放區。如要查看主要 BrowserMCP 說明文件，請按這裡。

9f43c65a25e21d2c.png

以下列舉部分功能：

  • 可以前往網址。
  • 檢查 DOM。
  • 可以點選按鈕，並在表單中輸入文字。
  • 可以拖曳。
  • 可讀取瀏覽器控制台記錄。
  • 速度快：自動化作業會在您的電腦上執行。

安裝瀏覽器 MCP

如要使用 BrowserMCP，請完成以下兩個動作：

  1. 在 Chrome (或任何以 Chromium 為基礎的瀏覽器) 中安裝 BrowserMCP 擴充功能。
  2. 在 Antigravity 設定中手動設定 MCP 伺服器。

如要安裝擴充功能，請按照這裡的指示操作，只需幾秒鐘即可完成。安裝完成後，請點選擴充功能中的「連線」，允許服務專員控制目前的索引標籤。(當然，您希望目前的索引標籤是執行示範應用程式的那個！)

6008c83a31bed7ea.png

接著，我們要在 Antigravity 中設定實際的 MCP 伺服器。方法是在全域 mcp_config.json 檔案中加入 browsermcp 伺服器定義。

建立或編輯 ~/.gemini/config/mcp_config.json 檔案，並新增下列設定：

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

如需在 Antigravity 生態系統中設定 MCP 伺服器和技能的詳細逐步說明，請參閱下列資源：

使用 BrowserMCP 進行測試

現在開始變魔術。首先，請在新的終端機工作階段中啟動 Antigravity CLI (執行 agy)。(請回想一下，試用版應用程式是在初始終端機工作階段中執行)。在互動式 TUI 中輸入 /mcp，確認有效工具清單並確保 browsermcp 可用。

如果您先前未啟動示範應用程式，請立即啟動：

make dev

如果尚未開啟應用程式，請在 Chrome 瀏覽器中開啟應用程式，並在該分頁中連結 BrowserMCP 擴充功能。請按照 run 指令中的連結操作，然後按一下 BrowserMCP 擴充功能圖示，並點選「Connect」(連線)。

86aeb8303e5d18ad.png

現在可以使用 Agy CLI 執行測試。複製這段提示詞並貼到 CLI：

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

CLI 可能會先檢查範例應用程式是否在指定連接埠上執行，然後提示您確認工具打算執行的動作。

99d6dee1eb7f6bd1.png

允許 CLI 在這個工作階段中執行所有 BrowserMCP 工具。接著返回瀏覽器，觀看自動互動！

關於上述提示，有幾點需要注意：

  • 如果應用程式已登入，我們會先要求代理程式登出。請注意，我們不需要要求代理程式點選特定文字 (例如「Exit Gateway」)，代理程式會自行判斷要點選的內容。
  • 登入並算繪主要頁面後，服務專員會擷取遙測資訊。同樣地，我們不需要指示服務專員查看特定圖塊或比對特定字詞。因此，如果我們稍後要擴充或變更這個頁面顯示的資訊，這個提示仍可運作，輸出內容也會擷取到 Markdown 表格中。

很酷吧？

我們暫時不需要 BrowserMCP，請在瀏覽器中中斷連線。

8. 使用 Skills 和 Playwright 自動化

BrowserMCP 的限制

BrowserMCP 很棒，但有一些限制。例如：

  • 這項功能需要現有的瀏覽器工作階段，並連線至 BrowserMCP 擴充功能 (不會產生新的工作階段)。
  • 不支援非 Chromium 瀏覽器。
  • 這需要執行獨立的瀏覽器程序，且該程序與 MCP 伺服器位於同一部電腦。
  • 無法與本機檔案系統搭配使用。舉例來說，無法建立本機檔案來儲存螢幕截圖，也無法從網路應用程式下載及儲存檔案 (例如可下載的 PDF)。
  • 這項功能不具決定性。系統會嘗試執行您指示的動作，但本機狀態 (例如非預期的彈出式視窗) 可能會中斷互動。
  • 不支援「無頭」作業，也就是說，如果沒有實際的瀏覽器視窗，就無法在 CI/CD 管道中執行。

Playwright

Playwright 則是更精密的工具，是成熟的開放原始碼瀏覽器自動化和測試架構，可執行許多 BrowserMCP 無法執行的作業，包括上述所有項目。

更適合執行複雜、可靠且可重複的測試情境，特別適合處理長時間執行的工作階段，或並行執行多個獨立工作階段。

但這類額外功能也伴隨著陡峭的學習曲線。

技能

幸好我們不必直接學習如何使用 Playwright，而是可以改用代理程式技能。

fdadb11ff7d25b75.png

那麼，代理程式技能究竟是什麼？您可以將其視為領域專業知識的緊密封裝套件，在 AI 代理程式需要執行特定工作時交給它。其中包含專為特定工作量身打造的指令、最佳做法，有時甚至還包含輔助指令碼。

最聰明的部分是逐步揭露。與其將所有可能的 API 文件和測試架構規則塞進 LLM 的初始系統提示 (這會耗盡情境視窗，並大量消耗權杖)，代理程式只會在實際需要時讀取技能。這項功能會保持基準背景資訊簡潔明瞭，並即時擷取詳細的「操作說明」。沒錯，技能絕對可以包含如何運用特定 MCP 伺服器完成工作的指示。

就像《駭客任務》中的場景：特務發現問題後，意識到需要瞭解 Playwright，於是下載這項技能，然後突然說出：「我會功夫。」一瞬間就成了專家。

如要進一步瞭解技能，請參閱下列文章：

為何技能非常適合 Playwright

在這裡使用技能是絕佳選擇。Playwright 功能強大，但語法可能很複雜。賦予代理 Playwright 技能後，我們就不必擔心 LLM 產生過時語法或編寫脆弱的選取器。我們提供經過精心設計的權威劇本，說明如何正確使用 Playwright。

我將使用 Playwright CLI 和相關技能。

我們將採用這種方法在本機安裝 Playwright CLI，然後提供代理程式使用該 CLI 的必要知識。為避免任何混淆，我不會安裝任何 Playwright MCP 伺服器。

安裝中

首先，請安裝開放原始碼的 Microsoft Playwright CLI。如果尚未這麼做，請輸入 /quit`` 退出互動式 CLI。接著在終端機中執行下列操作：

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

現在新增技能。這項指令會直接從 GitHub 將技能子資料夾下載到 Gemini 技能資料夾：

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

現在可以測試了。

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

系統應該會產生瀏覽器工作階段，並開啟指定的網址。

我也希望 Gemini 能夠在「有頭」模式下使用 Playwright，也就是顯示 UI。但這項技能不會告訴 Gemini 如何執行這項操作。因此，我在 Core 區段的 ~/.gemini/skills/playwright-cli/SKILL.md 中新增了以下幾行：

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

使用 Playwright 進行測試

和先前一樣，我們需要啟動應用程式 (如果尚未執行)。請透過初始終端機工作階段執行這項操作：

make dev

接著，在另一個終端機工作階段中，暫時停用 BrowserMCP，以免代理程式混淆要使用的工具。重新啟動 Antigravity CLI (agy)。我們可以透過 TUI 直接暫時停用 browsermcp 伺服器：

  1. 在提示詞輸入框中輸入 /mcp，開啟 MCP 管理面板。
  2. 使用方向鍵 (向上/向下) 選取 browsermcp，然後按 Enter/Return 鍵。
  3. 向右移動選取「停用」，然後按 Enter 鍵即可關閉。

a032a59a430662e3.png

現在，我們要請代理程式使用 Playwright 導覽至應用程式。但與 BrowserMCP 不同，我們不需要先啟動瀏覽器。Playwright 會透過本機程序為我們執行這項操作。

在 Agy CLI 中輸入這項提示：

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(與先前相同，CLI 會先徵求許可，再執行任何工具)。

這兩者有何不同？

  • 我們不需要先啟動瀏覽器。
  • 我們不需要啟動及連線瀏覽器擴充功能。
  • 我們不需要先告知代理程式登出。測試會從「乾淨」的會話執行個體化。
  • 我們可以擷取螢幕截圖，並儲存為本機檔案。

不久後，輸出資料夾中就會顯示 dashboard.png 檔案。

請注意，您會在 Agy CLI 中看到工具呼叫執行作業，但不會看到瀏覽器 UI。這是因為 Playwright 預設會以「無頭模式」執行。

但如果使用這個修正後的提示重新執行，您也能看到 UI：

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Agy CLI 輸出內容應如下所示：

c8d69d883439b7c7.png

這是不是很棒？

9. Antigravity 的內建瀏覽器代理程式

Google Antigravity 內建專屬的瀏覽器代理程式 ( 瀏覽器子代理程式)，可提供開箱即用的瀏覽器自動化功能，不必安裝 Playwright CLI 等獨立工具。

運作方式

如要控制瀏覽器，內建的瀏覽器代理程式會直接透過 Chrome 開發人員工具通訊協定 (CDP) 運作，因此在 Antigravity 2.0 和 IDE 中，不需要任何瀏覽器擴充功能或中介外掛程式。

啟動後，Antigravity 會透過 WebSocket 連線，經由本機偵錯連接埠連線至 Chrome 執行個體。代理程式的高階指令會直接轉譯為低階 CDP 指令，以便：

  • 操控網頁 DOM (例如點擊元素或輸入文字)。
  • 控制瀏覽器狀態並觸發導覽。
  • 擷取即時影格和視覺資料。

子代理程式會結合直接 CDP 控制項與視覺化多模態分析，接收您的目標 (例如「確認資訊主頁顯示正確的遙測值」)，以視覺方式分析頁面，找出所需動作並自行執行。此外，這項功能還會自動錄製影片和擷取動作的螢幕截圖，並直接儲存到工作區做為構件，做為測試執行的視覺證據。

工具適用情況

終端機優先的 Antigravity CLI (Agy CLI) 目前不支援內建瀏覽器代理程式。不過，您今天就能在 Antigravity IDE 和 Antigravity 2.0 中使用這項功能。希望在未來的版本中，Agy CLI 也能支援瀏覽器代理程式！

WSL 使用者注意事項：現在在 WSL 下的 Antigravity 中，讓瀏覽器代理程式運作比以往容易許多。您不必處理複雜的網路路由和連接埠轉送，只要在 WSL 設定中啟用「鏡像」網路模式即可。如需完整的逐步操作說明，請參閱「Resolving WSL Friction with Google Antigravity: The Agy 2.0 and Agy IDE Edition」指南。

10. 瀏覽器自動化的其他用途

瀏覽器自動化不僅能確保登入按鈕在週五下午部署前正常運作，還能讓您直接將 LLM 連線至瀏覽器，開啟全新的自家代理程式專案世界。

如果您要自行建構 AI 代理程式，可以運用 BrowserMCP 或 Playwright CLI 等工具，執行下列繁重工作：

  • 個人研究助理：假設您要求代理程式研究特定網址的主題，但該網站需要登入，且選單複雜難以操作。您不必編寫下週就會失效的自訂網頁擷取工具，只要告訴代理程式登入、前往資料並為您摘要即可。
  • 「旋轉椅」整合人員：我們都有沒有 API 的舊版內部網路系統。您一定知道，就是必須手動從系統 A 複製資料，然後貼到系統 B 的表單中。具備瀏覽器自動化功能的代理程式可做為通用黏著劑，讀取舊版系統的畫面，並在新版系統中填寫表單。
  • 自動分類和補救：凌晨 3 點收到監控系統的 P1 快訊？您的代理程式可以自動開啟特定資訊主頁網址、讀取圖表或記錄 (使用多模態視覺功能)，並直接在 Slack 頻道中發布摘要，在事件發生期間為您節省寶貴的時間。

這種做法的優點在於，您不再受限於可用的 API。如果使用者可以在瀏覽器中完成某項工作，您的代理程式也能做到。

11. 結語

恭喜！您只要以簡單的英文向 AI 代理說明想執行的動作，就能建構及執行自動化且穩健的 UI 測試。不必使用容易出錯的 CSS 選取器，也不必編寫複雜的設定指令碼。

您已學會：

  • UI 測試不一定很痛苦：只要專注於測試的意圖，而非脆弱的 DOM 實作，就能大幅減少維護負擔。
  • Model Context Protocol (MCP) 可讓代理程式即插即用，存取各種工具、資料和環境。
  • BrowserMCP 是一項強大的工具，可將代理能力帶入現有的本機 Chrome 工作階段。
  • 技能和 Playwright CLI 可實現全新層級的可重複確定性自動化測試，一切都由漸進式揭露技術提供支援。
  • Antigravity 的瀏覽器子代理則更進一步，直接提供自主多模態導覽和構件記錄功能。

現在就開始自動處理無聊的事吧！

12. 實用連結

如要深入瞭解今天介紹的工具和概念，請參閱下列資源：

存放區代碼

核心工具與架構

代理概念與技能

其他