追蹤檢視器
簡介
Playwright 追蹤檢視器是一個 GUI 工具，可協助您在腳本執行後探索錄製的 Playwright 追蹤。追蹤是偵錯 CI 上失敗測試的好方法。您可以在本機或瀏覽器上 trace.playwright.dev 開啟追蹤。
開啟追蹤檢視器
您可以使用 Playwright CLI 或在瀏覽器上的 trace.playwright.dev 開啟已儲存的追蹤。請務必新增 trace.zip 檔案所在位置的完整路徑。
playwright show-trace trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是追蹤檢視器的靜態託管變體。您可以使用拖放或透過 Select file(s) 按鈕上傳追蹤檔案。
追蹤檢視器完全在您的瀏覽器中載入追蹤，且不會向外部傳輸任何資料。
檢視遠端追蹤
您可以直接使用 URL 開啟遠端追蹤。這讓檢視遠端追蹤變得容易，無需手動從 CI 執行下載檔案，例如。
playwright 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
錄製追蹤
可以透過使用 --tracing 旗標執行測試來錄製追蹤。
pytest --tracing on
追蹤的選項為
on：為每個測試錄製追蹤off：不錄製追蹤。(預設)retain-on-failure：為每個測試錄製追蹤，但移除所有成功測試執行的追蹤。
這將錄製追蹤並將其放入 test-results 目錄中名為 trace.zip 的檔案中。
如果您未使用 Pytest，請按一下這裡以瞭解如何錄製追蹤。
- 同步
- 非同步
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.org.tw")
# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")
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.org.tw")
# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")
追蹤檢視器功能
動作
在 [動作] 標籤頁中，您可以查看每個動作使用了哪個定位器，以及每個動作執行所需的時間。將滑鼠游標停留在測試的每個動作上，並以視覺化方式查看 DOM 快照中的變更。在時間軸中來回移動，並按一下動作以檢查和偵錯。使用 [之前] 和 [之後] 標籤頁以視覺化方式查看動作之前和之後發生的情況。
選取每個動作會顯示
- 動作快照
- 動作日誌
- 原始碼位置
螢幕截圖
當使用開啟的 螢幕截圖 選項 (預設) 進行追蹤時，每個追蹤都會錄製螢幕錄影，並將其呈現為底片膠卷。您可以將滑鼠游標停留在底片膠卷上，以查看每個動作和狀態的放大影像，這有助於您輕鬆找到要檢查的動作。
按兩下動作以查看該動作的時間範圍。您可以使用時間軸中的滑桿來增加選取的動作，這些動作將顯示在 [動作] 標籤頁中，並且所有主控台日誌和網路日誌都將篩選為僅顯示所選動作的日誌。
快照
當使用開啟的 快照 選項 (預設) 進行追蹤時，Playwright 會為每個動作擷取一組完整的 DOM 快照。根據動作的類型，它將擷取
| 類型 | 描述 |
|---|---|
| 之前 | 呼叫動作時的快照。 |
| 動作 | 執行輸入時的快照。當探索 Playwright 點擊的確切位置時，此類型的快照特別有用。 |
| 之後 | 動作後的快照。 |
以下是典型的動作快照的外觀
請注意它如何同時醒目提示 DOM 節點和確切的點擊位置。
原始碼
當您按一下側邊欄中的動作時，該動作的程式碼行會在原始碼面板中醒目提示。
呼叫
呼叫標籤頁會顯示有關動作的資訊，例如所花費的時間、使用的定位器、是否處於嚴格模式以及使用的鍵。
日誌
查看測試的完整日誌，以更好地瞭解 Playwright 在幕後執行的操作，例如捲動到檢視畫面、等待元素可見、啟用且穩定，以及執行點擊、填寫、按下等動作。
錯誤
如果您的測試失敗，您將在 [錯誤] 標籤頁中看到每個測試的錯誤訊息。時間軸也會顯示一條紅線，醒目提示錯誤發生的位置。您也可以按一下 [原始碼] 標籤頁，以查看錯誤位於原始碼的哪一行。
主控台
查看來自瀏覽器以及測試的主控台日誌。會顯示不同的圖示，以顯示主控台日誌是來自瀏覽器還是來自測試檔案。
在動作側邊欄中按兩下測試中的動作。這將篩選主控台，使其僅顯示在該動作期間產生的日誌。按一下顯示全部按鈕以再次查看所有主控台日誌。
使用時間軸篩選動作，方法是按一下起點並拖曳到終點。[主控台] 標籤頁也將篩選為僅顯示在選取動作期間產生的日誌。
網路
[網路] 標籤頁會顯示測試期間產生的所有網路請求。您可以按不同的請求類型、狀態碼、方法、請求、內容類型、持續時間和大小排序。按一下請求以查看有關請求的更多資訊，例如請求標頭、回應標頭、請求主體和回應主體。
在動作側邊欄中按兩下測試中的動作。這將篩選網路請求，使其僅顯示在該動作期間產生的請求。按一下顯示全部按鈕以再次查看所有網路請求。
使用時間軸篩選動作，方法是按一下起點並拖曳到終點。[網路] 標籤頁也將篩選為僅顯示在選取動作期間產生的網路請求。
元數據
在 [動作] 標籤頁旁邊，您會找到 [元數據] 標籤頁，其中將顯示有關測試的更多資訊，例如瀏覽器、視窗大小、測試持續時間等。