Skip to main content

VS Code 快速入門

簡介​

Playwright VS Code 擴充功能將 Playwright Test 的強大功能直接帶入您的編輯器，讓您能夠以無縫的 UI 導向體驗執行、偵錯和產生測試。本指南將引導您設置該擴充功能，並使用其核心功能來強化您的端對端測試工作流程。

前置需求​

在開始之前，請確保您已安裝以下項目：

快速入門​

安裝與設置​

  1. 安裝擴充功能：在 VS Code 中開啟擴充功能檢視（Ctrl+Shift+X 或 Cmd+Shift+X）並搜尋 "Playwright"。安裝 Microsoft 的官方擴充功能。
  1. 安裝 Playwright：安裝擴充功能後，開啟命令選擇區（Ctrl+Shift+P 或 Cmd+Shift+P）並執行 Test: Install Playwright 命令。
  1. 選擇瀏覽器：選擇您要用於測試的瀏覽器（例如：Chromium、Firefox、WebKit）。您也可以新增 GitHub Actions 工作流程以在 CI 中執行測試。這些設定可稍後在您的 playwright.config.ts 檔案中變更。

開啟測試側邊欄​

點擊 VS Code 活動列中的測試圖示以開啟測試探索器。在這裡，您會找到您的測試，以及用於管理專案、工具和設定的 Playwright 側邊欄。

核心功能​

執行您的測試​

  • 執行單一測試：點擊任何測試旁邊的綠色「播放」圖示來執行測試。如果測試通過，播放按鈕會變成綠色勾選標記；如果測試失敗，則會顯示紅色 X。您可以看到測試名稱旁邊顯示的測試執行時間。此外，VS Code 底部的測試結果面板會自動開啟，顯示測試執行摘要，包括有多少測試執行、多少通過、失敗或跳過，以及總執行時間。
  • 執行所有測試：您可以在不同層級執行所有測試。點擊特定測試檔案旁邊的播放圖示來執行該檔案內的所有測試，或點擊測試探索器最頂部的播放圖示來執行整個專案的所有測試。
  • 在多個瀏覽器上執行：在 Playwright 側邊欄中，勾選您要測試的專案（瀏覽器）核取方塊。Playwright 中的專案代表不同的瀏覽器配置 - 每個專案通常對應一個特定的瀏覽器（如 Chromium、Firefox 或 WebKit），並具有自己的設定，例如檢視區大小、裝置模擬或其他瀏覽器特定選項。當您執行測試時，它會在所有選定的專案上執行，讓您驗證應用程式在不同瀏覽器和配置中的一致性運作。
  • 顯示瀏覽器：要觀看測試在即時瀏覽器視窗中執行，請在側邊欄中啟用顯示瀏覽器選項。停用此選項可在無頭模式下執行（測試在背景執行而不開啟可見的瀏覽器視窗）。

偵錯您的測試​

VS Code 擴充功能提供強大的偵錯工具，協助您識別和修復測試中的問題。您可以設定中斷點、檢查變數、檢視詳細的錯誤訊息、取得 AI 支援的建議來解決測試失敗，並使用全面的追蹤檢視器逐步分析測試執行。

  • 使用中斷點：點擊行號旁邊的邊槽設定中斷點。右鍵點擊測試並選擇偵錯測試。測試會在您的中斷點處暫停，讓您可以檢查變數並逐步執行程式碼。
  • 即時偵錯：啟用顯示瀏覽器後，點擊程式碼中的定位器。Playwright 會在瀏覽器中標亮對應的元素，讓您輕鬆驗證定位器。
  • 檢視錯誤訊息：如果測試失敗，擴充功能會直接在編輯器中顯示詳細的錯誤訊息，包括預期值與實際值的對比以及完整的呼叫記錄。
  • 使用 AI 修復：當測試失敗時，點擊錯誤旁邊的星形圖示，從 Copilot 取得 AI 支援的修復建議。Copilot 會分析錯誤並建議程式碼變更來解決問題。
  • 使用追蹤檢視器偵錯：要進行全面偵錯，請在 Playwright 側邊欄中啟用顯示追蹤檢視器選項。當測試完成時，詳細的追蹤會自動開啟，為您提供測試執行的完整時間軸。追蹤檢視器特別適用於：
  • 逐步分析：使用精確的時間戳記瀏覽測試執行的每個動作
  • DOM 檢查：檢視測試執行期間任何時間點的 DOM 快照，以查看頁面的確切外觀
  • 網路監控：檢查測試期間發生的所有網路請求和回應
  • 主控台記錄：存取瀏覽器的所有主控台訊息和錯誤
  • 原始碼對應：直接跳轉到執行每個動作的原始碼
  • 視覺偵錯：檢視螢幕截圖並了解使用者在每個步驟會看到的內容

追蹤檢視器在偵錯不穩定測試或了解複雜使用者互動時特別有價值。

要了解更多，請參閱我們的追蹤檢視器指南。

使用 CodeGen 產生測試​

CodeGen 是 Playwright 強大的測試產生工具，可通過記錄您與網頁的互動來自動建立測試程式碼。您無需從零開始編寫測試，只需瀏覽您的應用程式，CodeGen 就會擷取您的動作並將其轉換為可靠的測試程式碼，包含適當的定位器和斷言。

  • 錄製新測試：點擊側邊欄中的錄製新測試。瀏覽器視窗會開啟。當您與頁面互動時，Playwright 會自動產生測試程式碼。您也可以從錄製工具列產生斷言。
  • 在游標處錄製：將游標放置在現有測試內，然後點擊在游標處錄製，在該特定位置新增新動作。
  • 選取定位器：使用選取定位器工具點擊開啟瀏覽器中的任何元素。Playwright 會決定最佳定位器並將其複製到剪貼簿，準備貼到您的程式碼中。

要了解更多，請參閱我們的 CodeGen 指南。

進階功能​

專案相依性​

使用專案相依性定義在其他測試之前執行的設置測試。例如，您可以建立先執行的登入測試，然後在多個測試中重複使用該已驗證狀態，而無需為每個測試重新登入。在 VS Code 中，您可以在測試探索器中看到這些設置測試，並在需要時獨立執行它們。

要了解更多，請參閱我們的專案相依性指南。

全域設置​

對於需要在所有測試之前只執行一次的任務（如資料庫初始化），請使用全域設置。您可以從 Playwright 側邊欄手動觸發全域設置和拆卸。

多重配置​

如果您有多個 playwright.config.ts 檔案，可以使用 Playwright 側邊欄中的齒輪圖示在它們之間切換。這讓您能夠輕鬆使用不同的測試套件或環境。

快速參考​

動作在 VS Code 中的執行方式
安裝 Playwright命令選擇區 → Test: Install Playwright
執行測試點擊測試旁邊的「播放」圖示
偵錯測試設定中斷點，右鍵點擊測試 → Debug Test
顯示即時瀏覽器在 Playwright 側邊欄中啟用 Show Browsers
錄製新測試在 Playwright 側邊欄中點擊 Record new
選取定位器在 Playwright 側邊欄中點擊 Pick locator
檢視測試追蹤在 Playwright 側邊欄中啟用 Show Trace Viewer

下一步​