追蹤檢視器

簡介

Playwright 追蹤檢視器是一個 GUI 工具，可協助您在腳本執行後探索錄製的 Playwright 追蹤。追蹤是在 CI 上測試失敗時偵錯的絕佳方式。您可以在本機或在瀏覽器上透過 trace.playwright.dev 開啟追蹤。

開啟追蹤檢視器

您可以使用 Playwright CLI 或在瀏覽器上透過 trace.playwright.dev 開啟已儲存的追蹤。請務必新增 trace.zip 檔案所在位置的完整路徑。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"

使用 trace.playwright.dev

trace.playwright.dev 是追蹤檢視器的靜態託管變體。您可以使用拖放或透過 Select file(s) 按鈕上傳追蹤檔案。

追蹤檢視器完全在您的瀏覽器中載入追蹤，且不會向外部傳輸任何資料。

檢視遠端追蹤

您可以直接使用其 URL 開啟遠端追蹤。這讓您可以輕鬆檢視遠端追蹤，而無需手動從 CI 執行下載檔案等。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace https://example.com/trace.zip"

當使用 trace.playwright.dev 時，您也可以將上傳追蹤的 URL 作為查詢參數傳遞到某些可存取的儲存空間 (例如在您的 CI 內部)。CORS (跨來源資源共享) 規則可能適用。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip

錄製追蹤

可以使用 BrowserContext.tracing() API 錄製追蹤，如下所示

Browser browser = browserType.launch();
BrowserContext context = browser.newContext();

// Start tracing before creating / navigating a page.
context.tracing().start(new Tracing.StartOptions()
  .setScreenshots(true)
  .setSnapshots(true)
  .setSources(true));

Page page = context.newPage();
page.navigate("https://playwright.dev.org.tw");

// Stop tracing and export it into a zip archive.
context.tracing().stop(new Tracing.StopOptions()
  .setPath(Paths.get("trace.zip")));

這將錄製追蹤並將其放入名為 trace.zip 的檔案中。

追蹤檢視器功能

動作

在「動作」標籤中，您可以看到每個動作使用了哪個定位器，以及每個動作執行所需的時間。將滑鼠懸停在測試的每個動作上，並以視覺方式查看 DOM 快照中的變更。在時間軸中來回移動，並點擊一個動作以檢查和偵錯。使用「之前」和「之後」標籤以視覺方式查看動作之前和之後發生的情況。

選取每個動作會顯示

• 動作快照
• 動作日誌
• 原始碼位置

螢幕截圖

當使用開啟的 setScreenshots 選項 (預設) 進行追蹤時，每個追蹤都會錄製螢幕錄影，並將其呈現為膠片。您可以將滑鼠懸停在膠片上，以查看每個動作和狀態的放大影像，這可協助您輕鬆找到要檢查的動作。

雙擊一個動作以查看該動作的時間範圍。您可以使用時間軸中的滑桿來增加選取的動作，這些動作將顯示在「動作」標籤中，並且所有主控台日誌和網路日誌都將被篩選，僅顯示選取動作的日誌。

快照

當使用開啟的 setSnapshots 選項 (預設) 進行追蹤時，Playwright 會為每個動作擷取一組完整的 DOM 快照。根據動作的類型，它將擷取

類型	描述
之前	呼叫動作時的快照。
動作	執行輸入時的快照。當探索 Playwright 點擊的確切位置時，此類型的快照特別有用。
之後	動作後的快照。

以下是典型的動作快照的外觀

請注意它如何同時突出顯示 DOM 節點和確切的點擊位置。

原始碼

當您點擊側邊欄中的動作時，該動作的程式碼行會在原始碼面板中突出顯示。

調用

「調用」標籤顯示有關動作的資訊，例如花費的時間、使用的定位器、是否處於嚴格模式以及使用的按鍵。

日誌

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

錯誤

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

主控台

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

雙擊動作側邊欄中測試的動作。這將篩選主控台，僅顯示在該動作期間產生的日誌。點擊顯示全部按鈕以再次查看所有主控台日誌。

使用時間軸篩選動作，方法是點擊起點並拖曳到終點。「主控台」標籤也將被篩選，僅顯示在選取動作期間產生的日誌。

網路

「網路」標籤顯示測試期間發出的所有網路請求。您可以按不同類型的請求、狀態碼、方法、請求、內容類型、持續時間和大小進行排序。點擊請求以查看有關它的更多資訊，例如請求標頭、回應標頭、請求內文和回應內文。

雙擊動作側邊欄中測試的動作。這將篩選網路請求，僅顯示在該動作期間發出的請求。點擊顯示全部按鈕以再次查看所有網路請求。

使用時間軸篩選動作，方法是點擊起點並拖曳到終點。「網路」標籤也將被篩選，僅顯示在選取動作期間發出的網路請求。

元數據

在「動作」標籤旁邊，您會找到「元數據」標籤，其中將顯示有關測試的更多資訊，例如瀏覽器、viewport 大小、測試持續時間等。