追蹤檢視器
簡介
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 分頁，該分頁會顯示更多有關測試的資訊，例如瀏覽器、視口大小、測試持續時間等。
Attachments
"Attachments" 頁籤允許你探索附件。如果你正在進行視覺回歸測試，你將能夠通過檢查圖像差異、實際圖像和預期圖像來比較截圖。當你點擊預期圖像時，你可以使用滑桿將一個圖像滑動到另一個圖像上，以便輕鬆看到截圖中的差異。
在本地記錄追蹤
要在開發模式下記錄追蹤，請在執行測試時將 --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。
開啟追蹤
您可以使用 Playwright CLI 或在您的瀏覽器中打開已保存的追蹤，網址為 trace.playwright.dev。請確保添加 trace.zip 文件所在的完整路徑。
npx playwright show-trace path/to/trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是 Trace Viewer 的靜態託管變體。你可以使用拖放上傳 trace 檔案。
查看遠端追蹤
您可以使用其 URL 開啟遠端追蹤。它們可以在 CI 執行時生成，這使得查看遠端追蹤變得容易，無需手動下載文件。
npx 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