不知道你知不知道，《九陽真經》 其實是一本內功心法，它能大幅增強內力，並抵禦外來的寒毒。張無忌身中劇毒，卻能倖存下來，靠的就是這門神功。今天我們將會把需要的工具安裝好，並且透過 AI Agent 執行 Playwright MCP 來驗證前幾天其中一個測試案例。

招式演練：內功心法與AI協作

想要運用 AI Agent 執行測試，我們需要先備齊以下幾項前置條件：

• GitHub 帳號並且可使用 GitHub Copilot （可免費試用 30 天)
• 安裝 VS Code
• VS Code 擴充套件：
  • GitHub Copilot（程式碼補全）
  • GitHub Copilot Chat（對話模式）
• 安裝 Playwright 和 Playwright MCP

以下是詳細的安裝步驟，幫你一步步打通任督二脈。

申請 GitHub 帳號

步驟

1. 打開瀏覽器，進入 GitHub 官方網站，並且點選 Sign up for GitHub
   
2. 填寫基本資訊，常使用的 Email 地址、設定密碼與使用者帳號等等
3. 選擇方案時，「Try GitHub Copilot」 提供 30 天試用，輸入信用卡或 PayPal 資訊即可開始。

在 VS Code 中安裝 GitHub Copilot

有了 GitHub Copilot，你的寫程式效率將如同開了外掛，特別是搭配 Chat 模式時，與 AI 協作會更加順暢。

步驟

1. 打開 VS Code，前往左側的**「Extensions」**（快捷鍵 Ctrl+Shift+X）。
2. 搜尋並安裝：
   • GitHub Copilot（程式碼補全）
   • GitHub Copilot Chat（對話模式）
3. 安裝完成後，登入 GitHub 帳號並確認有 Copilot 訂閱（個人）或企業授權。
4. 驗證是否成功：在命令面板（Ctrl+Shift+P）輸入 Copilot: Chat，或是當你寫程式時，留意是否會出現灰色的程式碼建議。

在 VS Code 中安裝 Playwright

1. 進入 VS Code 官網 https://code.visualstudio.com/，下載並安裝適合你的操作系統的版本。*
2. Playwright 官方提供簡單明瞭的安裝流程，VS Code 內建支援也非常方便。

步驟

1. 在專案資料夾中開啟 VS Code，打開 Terminal (`Ctrl+``)。
2. 輸入以下指令，初始化 Playwright 專案：

   npm init playwright@latest
   

3. 在安裝過程中，請依照提示選擇你的語言（例如 TypeScript）、要安裝的瀏覽器，以及是否要設定 GitHub Actions。
4. 使用的語言（TypeScript / JavaScript / Python / .NET）
   • 是否安裝瀏覽器（Chromium / Firefox / WebKit）
   • 是否要設定 GitHub Actions
   • 完成後，專案會自動產生以下結構：

     laywright-demo/
     ├─ tests/               # 測試案例
     │   └─ example.spec.ts
     ├─ playwright.config.ts # Playwright 設定檔
     ├─ package.json
     └─ node_modules/## 專案結構
     ``
     

5. 輸入以下指令，即可執行你的測試：

npx playwright test

Install Playwright MCP

Playwright MCP (Model Context Protocol) 讓 AI Agent 能夠直接控制瀏覽器，對於需要進行瀏覽器自動化的情境來說，簡直是如虎添翼。

步驟

1. 前往 Playwright MCP 的 GitHub 頁面，找到 「Getting Started」 區塊，選擇適合你的 VS Code 版本（VS Code 或 VS Code Insiders）。
2. 點擊後，VS Code 會自動開啟，並提示你安裝擴充套件。點擊 「Install」。
3. VS Code 可能會詢問是否信任此擴充套件。請按下 「Trust」，以允許它安裝並執行 Playwright MCP Server。
4. 如果安裝成功，「Install」 按鈕會變成 「Uninstall」。

秘笈傳授：使用 Playwright MCP with GitHub Copilot Chat

現在，我們準備好使用 Playwright MCP 和 GitHub Copilot Chat 來實戰了。回到對話框，昨天我們撰寫的第一個測試情境，我們直接與 AI Agent 對話：

到 https://playwright.dev/ 並且驗證是否有標題 Playwright。

在對話過程中，你可能會看到 AI Agent 需要取得一些權限：

• 啟用自動批准：如果你想讓 AI 自動執行所有步驟，可以直接點選 Enable Auto Approve...。但為了安全起見，建議一步步確認並手動批准每個指令。
• 執行終端機命令：AI 嘗試執行命令時，也會需要你的批准。
  如果一切順利，你將會看到程式碼被自動產生並成功執行的結果。
  

最佳實踐

1. 使用 AI Agent 和 Playwright MCP 能夠執行我們前兩天寫的測試案例和測試情境，仍可能不一致。為了確保每次執行都能得到相同的結果，請在提示中盡可能詳細地說明輸入與輸出的預期結果，這也是往後幾天，我們會建立 prompt 和 chatmode 讓 AI Agent 能夠依照我們預期的撰寫測試和測試程式碼。
2. 別急著「自動批准」：特別是在不熟悉的流程中，最好一步步確認每個指令的用途，避免意外狀況。

收功：今日總結

今天我們完成基本的內功修煉：

• 安裝了 GitHub Copilot、VS Code、Playwright 和 Playwright MCP。
• 學會如何透過 Copilot Chat，讓 AI Agent 執行我們的測試情境。