用 GitHub Copilot 3 個步驟讓 AI 幫你操作瀏覽器,測試網頁省下 2 小時

用 GitHub Copilot 3 個步驟讓 AI 幫你操作瀏覽器,測試網頁省下 2 小時

用 GitHub Copilot 3 個步驟讓 AI 幫你操作瀏覽器,測試網頁省下 2 小時

寫完 Code 還要手動點一遍?這件事 AI 現在幫你做了!

如果你有在寫網頁或開發 App,你一定懂這種痛苦:好不容易改好一個 Bug,結果得把瀏覽器打開 $\rightarrow$ 輸入帳號密碼 $\rightarrow$ 點擊三個選單 $\rightarrow$ 終於到達那個出錯的頁面,結果發現…還是壞的。😭

這種「手動驗證」就像是在迷宮裡走來走去,每次改一行 Code 就要走一次迷宮,超級浪費時間。但現在 GitHub CopilotVS Code 裡推出了新功能,直接讓 AI 變成你的「自動化測試小助手」,它能直接幫你操作瀏覽器!

什麼是「AI 操作瀏覽器」?

你可以把這個功能想像成:你請了一個超級快的手速助理,他坐在你旁邊,你只要告訴他「去幫我確認登入功能有沒有壞」,他就會自己開瀏覽器、打字、點擊,最後告訴你結果。

以前的 AI 只能幫你寫 Code(就像是一個很強的設計師),但現在它能幫你「跑測試」(變成一個會驗證的 QA 工程師)。

AI 具體能幫你做什麼?

這次更新後,GitHub Copilot 的 AI Agent(你可以想成是一個能執行任務的 AI 代理人)可以完成以下動作:

  • 基本操作:打開網頁、點擊連結、輸入文字、滑鼠移到某個位置(Mouse-over)、拖曳元件。
  • 處理彈窗:遇到對話框或警告視窗,它能幫你處理掉。
  • 深度檢查:讀取頁面內容、抓取 Console 的錯誤訊息(就是開發者平常看紅字報錯的地方)、甚至幫你拍螢幕截圖。

舉個台灣開發者的實際場景: 假設你在幫公司開發一個電商網站,你要確認「購物車 $\rightarrow$ 填寫地址 $\rightarrow$ 選擇超商取貨 $\rightarrow$ 確認訂單」這個流程順不順。你不需要自己點 10 遍,直接對 Copilot 說:

「幫我打開 localhost:3000,模擬使用者從購物車到確認訂單的流程,如果有報錯請告訴我。」

它就會自動幫你跑完,你只需要在 VS Code 裡看結果就好!

只要 3 個步驟,馬上開始使用

這個功能現在已經正式開放(General Availability),只要你原本就有在用 GitHub Copilot,設定非常簡單:

  1. 更新軟體:把你的 VS Code 更新到最新版本。
  2. 開啟對話框:打開 VS Code 側邊的 Copilot Chat 或 Agents 視窗。
  3. 下指令:直接輸入「Open [網址] and test [功能]」或「幫我打開網頁並測試 XX 功能」。

如果你有固定要測試的流程,甚至可以把步驟寫成腳本,讓 AI 每次都按照同樣的路徑去檢查,完全不用重複操作。

會不會被 AI 偷看我的私密資料?

這應該是大家最擔心的部分。畢竟瀏覽器裡有這麼多登入過的帳號(像是 Facebook、Gmail 或公司後台)。GitHub 對此做了很嚴格的限制:

  • 隔離空間:AI 操作的瀏覽器是一個「全新的對話 session」,它讀不到你平常瀏覽器存的 Cookie 或密碼。
  • 權限控制:如果你自己開了一個分頁,AI 預設是看不到不能操作的。除非你手動點擊「Share with Agent」,它才能進入那個分頁。
  • 公司管理:如果是公司帳號,管理員可以在後台設定「白名單」,規定 AI 只能去哪些網站,不能亂跑。

總結:開發流程的大進化

這次更新把「寫 Code」跟「驗證 Code」這兩個步驟接在一起了。你不再需要頻繁地在編輯器跟瀏覽器之間切換(Alt+Tab 切到手酸),直接在一個視窗內完成所有工作。

對於學生在準備專題、或是工程師在趕專案進度的人來說,這能省下大量重複勞動的時間。把這些瑣碎的點擊工作交給 AI,你才能專心思考怎麼寫出更好的架構。

現在就更新 VS Code,試試看讓 Copilot 幫你跑測試吧!