追蹤檢視器
簡介
Playwright 追蹤檢視器是一個 GUI 工具，可協助您在腳本執行後瀏覽錄製的 Playwright 追蹤。追蹤是在 CI 上測試失敗時偵錯測試的好方法。您可以在本機或瀏覽器上的 trace.playwright.dev 中開啟追蹤。
開啟追蹤檢視器
您可以使用 Playwright CLI 或在瀏覽器上的 trace.playwright.dev 中開啟已儲存的追蹤。請務必新增 trace.zip 檔案所在位置的完整路徑。
npx playwright show-trace path/to/trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是追蹤檢視器的靜態託管變體。您可以使用拖放或透過 Select file(s) 按鈕上傳追蹤檔案。
追蹤檢視器完全在您的瀏覽器中載入追蹤，並且不會在外部傳輸任何資料。
檢視遠端追蹤
您可以直接使用 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/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip
錄製追蹤
在本機錄製追蹤
若要在開發模式期間錄製追蹤，請在執行測試時將 --trace 旗標設定為 on。您也可以使用 UI 模式 以獲得更好的開發人員體驗，因為它會自動追蹤每個測試。
npx playwright test --trace on
然後，您可以開啟 HTML 報告，然後點擊追蹤圖示以開啟追蹤。
npx playwright show-report
在 CI 上錄製追蹤
追蹤應在持續整合中，於失敗測試的第一次重試時執行，方法是在測試設定檔中設定 trace: 'on-first-retry' 選項。這將為每個重試的測試產生一個 trace.zip 檔案。
- 測試
- 函式庫
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.org.tw');
// 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。
追蹤檢視器功能
動作
在「動作」標籤中，您可以看到每個動作使用了哪個定位器，以及每個動作花費了多長時間執行。將滑鼠懸停在測試的每個動作上，並以視覺方式查看 DOM 快照中的變更。在時間軸中來回移動，然後點擊動作以檢查和偵錯。使用「之前」和「之後」標籤以視覺方式查看動作之前和之後發生的情況。
選取每個動作會顯示
- 動作快照
- 動作日誌
- 原始碼位置
螢幕截圖
當追蹤時啟用螢幕截圖選項（預設），每個追蹤都會錄製螢幕錄影並將其呈現為膠片。您可以將滑鼠懸停在膠片上方，以查看每個動作和狀態的放大影像，這有助於您輕鬆找到想要檢查的動作。
按兩下動作以查看該動作的時間範圍。您可以使用時間軸中的滑桿來增加選取的動作，這些動作將顯示在「動作」標籤中，並且所有主控台日誌和網路日誌都將被篩選，僅顯示所選動作的日誌。
快照
當追蹤時啟用快照選項（預設），Playwright 會為每個動作擷取一組完整的 DOM 快照。根據動作的類型，它將擷取
| 類型 | 描述 |
|---|---|
| 之前 | 呼叫動作時的快照。 |
| 動作 | 執行輸入時的快照。當您想知道 Playwright 點擊的位置時，此類型的快照特別有用。 |
| 之後 | 動作之後的快照。 |
以下是一般動作快照的樣子
請注意它如何同時突出顯示 DOM 節點和確切的點擊位置。
原始碼
當您在側邊欄中點擊動作時，該動作的程式碼行會在原始碼面板中突出顯示。
呼叫
「呼叫」標籤會顯示有關動作的資訊，例如所花費的時間、使用的定位器、是否處於嚴格模式以及使用的按鍵。
日誌
查看測試的完整日誌，以更好地了解 Playwright 在幕後執行的操作，例如捲動到檢視畫面、等待元素可見、啟用和穩定，以及執行點擊、填寫、按下等動作。
錯誤
如果您的測試失敗，您將在「錯誤」標籤中看到每個測試的錯誤訊息。時間軸也會顯示一條紅線，突出顯示錯誤發生的位置。您也可以點擊「原始碼」標籤，查看錯誤發生在哪一行程式碼。
主控台
查看來自瀏覽器以及測試的主控台日誌。會顯示不同的圖示，以顯示主控台日誌是來自瀏覽器還是來自測試檔案。
在動作側邊欄中按兩下測試中的動作。這將篩選主控台，僅顯示在該動作期間產生的日誌。點擊「顯示全部」按鈕以再次查看所有主控台日誌。
使用時間軸篩選動作，方法是點擊起點並拖曳到終點。「主控台」標籤也將被篩選，僅顯示在所選動作期間產生的日誌。
網路
「網路」標籤顯示測試期間發出的所有網路請求。您可以按不同類型的請求、狀態碼、方法、請求、內容類型、持續時間和大小進行排序。點擊請求以查看有關它的更多資訊，例如請求標頭、回應標頭、請求內文和回應內文。
在動作側邊欄中按兩下測試中的動作。這將篩選網路請求，僅顯示在該動作期間發出的請求。點擊「顯示全部」按鈕以再次查看所有網路請求。
使用時間軸篩選動作，方法是點擊起點並拖曳到終點。「網路」標籤也將被篩選，僅顯示在所選動作期間發出的網路請求。
Metadata
在「動作」標籤旁邊，您會找到「Metadata」標籤，其中將顯示有關測試的更多資訊，例如瀏覽器、viewport 大小、測試持續時間等等。
附件
「附件」標籤可讓您瀏覽附件。如果您正在進行視覺迴歸測試，您將能夠透過檢查影像差異、實際影像和預期影像來比較螢幕截圖。當您點擊預期影像時，您可以使用滑桿將一個影像滑到另一個影像上方，以便輕鬆查看螢幕截圖中的差異。