UI 模式
簡介
UI 模式讓您探索、執行和偵錯測試，並具有時間旅行體驗，以及監看模式。所有測試檔案都會顯示在測試側邊欄中，讓您可以展開每個檔案和描述區塊，以個別執行、檢視、監看和偵錯每個測試。依名稱、專案（在您的 playwright.config 檔案中設定）、@tag 或通過、失敗和略過的執行狀態篩選測試。查看測試的完整追蹤，並在每個動作上來回懸停，以查看每個步驟期間發生的情況。您也可以彈出指定時刻的 DOM 快照到單獨的視窗中，以獲得更好的偵錯體驗。
開啟 UI 模式
若要開啟 UI 模式，請在終端機中執行下列命令
npx playwright test --ui
執行您的測試
啟動 UI 模式後，您會看到所有測試檔案的清單。您可以按一下側邊欄中的三角形圖示來執行所有測試。您也可以執行單個測試檔案、一組測試或單個測試，方法是將滑鼠懸停在名稱上，然後按一下其旁邊的三角形。
篩選測試
依文字或 @tag 或通過、失敗或略過的測試篩選測試。您也可以依您的 playwright.config 檔案中設定的專案篩選。如果您使用專案相依性，請務必先執行設定測試，再執行相依於它們的測試。UI 模式不會考慮設定測試，因此您必須先手動執行它們。
時間軸檢視
在追蹤的頂端，您可以看到測試的時間軸檢視，其中不同的顏色會醒目提示導航和動作。來回懸停以查看每個動作的影像快照。按兩下動作以查看該動作的時間範圍。您可以使用時間軸中的滑桿來增加選取的動作，這些動作將顯示在「動作」標籤中，並且所有主控台記錄和網路記錄都將篩選為僅顯示選取動作的記錄。
動作
在「動作」標籤中，您可以看到每個動作使用了哪個定位器，以及每個動作執行所需的時間。將滑鼠懸停在測試的每個動作上，並以視覺方式查看 DOM 快照中的變更。在時間中來回移動，然後按一下動作以檢查和偵錯。使用「之前」和「之後」標籤，以視覺方式查看動作之前和之後發生的情況。
彈出並檢查 DOM
按一下 DOM 快照上方的彈出圖示，將 DOM 快照彈出到自己的視窗中，以獲得更好的偵錯體驗。從那裡您可以開啟瀏覽器開發人員工具並檢查 HTML、CSS、主控台等。返回 UI 模式並按一下另一個動作，然後彈出該動作，以輕鬆地並排比較這兩個動作或個別偵錯每個動作。
選取定位器
按一下「選取定位器」按鈕，然後將滑鼠懸停在 DOM 快照上，以查看每個元素的定位器，這些元素會在您懸停時醒目提示。按一下元素以新增定位器遊樂場。您可以在遊樂場中修改定位器，並查看您修改的定位器是否與 DOM 快照中的任何定位器相符。對定位器感到滿意後，您可以使用複製按鈕複製定位器並將其貼到您的測試中。
來源
當您將滑鼠懸停在測試的每個動作上時，該動作的程式碼行會在來源面板中醒目提示。
呼叫
「呼叫」標籤會顯示有關動作的資訊，例如所花費的時間、使用的定位器、是否處於嚴格模式以及使用的金鑰。
記錄
查看測試的完整記錄，以更好地瞭解 Playwright 在幕後執行的操作，例如捲動到檢視畫面、等待元素可見、啟用和穩定，以及執行按一下、填寫、按下等動作。
錯誤
如果您的測試失敗，您會在「錯誤」標籤中看到每個測試的錯誤訊息。時間軸也會顯示一條紅線，醒目提示錯誤發生的位置。您也可以按一下「來源」標籤，以查看錯誤所在的原始碼行。
主控台
查看來自瀏覽器以及測試的主控台記錄。會顯示不同的圖示，以向您顯示主控台記錄是來自瀏覽器還是來自測試檔案。
網路
「網路」標籤會顯示測試期間發出的所有網路請求。您可以依不同的請求類型、狀態碼、方法、請求、內容類型、持續時間和大小排序。按一下請求以查看有關它的更多資訊，例如請求標頭、回應標頭、請求本文和回應本文。
附件
「附件」標籤可讓您探索附件。如果您正在執行視覺迴歸測試，您將能夠透過檢查影像差異、實際影像和預期影像來比較螢幕截圖。當您按一下預期影像時，您可以使用滑桿將一個影像滑到另一個影像上，以便您可以輕鬆地查看螢幕截圖中的差異。
中繼資料
在「動作」標籤旁邊，您會找到「中繼資料」標籤，其中會顯示有關測試的更多資訊，例如瀏覽器、視口大小、測試持續時間等等。
監看模式
在側邊欄中每個測試的名稱旁邊，您都會找到一個眼睛圖示。按一下圖示將啟動監看模式，當您對其進行變更時，它將重新執行測試。您可以同時監看多個測試，方法是按一下每個測試旁邊的眼睛圖示，或按一下側邊欄頂端的眼睛圖示來監看所有測試。如果您使用 VS Code，則可以透過按一下眼睛圖示旁邊的檔案圖示輕鬆開啟測試。這會在 VS Code 中開啟您的測試，並直接跳到您按一下的程式碼行。
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，預設情況下連接埠只能從您的帳戶存取。