追蹤檢視器

簡介

Playwright Trace Viewer 是一個 GUI 工具，可以幫助你在腳本執行後探索記錄的 Playwright Traces。Traces 是在 CI 上測試失敗時進行除錯的好方法。你可以在 本地 或在瀏覽器上 trace.playwright.dev 打開 traces。

Trace Viewer features

Actions

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

選擇每個動作會顯示:

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

螢幕截圖

當啟用 screenshots 選項（預設）進行追蹤時，每個追蹤記錄會錄製螢幕錄影並將其呈現為影片條。你可以將滑鼠懸停在影片條上，以查看每個動作和狀態的放大圖像，這有助於你輕鬆找到你想要檢查的動作。

雙擊一個動作以查看該動作的時間範圍。你可以使用時間軸中的滑塊來增加選擇的動作，這些動作將顯示在 Actions 頁籤中，所有控制台日誌和網路日誌將被過濾以僅顯示選擇的動作的日誌。

快照

當開啟 snapshots 選項（預設）進行追蹤時，Playwright 會為每個動作捕捉一組完整的 DOM 快照。根據動作的類型，它將捕捉:

Type	Description
Before	呼叫時的快照。
Action	執行輸入時的快照。這種類型的快照在探索 Playwright 點擊的確切位置時特別有用。
After	動作之後的快照。

這是典型的 Action 快照的樣子:

注意它如何同時突出顯示 DOM 節點以及精確的點擊位置。

Source

當你點擊側邊欄中的某個動作時，該動作的程式碼行會在 Source 面板中突出顯示。

Call

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

Log

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

Errors

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

Console

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

雙擊操作側邊欄中測試中的一個操作。這將過濾控制台，只顯示在該操作期間生成的日誌。點擊顯示全部按鈕以再次查看所有控制台日誌。

使用時間軸來篩選動作，點擊一個起點並拖動到一個終點。控制台標籤也將被篩選，只顯示在選定動作期間生成的日誌。

Network

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

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

使用時間軸來篩選動作，點擊一個起點並拖動到一個終點。Network 頁籤也將被篩選，只顯示在所選動作期間發出的網路請求。

Metadata

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

錄製追蹤

執行測試並使用 --tracing 旗標可以記錄追蹤。

pytest --tracing on

選項用於追蹤是:

• on: 記錄每個測試的追蹤
• off: 不記錄追蹤。(預設)
• retain-on-failure: 記錄每個測試的追蹤，但移除所有成功測試執行的追蹤。

這將記錄追蹤並將其放入名為 trace.zip 的檔案中，位於你的 test-results 目錄。

如果你沒有使用 Pytest，點擊這裡學習如何記錄追蹤。

Sync

browser = chromium.launch()
context = browser.new_context()

# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)

page = context.new_page()
page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")

Async

browser = await chromium.launch()
context = await browser.new_context()

# Start tracing before creating / navigating a page.
await context.tracing.start(screenshots=True, snapshots=True, sources=True)

page = await context.new_page()
await page.goto("https://playwright.dev")

# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")

開啟追蹤

您可以使用 Playwright CLI 或在您的瀏覽器中打開已保存的追蹤，網址為 trace.playwright.dev。請確保添加 trace.zip 文件所在的完整路徑。

playwright show-trace trace.zip

使用 trace.playwright.dev

trace.playwright.dev 是 Trace Viewer 的靜態託管變體。你可以使用拖放上傳 trace 檔案。

查看遠端追蹤

您可以使用其 URL 開啟遠端追蹤。它們可以在 CI 執行時生成，這使得查看遠端追蹤變得容易，無需手動下載文件。

playwright show-trace https://example.com/trace.zip

你也可以將上傳的 trace 的 URL（例如在你的 CI 中）從某些可存取的儲存空間作為參數傳遞。CORS (Cross-Origin Resource Sharing) 規則可能適用。

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