追蹤檢視器
簡介
Playwright Trace Viewer 是一個 GUI 工具，可以幫助您在腳本執行後探索記錄的 Playwright 追蹤。追蹤是在 CI 上測試失敗時進行偵錯的好方法。您可以在本地或在瀏覽器上 trace.playwright.dev 打開追蹤。
開啟 Trace Viewer
您可以使用 Playwright CLI 或在瀏覽器 trace.playwright.dev 中開啟已儲存的追蹤。請確保加入 trace.zip 檔案所在位置的完整路徑。
npx playwright show-trace path/to/trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是 Trace Viewer 的靜態託管版本。您可以使用拖放功能或透過 Select file(s) 按鈕上傳追蹤檔案。
Trace Viewer 會將追蹤完全載入您的瀏覽器中，不會對外傳輸任何資料。
查看遠端追蹤
您可以使用其 URL 直接開啟遠端追蹤。這讓您可以輕鬆查看遠端追蹤，而無需手動從 CI 執行中下載檔案，例如。
npx 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/fa874b0d59cdedec675521c21124e93161d66533.zip
錄製追蹤
本地追蹤
要在開發模式下記錄追蹤，請在執行測試時將 --trace 標誌設定為 on。您也可以使用 UI Mode 以獲得更好的開發者體驗，因為它會自動追蹤每個測試。
npx playwright test --trace on
然後您可以開啟 HTML 報告並點擊追蹤圖示來開啟追蹤。
npx playwright show-report
在 CI 上追蹤
追蹤應該在持續整合上於失敗測試的第一次重試時執行，方法是在測試設定檔中設定 trace: 'on-first-retry' 選項。這將為每個重試的測試產生一個 trace.zip 檔案。
- Test
- Library
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: 1,
use: {
trace: 'on-first-retry',
},
});
const browser = await chromium.launch();
const context = await browser.newContext();
// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://playwright.dev');
// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });
錄製追蹤的可用選項：
'on-first-retry'- 僅在第一次重試測試時記錄追蹤。'on-all-retries'- 為所有測試重試記錄追蹤。'off'- 不記錄追蹤。'on'- 為每個測試記錄追蹤。（不建議，因為會影響效能）'retain-on-failure'- 為每個測試記錄追蹤，但從成功的測試執行中移除。
如果您沒有啟用重試但仍想要失敗測試的追蹤，您也可以使用 trace: 'retain-on-failure'。
還有更細粒度的選項可用，請參見 testOptions.trace。
如果您沒有使用 Playwright 作為測試執行器，請改用 browserContext.tracing API。
Trace Viewer 功能
Actions
在 Actions 分頁中，您可以看到每個動作使用的定位器以及每個動作執行的時間。懸停在測試的每個動作上，視覺化地查看 DOM 快照的變化。前後移動時間並點擊動作進行檢查和偵錯。使用 Before 和 After 分頁視覺化地查看動作前後發生的情況。
選擇每個動作會顯示：
- 動作快照
- 動作日誌
- 原始程式碼位置
螢幕截圖
當使用 screenshots 選項開啟追蹤時（預設），每個追蹤會記錄螢幕錄影並將其呈現為膠片條。您可以懸停在膠片條上查看每個動作和狀態的放大影像，這有助於您輕鬆找到要檢查的動作。
雙擊動作可查看該動作的時間範圍。您可以使用時間軸中的滑桿增加選擇的動作，這些動作將顯示在 Actions 分頁中，所有主控台日誌和網路日誌都會被篩選為僅顯示所選動作的日誌。
快照
當使用 snapshots 選項開啟追蹤時（預設），Playwright 會為每個動作捕獲一組完整的 DOM 快照。根據動作的類型，它將捕獲：
| Type | Description |
|---|---|
| Before | 動作呼叫時的快照。 |
| Action | 執行輸入時刻的快照。此類型的快照特別有用於探索 Playwright 確切點擊的位置。 |
| After | 動作後的快照。 |
這是典型的 Action 快照外觀：
注意它如何同時突出顯示 DOM Node 以及確切的點擊位置。
Source
當您點擊側邊欄中的動作時，該動作的程式碼行會在原始碼面板中突出顯示。
Call
call 分頁顯示有關動作的資訊，例如執行時間、使用的定位器、是否在嚴格模式下以及使用的鍵。
Log
查看完整的測試日誌，以更好地了解 Playwright 在幕後執行的操作，例如滾動到檢視中、等待元素可見、啟用和穩定，以及執行點擊、填寫、按壓等動作。
Errors
如果測試失敗，您將在 Errors 分頁中看到每個測試的錯誤訊息。時間軸也會顯示一條紅線，突出顯示錯誤發生的位置。您也可以點擊 source 分頁查看錯誤出現在原始程式碼的哪一行。
Console
請查看來自瀏覽器以及測試的主控台日誌。會顯示不同的圖示來表示主控台日誌是來自瀏覽器還是測試檔案。
在動作側邊欄中雙擊測試中的動作。這將篩選主控台以僅顯示該動作期間產生的日誌。點擊 Show all 按鈕可再次查看所有主控台日誌。
使用時間軸篩選動作，方法是點擊起始點並拖動到結束點。主控台分頁也會被篩選為僅顯示所選動作期間產生的日誌。
Network
Network 分頁顯示測試期間產生的所有網路請求。您可以按請求的不同類型、狀態碼、方法、請求、內容類型、持續時間和大小進行排序。點擊請求可查看更多相關資訊，例如請求標頭、回應標頭、請求內文和回應內文。
在動作側邊欄中雙擊測試中的動作。這將篩選網路請求以僅顯示該動作期間產生的請求。點擊 Show all 按鈕可再次查看所有網路請求。
使用時間軸篩選動作，方法是點擊起始點並拖動到結束點。網路分頁也會被篩選為僅顯示所選動作期間產生的網路請求。
Metadata
在 Actions 分頁旁邊，您會找到 Metadata 分頁，該分頁會顯示更多有關測試的資訊，例如瀏覽器、檢視區大小、測試持續時間等。
Attachments
"Attachments" 分頁允許您探索附件。如果您在進行視覺回歸測試，您將能夠透過檢查影像差異、實際影像和預期影像來比較螢幕截圖。當您點擊預期影像時，您可以使用滑桿將一個影像滑動到另一個影像上，這樣您可以輕鬆查看螢幕截圖中的差異。