Skip to main content

UI 模式

簡介​

UI 模式讓你以時間旅行的體驗來探索、執行和偵錯測試，並且完整配備觀察模式。所有測試檔案都會載入到測試側邊欄中，你可以展開每個檔案和描述區塊來個別執行、查看、觀察和偵錯每個測試。可以依據 text 或 @tag 或 passed 、 failed 和 skipped 的測試以及 projects 來篩選測試，這些設定在你的 playwright.config 檔案中。查看測試的完整追蹤，並在每個動作上來回懸停以查看每一步驟中發生的事情，並將 DOM 快照彈出到單獨的視窗中，以獲得更好的偵錯體驗。

開啟 UI 模式​

要開啟 UI 模式，請在終端機中執行以下命令:

npx playwright test --ui

執行你的測試​

一旦你啟動 UI 模式，你將會看到所有測試檔案的列表。你可以點擊側邊欄的三角形圖標來執行所有測試。你也可以通過懸停在名稱上並點擊旁邊的三角形來執行單個測試檔案、一組測試或單個測試。

執行測試在 ui 模式

過濾測試​

篩選測試依據文字或 @tag 或通過、失敗或跳過的測試。你也可以依據 projects 篩選，這些設定在你的 playwright.config 檔案中。如果你正在使用專案相依性，請確保先執行你的設定測試，再執行依賴它們的測試。UI 模式不會考慮設定測試，因此你必須手動先執行它們。

篩選測試在 ui 模式

時間軸檢視​

在追蹤的頂部，你可以看到測試的時間軸視圖，不同顏色突出顯示導航和操作。來回懸停以查看每個操作的圖像快照。雙擊某個操作以查看該操作的時間範圍。你可以使用時間軸中的滑塊來增加選擇的操作，這些操作將顯示在操作標籤中，所有控制台日誌和網路日誌將過濾為僅顯示選擇操作的日誌。

時間軸檢視在 ui 模式

Actions​

在 Actions 頁籤中，你可以看到每個動作使用了什麼定位器以及每個動作執行了多長時間。將滑鼠懸停在測試的每個動作上，並直觀地查看 DOM 快照中的變化。回到過去和未來，點擊一個動作來檢查和除錯。使用 Before 和 After 頁籤直觀地查看動作前後發生了什麼。 use before and after actions in ui mode

彈出並檢查 DOM​

將 DOM 快照彈出到自己的窗口中，以獲得更好的偵錯體驗，方法是點擊 DOM 快照上方的彈出圖標。從那裡，您可以打開瀏覽器的 DevTools 並檢查 HTML、CSS、Console 等。返回 UI 模式，點擊另一個 Action 並將其再次彈出，以便輕鬆地並排比較兩者或單獨偵錯每個操作。

pop out dom snapshot in ui mode

選擇定位器​

點擊 pick locator 按鈕並懸停在 DOM 快照上，以查看每個元素的定位器在懸停時突出顯示。點擊一個元素以添加定位器 playground。您可以在 playground 中修改定位器，並查看修改後的定位器是否匹配 DOM 快照中的任何定位器。一旦您對定位器感到滿意，您可以使用複製按鈕來複製定位器並將其粘貼到您的測試中。

pick locator in ui mode

Source​

當您將滑鼠懸停在測試的每個動作上時，該動作的程式碼行會在 Source 面板中突出顯示。

顯示測試的來源程式碼在 ui 模式

Call​

Call 頁籤顯示有關動作的資訊，例如所花費的時間、使用的定位器、是否處於嚴格模式以及使用了什麼鍵。

顯示Call 頁籤在 ui 模式

Log​

查看完整的測試日誌，以更好地了解 Playwright 在幕後執行的操作，例如滾動到視圖中、等待元素可見、啟用和穩定，以及執行點擊、填寫、按壓等操作。

顯示測試日誌在 ui 模式

Errors​

如果您的測試失敗，您將在錯誤標籤中看到每個測試的錯誤訊息。時間軸還會顯示一條紅線，突出顯示錯誤發生的位置。您也可以點擊來源標籤，查看錯誤發生在來源程式碼的哪一行。

顯示錯誤在 ui 模式

Console​

請查看來自瀏覽器以及測試的控制台日誌。不同的圖示會顯示控制台日誌是來自瀏覽器還是測試檔案。

顯示來自測試的控制台日誌在 UI 模式中

Network​

Network 頁籤顯示了測試期間所做的所有網路請求。你可以按不同類型的請求、狀態碼、方法、請求、內容類型、持續時間和大小進行排序。點擊一個請求以查看更多關於它的資訊，例如請求標頭、回應標頭、請求主體和回應主體。

顯示來自測試的網路請求於 UI 模式

Attachments​

"Attachments" 頁籤允許你探索附件。如果你正在進行視覺回歸測試，你將能夠通過檢查圖像差異、實際圖像和預期圖像來比較截圖。當你點擊預期圖像時，你可以使用滑桿將一個圖像滑動到另一個圖像上，以便輕鬆看到截圖中的差異。

ui mode with attachments

Metadata​

在 Actions 分頁旁邊，你會找到 Metadata 分頁，該分頁會顯示更多有關測試的資訊，例如瀏覽器、視口大小、測試持續時間等。

Metadata tab in ui mode

觀看模式​

在側邊欄中每個測試名稱旁邊，你會看到一個眼睛圖標。點擊該圖標將啟用監視模式，當你對測試進行更改時，它將重新執行測試。你可以通過點擊每個測試旁邊的眼睛圖標來同時監視多個測試，或通過點擊側邊欄頂部的眼睛圖標來監視所有測試。如果你使用 VS Code，那麼你可以輕鬆地通過點擊眼睛圖標旁邊的文件圖標來打開你的測試。這將在 VS Code 中直接在你點擊的程式碼行打開你的測試。

watch mode in ui mode

Docker & GitHub Codespaces​

對於 Docker 和 GitHub Codespaces 環境，你可以在瀏覽器中執行 UI 模式。為了使端點能夠在容器外部訪問，需要將其綁定到 0.0.0.0 介面:

npx playwright test --ui-host=0.0.0.0

在 GitHub Codespaces 的情況下，該埠會自動轉發，因此您可以通過點擊終端中的連結在瀏覽器中開啟 UI 模式。

要有一個靜態埠號(Port)，你可以傳遞 --ui-port 旗標:

npx playwright test --ui-port=8080 --ui-host=0.0.0.0
note

請注意，當指定 --ui-host=0.0.0.0 旗標時，UI 模式與您的追蹤、密碼和秘密可以從您網路內的其他機器存取。在 GitHub Codespaces 的情況下，這些埠預設僅能從您的帳戶存取。