練習：在 Visual Studio Code 中使用 Playwright

已完成

在上一節中，我們逐步解說了與 Playwright Test Configuration 和 Playwright 測試規格相關的核心概念，但我們使用 Playwright Commandline （CLI） 來執行測試及檢視報表。

如果我們可以在 Visual Studio Code 環境中 執行它，並有一個更 可視化 的互動程式來撰寫、執行和偵錯我們的測試，該怎麼辦？

透過 適用於 Visual Studio Code 擴充功能的 Playwright 測試，您可以取得優越的開發人員體驗 和一些獨特的工具功能 ，讓其成為與 Playwright 測試執行器互動的慣用方式。 讓我們開始導覽吧。

入門指南

Playwright 文件具有詳細的教學課程，其中包含影片解說，建議您有時間時觀看。 在本課程中，我們將嘗試逐步解說這些練習的子集，讓熟悉使用方式。

安裝 Playwright 擴充功能

從 Visual Studio Code Marketplace 安裝延伸模組。 安裝之後，您應該在 Visual Studio Code 視窗左側發現一個燒杯圖示，如螢幕快照所示。 請注意，延伸模組如何自動偵測和收集專案中的測試規格。

測試執行 (無頭)

若要以無外設方式執行測試（沒有瀏覽器視窗），請確定未核取 [顯示瀏覽器 ] 和 [ 顯示追蹤查看器 ] 選項。 選取example.spec.ts檔案第 3 行的綠色播放按鈕，以執行第一個測試。 您也可以選取測試總管資訊看板中的灰色撥放按鈕，以執行檔案中的所有測試或執行特定測試。

執行測試之後，[ 測試結果] 索引標籤會開啟一個視窗，您可以在其中查看測試執行的完整歷程記錄。 您也可以向下切入至測試，然後選取 [ 執行測試 ] 以重新執行該特定測試。

顯示瀏覽器 (有頭)

如果您想要以 前端 模式執行，這表示在開啟瀏覽器視窗的情況下執行測試，您可以先核取 [顯示瀏覽器 ] 方塊，再執行測試。

Playwright 是一個非常快速的使用者，因此在使用 Show 瀏覽器時，很難追蹤測試中發生的情況。 若要進行偵錯，建議您使用 [顯示追蹤查看器] 選項。

顯示追蹤檢視器 (有頭)

請勾選 [顯示追蹤查看器] 方塊，然後在第二個測試中按綠色 播放 按鈕。 這會啟動追蹤視圖視窗，讓您看到測試執行的視覺化呈現。

在頂端，您將會看到測試的時間表，您可以將滑鼠停留在上方以查看瀏覽器的狀態。 若要選取要專注的特定時間範圍，請選取並拖曳時程表。

在左側資訊看板中，您可以查看測試執行期間執行的動作。 如果您選取 locator.click 操作，您會在 DOM 快照的 [開始使用] 按鈕上看到一個紅點。

接下來，選取 expect.toBeVisible 判斷提示，您將看到 DOM 快照集已變更以顯示 [安裝] 頁面，在判斷提示的標題上醒目提示。 在 DOM 快照集上方，您可以選取 [之前 ] 和 [ 之後 ] 按鈕，以查看執行動作前後 DOM 的狀態。

您可以選取右上角的 快顯 圖示，將 DOM 快照集彈出至個別視窗。 如果您想要在偵錯測試時檢查 DOM，這可以提供幫助。

在談到偵錯時，您也可以選取底部面板中的 [ 挑選定位器 ] 按鈕，從 DOM 快照集挑選定位器。 然後，將滑鼠停留在 DOM 快照上的元素上，以查看該元素的定位資訊。 選擇一個元素會將它新增至追蹤查看器底部的 定位器 方塊，您可以在那裡編輯，再將它複製到剪貼簿。

您可以隨意自行探索追蹤查看器的其餘功能，例如 [通話]、 [控制台]、[ 網络] 和 [ 來源 ] 索引卷標。

偵錯測試

若要進行偵錯，建議您使用 [顯示追蹤查看器 ] 選項來執行測試，並使用測試的追蹤來進一步了解發生的情況。

不過，使用 Visual Studio Code 擴充功能，您也可以直接在 Visual Studio Code 中對測試進行偵錯，查看錯誤訊息、建立斷點，以及即時偵錯您的測試。 從文件中瞭解更多 ，或觀看下列影片以更好地了解偵錯支援。

產生測試

CodeGen 會在您在瀏覽器中執行動作時為您產生測試，使其成為開始撰寫複雜工作流程測試的最簡單方式。

若要產生測試，請選取 Visual Studio Code 中測試提要欄位中的 [記錄新 ] 按鈕。 這會開啟瀏覽器視窗，您可以在其中執行將記錄並轉換成測試的動作。 您也會注意到，資料夾 tests 中有一個新檔案，是由產生的測試建立的。

在瀏覽器視窗中輸入 URL，並如同使用者開始執行動作。 您將會在 VS Code 中看到測試檔案中正在記錄動作。

讓我們前往 Playwright 網站並選取 [ 開始使用 ] 按鈕，以重新建立我們稍早執行的簡單測試。 然後，我們可以從 Codegen 工具列中選取 確認可見性 圖示，並選取 安裝 標題來確認其是否可見。

在下列影片中深入瞭解如何產生測試。

後續步驟

在本節中，您已瞭解如何使用 Visual Studio Code 擴充功能來尋找及執行測試，以及如何使用追蹤查看器來取得偵錯測試的更視覺體驗。

您也瞭解了 Visual Studio Code 如何提供更豐富的工具，以透過記錄新測試、選擇定位器和在游標位置記錄等功能來生成測試。 現在，是時候在引導式專案中 套用 您的 Playwright Fundamentals 學習，為我們的範例應用程式建置端對端測試規格。