使用瀏覽器代理工具建置與測試網頁應用程式

瀏覽器代理工具讓 AI 能夠在封閉的開發迴圈中自動建置並驗證網頁應用程式。代理可以建立 HTML、CSS 和 JavaScript，在整合式瀏覽器中開啟應用程式，透過與其互動來驗證功能，藉由主控台錯誤與視覺檢查識別問題，並在無需人工介入的情況下修復問題。

本指南將引導您使用瀏覽器代理工具建置計算機應用程式，並觀察代理如何透過自動化測試發現並修復錯誤。

注意

瀏覽器代理工具目前為實驗性質，日後版本可能會有所變更。

先決條件

若要完成本指南，您需要：

電腦上已安裝 Visual Studio Code
GitHub Copilot 訂閱
已啟用瀏覽器代理工具，設定值為 workbench.browser.enableChatTools 在 VS Code 中開啟在 VS Code Insiders 中開啟此設定由組織層級管理。請聯繫您的管理員進行變更。

瀏覽器代理工具的運作原理

當您啟用瀏覽器代理工具後，代理即可存取相關工具，用以讀取並與整合式瀏覽器中的頁面互動。這些工具包括：

頁面導覽： openBrowserPage、navigatePage
頁面內容與外觀： readPage、screenshotPage
使用者互動： clickElement、hoverElement、dragElement、typeInPage、handleDialog
自訂瀏覽器自動化： runPlaywrightCode

預設情況下，由代理開啟的頁面會在私密、記憶體內的對話中執行，不會與您的其他瀏覽器索引標籤共用 Cookie 或儲存空間。這讓您可以控制代理能夠存取的瀏覽資料。

進一步了解 VS Code 中的整合式瀏覽器。

步驟 1：為代理啟用瀏覽器工具

代理必須先明確啟用瀏覽器工具，才能夠使用這些工具。

開啟「聊天」(Chat) 檢視 (⌃⌘I (Windows, Linux Ctrl+Alt+I))，並從代理下拉式選單中選擇代理 (Agent)。
點選聊天輸入區域中的工具 (Tools) 按鈕以開啟工具選擇器。
確認所有瀏覽器工具皆已啟用（它們歸類在內建 (Built-in) > 瀏覽器 (Browser) 下方）。

現在代理可以使用這些工具與網頁進行互動。

步驟 2：請代理建置一個計算機

啟用瀏覽器工具後，請要求代理建立一個簡單的計算機應用程式。

建立一個新的專案資料夾，並在 VS Code 中開啟它。

在「聊天」檢視中，輸入以下提示詞：

Create a calculator with buttons for digits 0-9, operations (add, subtract, multiply, divide), clear, and equals. Use HTML, CSS, and JavaScript. Style it with a clean, modern design.

當代理建立 index.html、styles.css 和 script.js 時，請審閱生成的檔案。
選擇保留 (Keep) 將檔案儲存到您的工作區。

代理已建置好計算機應用程式的基本架構。

步驟 3：讓代理測試該計算機

現在請要求代理在整合式瀏覽器中開啟計算機，並驗證其功能是否正常。

在「聊天」檢視中，輸入以下提示詞：

Open the calculator in the browser and test if all the operations work correctly.

觀察代理如何在整合式瀏覽器中開啟 index.html，解析頁面內容以理解結構，並透過模擬點擊與檢查結果來系統性地測試每個按鈕與運算。

代理會回報哪些運算運作正常，並識別出它所發現的任何問題。

步驟 4：觀察代理偵錯並修復問題

若代理在測試過程中發現錯誤，它會自動分析問題並實作修復程式。

讓我們透過移除除以零的檢查來植入一個錯誤：

function calculate() {
    if (!operator || shouldReset) return;

    const a = parseFloat(previous);
    const b = parseFloat(current);
    let result;

    switch (operator) {
    case '+': result = a + b; break;
    case '-': result = a - b; break;
    case '*': result = a * b; break;
    case '/': result = a / b; break;
}

要求代理測試除法運算並修復其發現的任何問題。

Verify the division operation works correctly. If you find any issues, fix them.

觀察代理在執行除以零時遇到錯誤，隨後分析並修復程式碼，最後驗證錯誤修復情況。

代理已完成完整的開發週期：透過瀏覽器自動化進行建置、測試、偵錯與修復。

您也可以手動開啟網頁，並明確地與代理共用以進行分析或互動。預設情況下，代理僅能與其自行開啟的網頁互動。

透過命令選擇區 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 執行瀏覽器：開啟整合式瀏覽器 (Browser: Open Integrated Browser) 命令。
導覽至您希望代理分析或與其互動的網頁。
點選瀏覽器工具列中的與代理共用 (Share with Agent) 按鈕。

瀏覽器索引標籤上的視覺指示器顯示該頁面正與代理主動共用中。

要求代理對共用頁面執行動作。

What is the main heading on this page? Click the first link and tell me where it goes.

代理現在可以存取該共用頁面並代表您執行互動。完成後，再次點選與代理共用 (Share with Agent) 按鈕以撤銷存取權。

提示

共用頁面會使用您現有的瀏覽器工作階段，包含 Cookie 與登入狀態。代理開啟的頁面則使用隔離的臨時工作階段，因此不會與您的其他瀏覽器索引標籤共用 Cookie 或儲存空間。

嘗試這些情境

現在您已了解瀏覽器代理工具的運作方式，請嘗試這些情境以探索不同的使用案例：

表單驗證測試：讓代理透過建置並測試聯絡表單，來驗證驗證規則、錯誤訊息與成功送出功能。
響應式佈局驗證：要求代理在不同的視埠大小下對頁面截圖，並驗證響應式行為（例如包含導覽選單的登陸頁面）。
驗證流程測試：讓代理在登入頁面測試憑證驗證、錯誤處理與成功重新導向功能。
互動功能測試：讓代理驗證使用者互動與狀態管理。
無障礙稽核：要求代理檢查任何網頁是否有缺失的替代文字 (alt text)、標題層級、鍵盤導覽以及色彩對比問題。