開始使用 - VS Code
簡介
Playwright Test 的創建是為了滿足端對端測試的需求。Playwright 支援所有現代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上進行測試，本地或在 CI 上，無頭或有頭模式，並具有適用於 Android 的 Google Chrome 和 Mobile Safari 的原生行動裝置模擬。
開始使用的方法是安裝 Playwright 並產生一個測試來查看其運作方式。或者，您也可以開始使用 CLI 來執行您的測試。
安裝
Playwright 有一個 VS Code 擴充套件，當使用 Node.js 進行測試時可以使用。從 VS Code Marketplace 或從 VS Code 中的擴充功能標籤安裝它。
安裝完成後，打開命令面板並輸入
Install Playwright
選擇 Test: Install Playwright 並選擇您想要在其上執行測試的瀏覽器。這些瀏覽器稍後可以在 playwright.config 檔案中配置。您也可以選擇是否要設定 GitHub Actions 來 在 CI 上執行您的測試。
打開測試側邊欄
測試側邊欄可以通過點擊活動欄中的測試圖示來打開。這將讓您訪問測試瀏覽器，它將顯示您專案中的所有測試，以及 Playwright 側邊欄，其中包含專案、設定、工具和設定。
執行測試
您可以通過點擊測試區塊旁邊的綠色三角形來執行單個測試。Playwright 將逐行執行測試，當它完成時，您將在測試區塊旁邊看到一個綠色勾號，以及執行測試所花費的時間。
執行測試並顯示瀏覽器
您也可以通過在測試側邊欄中選擇 Show Browsers 選項來執行測試並顯示瀏覽器。然後，當您點擊綠色三角形來執行測試時，瀏覽器將會打開，您將可視化地看到它執行您的測試。如果您希望所有測試都打開瀏覽器，請保持選中此選項，如果您希望測試在無頭模式下運行而不打開瀏覽器，請取消選中它。
使用 Close all browsers 按鈕關閉所有瀏覽器。
檢視和執行所有測試
在測試側邊欄中檢視所有測試，並通過點擊每個測試來展開測試。尚未執行的測試旁邊不會有綠色勾號。通過將滑鼠懸停在測試側邊欄中的測試上方時點擊白色三角形來執行所有測試。
在多個瀏覽器上執行測試
Playwright 側邊欄的第一個部分是專案部分。在這裡，您可以看到 Playwright 配置檔案中定義的所有專案。安裝 Playwright 時的預設配置為您提供了 3 個專案：Chromium、Firefox 和 WebKit。預設情況下選擇了第一個專案。
要在多個專案上執行測試，請通過選取專案名稱旁邊的核取方塊來選擇每個專案。然後，當您從側邊欄或通過按下測試名稱旁邊的播放按鈕來執行測試時，測試將在所有選定的專案上執行。
您也可以通過點擊測試的專案名稱旁邊的灰色播放按鈕，在特定專案上單獨執行測試。
使用追蹤檢視器執行測試
為了獲得更好的開發人員體驗，您可以使用 Show Trace Viewer 選項執行測試。
這將打開您的測試的完整追蹤，您可以在其中逐步執行測試的每個動作，探索時間軸、原始碼等等。
要了解有關追蹤檢視器的更多資訊，請參閱我們的 追蹤檢視器指南。
偵錯測試
使用 VS Code 擴充套件，您可以在 VS Code 中直接偵錯測試，查看錯誤訊息、建立中斷點和即時偵錯測試。
錯誤訊息
如果您的測試失敗，VS Code 將在編輯器中直接顯示錯誤訊息，顯示預期的內容、接收到的內容以及完整的呼叫日誌。
即時偵錯
您可以在 VS Code 中即時偵錯您的測試。在使用 Show Browser 選項選取的情況下執行測試後，點擊 VS Code 中的任何定位器，它將在瀏覽器視窗中突出顯示。如果 Playwright 突出顯示它，則表示它存在，並顯示是否有超過一個結果
您也可以在 VS Code 中編輯定位器，Playwright 將在瀏覽器視窗中即時顯示更改。
在偵錯模式下執行
要設定中斷點，請點擊您要設定中斷點的行號旁邊，直到出現紅色圓點。通過右鍵點擊您要執行的測試旁邊的行，在偵錯模式下執行測試。
瀏覽器視窗將會打開，測試將會執行並在設定中斷點的位置暫停。您可以逐步執行測試、暫停測試並從 VS Code 的選單中重新執行測試。
要了解有關偵錯的更多資訊，請參閱 Visual Studio Code 中的偵錯。
使用追蹤檢視器偵錯
為了獲得更好的開發人員體驗，您可以使用 Show Trace Viewer 選項偵錯您的測試。
這將打開您的測試的完整追蹤，您可以在其中逐步執行每個動作，並查看動作之前和之後發生的情況。您還可以檢查 DOM 快照、查看主控台日誌、網路請求、原始碼等等。
要了解有關追蹤檢視器的更多資訊，請參閱我們的 追蹤檢視器指南。
產生測試
當您在瀏覽器中執行動作時，CodeGen 將自動為您產生測試，並且是快速入門的好方法。瀏覽器視窗的視口設定為特定的寬度和高度。請參閱 組態指南 以更改視口或模擬不同的環境。
錄製新測試
要錄製測試，請點擊測試側邊欄中的 Record new 按鈕。這將建立一個 test-1.spec.ts 檔案，並打開一個瀏覽器視窗。在瀏覽器中，轉到您要測試的 URL 並開始點擊。Playwright 將記錄您的動作，並直接在 VS Code 中產生測試程式碼。您還可以通過選擇工具欄中的圖示之一，然後點擊頁面上的元素以進行斷言來產生斷言。可以產生以下斷言
'assert visibility'以斷言元素是否可見'assert text'以斷言元素是否包含特定文字'assert value'以斷言元素是否具有特定值
完成錄製後，點擊 cancel 按鈕或關閉瀏覽器視窗。然後，您可以檢查您的 test-1.spec.ts 檔案並查看您產生的測試。
在游標位置錄製
要從測試檔案中的特定點開始錄製，請點擊測試側邊欄中的 Record at cursor 按鈕。這會在目前游標位置將動作產生到現有的測試中。您可以執行測試，將游標放在測試的末尾，然後繼續產生測試。
選取定位器
通過點擊測試側邊欄中的 Pick locator 按鈕，選取一個 定位器 並將其複製到您的測試檔案中。然後在瀏覽器中點擊您需要的元素，它現在將顯示在 VS Code 的 Pick locator 方塊中。按下鍵盤上的“enter”鍵將定位器複製到剪貼簿，然後貼到程式碼中的任何位置。或者，如果您想取消，請按“escape”鍵。
Playwright 將查看您的頁面並找出最佳定位器，優先考慮 角色、文字和測試 ID 定位器。如果產生器找到多個與定位器匹配的元素，它將改進定位器，使其具有彈性並唯一識別目標元素，因此您不必擔心由於定位器而導致測試失敗。
專案依賴項
您可以使用 專案依賴項 來執行依賴於其他測試的測試。這對於 setup 測試（例如登入網站）非常有用。
執行設定測試
要執行您的設定測試，請從 Playwright 側邊欄中的專案部分選取 setup 專案，如您的配置檔案中所定義。這將讓您訪問測試瀏覽器中的 setup 測試。
當您執行依賴於 setup 測試的測試時，setup 測試將首先執行。每次您執行測試時，setup 測試將再次執行。
僅執行一次設定測試
要僅執行一次 setup 測試，請從 Playwright 側邊欄中的專案部分取消選取它。現在，setup 測試已從測試瀏覽器中移除。當您執行依賴於 setup 測試的測試時，它將不再執行 setup 測試，使其速度更快，從而提供更好的開發人員體驗。
全域設定
全域設定 在您執行第一個測試時運行。它只運行一次，對於設定資料庫或啟動伺服器非常有用。您可以通過點擊 Playwright 側邊欄中 Setup 部分的 Run global setup 選項來手動運行 global setup。全域拆解 預設情況下不運行；您需要通過點擊 Run global teardown 選項來手動啟動它。
當您偵錯測試時，全域設定將重新運行，因為這確保了隔離的環境和專用於測試的設定。
多個配置
如果您的專案包含多個 playwright 配置檔案，您可以通過首先點擊 Playwright 側邊欄右上角的齒輪圖示在它們之間切換。這將顯示您專案中的所有配置檔案。通過選取每個配置檔案旁邊的核取方塊並點擊“ok”按鈕，選擇您要使用的配置檔案。
您現在可以訪問測試瀏覽器中的所有測試。要執行測試，請點擊檔案或專案名稱旁邊的灰色三角形。
要從所有配置執行所有測試，請點擊測試瀏覽器頂部的灰色三角形。
要選擇要使用的配置檔案，只需通過點擊 Playwright 側邊欄中的配置檔案名稱在它們之間切換。現在，當您使用工具（例如錄製測試）時，它將為選定的配置檔案錄製測試。
您可以通過點擊 Playwright 側邊欄中的配置檔案名稱，輕鬆地在配置之間來回切換。