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

瀏覽器代理工具讓 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：為代理程式啟用瀏覽器工具

在代理程式使用瀏覽器工具之前，您必須在聊天工具選擇器中明確啟用它們。

1. 開啟聊天檢視 (⌃⌘I (Windows、Linux 為 Ctrl+Alt+I))，然後從「代理程式」下拉式選單中選取 Agent。

2. 在聊天輸入區域中選取 工具 按鈕以開啟工具選擇器。

3. 驗證所有瀏覽器工具都已啟用 (它們歸類在 內建 > 瀏覽器 下)。

   

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

步驟 2：要求代理程式建置計算機

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

1. 建立新的專案資料夾並在 VS Code 中開啟它。

2. 在聊天檢視中，輸入下列提示：

   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.
   

3. 在代理程式建立 index.html、styles.css 和 script.js 時，請檢閱產生的檔案。

4. 選取 保留 以將檔案儲存到您的工作區。

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

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

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

1. 在聊天檢視中，輸入下列提示：

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

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

代理程式會報告哪些操作正常運作，並識別出它發現的任何問題。

步驟 4：觀看代理程式偵錯並修復問題

如果代理程式在測試期間發現錯誤，它會自動分析問題並實作修正。

1. 讓我們透過移除除以零檢查來引入一個錯誤：

   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;
   }
   

2. 要求代理程式測試除法運算並修正它發現的任何問題。

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

3. 觀看代理程式在除以零時遇到錯誤，然後分析並修正程式碼，最後驗證錯誤修正。

代理程式已透過使用瀏覽器自動化完成完整的開發週期：建置、測試、偵錯和修正。

步驟 5：與代理程式共用瀏覽器頁面 (選用)

您也可以手動開啟網頁，並明確地與代理程式共用以進行分析或互動。依預設，代理程式只能與它自己開啟的網頁互動。

1. 從命令選擇區 (⇧⌘P (Windows、Linux 為 Ctrl+Shift+P)) 執行 瀏覽器：開啟整合式瀏覽器 命令以開啟整合式瀏覽器。

2. 導覽至您希望代理程式分析或互動的網頁。

3. 在瀏覽器工具列中選取 與代理程式共用 按鈕。

   瀏覽器索引標籤上的視覺指示器會顯示該頁面正在積極地與代理程式共用。

4. 要求代理程式在共用頁面上執行動作。

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

代理程式現在可以存取共用頁面並代表您執行互動。完成後，再次選取 與代理程式共用 按鈕以撤銷存取權限。

試試這些情境

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

• 表單驗證測試：讓代理程式透過建置和測試聯絡表單來驗證驗證規則、錯誤訊息和成功提交。

• 回應式佈局驗證：要求代理程式在不同的視埠大小下擷取頁面螢幕截圖，並驗證回應式行為 (例如，具有導覽選單的登陸頁面)。

• 驗證流程測試：讓代理程式測試登入頁面中的憑證驗證、錯誤處理和成功重新導向。

• 互動功能測試：讓代理程式驗證使用者互動和狀態管理。

• 無障礙功能稽核：要求代理程式檢查任何網頁是否有缺失的替代文字、標題層級、鍵盤導覽和色彩對比問題。

相關資源

• 整合式瀏覽器
• VS Code 中 AI 的核心概念
• 代理程式概觀
• 使用 Copilot 進行測試