追蹤檢視器
簡介
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 在幕後執行的操作，例如捲動到檢視畫面、等待元素可見、啟用和穩定，以及執行點擊、填寫、按下等動作。
錯誤
如果您的測試失敗，您將在「錯誤」標籤中看到每個測試的錯誤訊息。時間軸也會顯示一條紅線，醒目提示錯誤發生的位置。您也可以按一下原始碼標籤，以查看錯誤所在的原始碼行。
主控台
查看來自瀏覽器以及測試的主控台記錄。會顯示不同的圖示，以向您顯示主控台記錄是來自瀏覽器還是來自測試檔案。
按兩下動作側邊欄中測試的動作。這將篩選主控台，使其僅顯示在該動作期間建立的記錄。按一下「顯示全部」按鈕以再次查看所有主控台記錄。
使用時間軸篩選動作，方法是按一下起點並拖曳到終點。「主控台」標籤也會篩選為僅顯示在選取動作期間建立的記錄。
網路
「網路」標籤會顯示測試期間發出的所有網路請求。您可以依不同的請求類型、狀態碼、方法、請求、內容類型、持續時間和大小排序。按一下請求以查看有關它的更多資訊，例如請求標頭、回應標頭、請求內文和回應內文。
按兩下動作側邊欄中測試的動作。這將篩選網路請求，使其僅顯示在該動作期間發出的請求。按一下「顯示全部」按鈕以再次查看所有網路請求。
使用時間軸篩選動作，方法是按一下起點並拖曳到終點。「網路」標籤也會篩選為僅顯示在選取動作期間發出的網路請求。
中繼資料
在「動作」標籤旁邊，您會找到「中繼資料」標籤，其中會顯示有關測試的更多資訊，例如瀏覽器、檢視區大小、測試持續時間等等。