VS Code 快速入門
簡介
Playwright Test 是專為滿足端到端測試需求而建立的。Playwright 支援所有現代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上進行測試，可以在本地或 CI 上，無頭或有頭，並支援 Google Chrome for Android 和 Mobile Safari 的原生行動模擬。
開始安裝 Playwright 並生成測試以查看其運行效果。或者，您也可以開始並使用 CLI 執行您的測試。
安裝
從 VS Code marketplace 安裝 VS Code 擴充套件 或從 VS Code 的 Extensions 頁籤。
一旦安裝完成，打開命令面板並輸入:
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 的選單中逐步執行測試、暫停測試並重新執行測試。
要了解更多關於除錯的資訊，請參見 Debugging in 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 按鈕。這會在當前游標位置將動作生成到現有測試中。您可以執行測試，將游標定位到測試結尾並繼續生成測試。
選擇定位器
選擇一個 locator 並通過點擊測試側邊欄中的 Pick locator 按鈕將其複製到你的測試檔案中。然後在瀏覽器中點擊你需要的元素，它現在會顯示在 VS Code 的 Pick locator 框中。按下鍵盤上的 'enter' 鍵將定位器複製到剪貼簿，然後將其粘貼到程式碼中的任何位置。或者如果你想取消，請按 'escape'。
Playwright 會查看你的頁面並找出最佳定位器，優先考慮role, text 和 test id 定位器。如果產生器找到多個與定位器匹配的元素，它將改進定位器以使其具有彈性並唯一識別目標元素，因此你不必擔心因定位器而導致測試失敗。
專案相依套件
你可以使用 專案相依性 來執行依賴其他測試的測試。這對於設定測試（例如登錄網站）非常有用。
執行設定測試
要 執行您的設定測試，請從 Playwright 側邊欄的專案部分中選擇配置檔案中定義的 setup 專案。這將使您可以在測試瀏覽器中訪問 setup 測試。
當你執行依賴於 設定 測試的測試時，設定 測試將首先執行。每次你執行測試時，設定 測試將再次執行。
執行設定測試僅一次
要僅執行一次 setup 測試，請在 Playwright 側邊欄的專案部分取消選擇它。setup 測試現在已從測試瀏覽器中移除。當您執行依賴於 setup 測試的測試時，它將不再執行 setup 測試，使其速度更快，因此開發人員體驗更好。
全域設定
全域設定 測試會在你執行第一次測試時運行。這只會運行一次，對於設定資料庫或啟動伺服器非常有用。你可以通過點擊 Playwright 側邊欄中 Setup 部分的 Run global setup 選項手動運行 全域設定 測試。你也可以通過點擊 Run global teardown 選項運行 全域拆卸 測試。
全域設定會在您偵錯測試時重新執行，因為這確保了測試的隔離環境和專用設定。
多重設定配置
如果你的專案包含多個 Playwright 設定檔，你可以先點擊 Playwright 側邊欄右上角的齒輪圖示來切換它們。這將顯示專案中的所有設定檔。通過勾選每個設定檔旁邊的複選框並點擊 'ok' 按鈕來選擇你想要使用的設定檔。
您現在可以在測試瀏覽器中訪問所有測試。要執行測試，請點擊文件或項目名稱旁邊的灰色三角形。
要執行所有配置的所有測試，請點擊測試瀏覽器頂部的灰色三角形。
要選擇要使用的配置文件，只需通過點擊 Playwright 側邊欄中的配置文件名稱在它們之間 切換。現在當你使用工具時，例如記錄測試，它將為選定的配置文件記錄測試。
您可以通過點擊 Playwright 側邊欄中的配置文件名稱輕鬆地在配置之間來回切換。