UI 模式
簡介
UI 模式讓您能夠探索、執行和偵錯測試，並提供完整的時光旅行體驗以及觀看模式。所有測試檔案都會顯示在測試側邊欄中，讓您可以展開每個檔案和描述區塊，以個別執行、檢視、觀看和偵錯每個測試。您可以依名稱、專案（在您的 playwright.config 檔案中設定）、@tag，或依執行狀態通過、失敗和跳過來篩選測試。查看您測試的完整追蹤，並在每個動作上懸停前後移動，以查看每個步驟中發生的情況。您也可以將某個時刻的 DOM 快照彈出到獨立視窗中，以獲得更好的偵錯體驗。
開啟 UI 模式
要開啟 UI 模式，請在您的終端機中執行以下指令：
npx playwright test --ui
執行您的測試
一旦您啟動 UI 模式，您將會看到所有測試檔案的列表。您可以點擊側邊欄的三角形圖示來執行所有測試。您也可以通過懸停在名稱上並點擊旁邊的三角形來執行單個測試檔案、一組測試或單個測試。
篩選測試
您可以依文字或 @tag 或依通過、失敗或跳過的測試來篩選測試。您也可以依在您的 playwright.config 檔案中設定的專案進行篩選。如果您使用專案相依性，請確保在執行依賴它們的測試之前先執行您的設定測試。UI 模式不會考慮設定測試，因此您必須先手動執行它們。
時間軸檢視
在追蹤的頂部，您可以看到測試的時間軸檢視，使用不同顏色來突出導航和動作。來回懸停以查看每個動作的圖像快照。雙擊動作以查看該動作的時間範圍。您可以使用時間軸中的滑桿來增加選擇的動作，這些動作將顯示在 Actions 分頁標籤中，所有主控台日誌和網路日誌將被篩選，僅顯示所選動作的日誌。
Actions
在 Actions 分頁標籤中，您可以看到每個動作使用了什麼定位器以及每個動作執行所需的時間。懸停在測試的每個動作上，並在視覺上查看 DOM 快照的變化。在時間中前後移動並點擊動作來檢查和偵錯。使用 Before 和 After 分頁標籤來在視覺上查看動作前後發生了什麼。
彈出並檢查 DOM
通過點擊 DOM 快照上方的彈出圖示，將 DOM 快照彈出到自己的視窗中，以獲得更好的偵錯體驗。從那裡您可以開啟瀏覽器 DevTools 並檢查 HTML、CSS、主控台等。回到 UI 模式並點擊另一個動作，然後將該動作彈出，以輕鬆並排比較兩者或個別偵錯每個動作。
選擇定位器
點擊選擇定位器按鈕並懸停在 DOM 快照上，以查看每個元素的定位器在您懸停時突出顯示。點擊元素以將定位器新增到操作區。您可以在操作區中修改定位器，並查看您修改的定位器是否與 DOM 快照中的任何定位器匹配。一旦您對定位器滿意，您可以使用複製按鈕來複製定位器並將其貼到您的測試中。
Source
當您懸停在測試的每個動作上時，該動作的程式碼行會在原始碼面板中突出顯示。「在 VSCode 中開啟」按鈕位於此部分的右上角。點擊該按鈕後，它將在 VS Code 中開啟您的測試，正好定位到您所點擊的程式碼行。
Call
Call 分頁標籤會顯示您關於動作的資訊，例如執行時間、使用的定位器、是否在嚴格模式以及使用的按鍵。
Log
查看測試的完整日誌，以更好地了解 Playwright 在幕後做的事情，例如滾動到可見區域、等待元素變為可見、啟用和穩定，以及執行動作如點擊、填寫、按下等。
Errors
如果您的測試失敗，您將在 Errors 分頁標籤中看到每個測試的錯誤訊息。時間軸也會顯示一條紅線，突出顯示錯誤發生的位置。您也可以點擊原始碼分頁標籤，查看錯誤發生在原始碼的哪一行。
Console
請查看來自瀏覽器以及測試的主控台日誌。不同的圖示會顯示主控台日誌是來自瀏覽器還是測試檔案。
Network
Network 分頁標籤顯示您測試期間進行的所有網路請求。您可以依不同類型的請求、狀態碼、方法、請求、內容類型、持續時間和大小進行排序。點擊請求以查看更多資訊，例如請求標頭、回應標頭、請求本文和回應本文。
Attachments
「Attachments」分頁標籤讓您探索附件。如果您正在進行視覺回歸測試，您將能夠通過檢查圖像差異、實際圖像和期望圖像來比較螢幕截圖。當您點擊期望圖像時，您可以使用滑桿將一個圖像滑動到另一個圖像上，這樣您就可以輕鬆地看到螢幕截圖中的差異。
Metadata
在 Actions 分頁標籤旁邊，您將找到 Metadata 分頁標籤，它會顯示有關您測試的更多資訊，例如瀏覽器、檢視區大小、測試持續時間等等。
觀看模式
在側邊欄中每個測試名稱旁邊，您將找到一個眼睛圖示。點擊該圖示將啟動觀看模式，當您對測試進行變更時，它會重新執行測試。您可以通過點擊每個測試旁邊的眼睛圖示來同時觀看多個測試，或通過點擊側邊欄頂部的眼睛圖示來觀看所有測試。
Docker & GitHub Codespaces
對於 Docker 和 GitHub Codespaces 環境，您可以在瀏覽器中執行 UI 模式。為了讓端點能夠從容器外部存取，它需要綁定到 0.0.0.0 介面：
npx playwright test --ui-host=0.0.0.0
在 GitHub Codespaces 的情況下，連接埠會自動轉發，因此您可以通過點擊終端機中的連結在瀏覽器中開啟 UI 模式。
要有一個靜態連接埠，您可以傳遞 --ui-port 標誌：
npx playwright test --ui-port=8080 --ui-host=0.0.0.0
請注意，當指定 --ui-host=0.0.0.0 標誌時，帶有您的追蹤、密碼和機密的 UI 模式可以從您網路內的其他機器存取。在 GitHub Codespaces 的情況下，預設情況下連接埠只能從您的帳戶存取。