追蹤檢視器

簡介

Playwright 追蹤檢視器是一個 GUI 工具，可讓您探索所錄製的 Playwright 測試追蹤記錄，這表示您可以回溯並瀏覽測試的每個動作，並以視覺化方式查看每個動作期間發生的情況。

您將學到

• 如何錄製追蹤
• 如何開啟 HTML 報告
• 如何開啟和檢視追蹤

錄製追蹤

預設情況下，playwright.config 檔案將包含為每個測試建立 trace.zip 檔案所需的配置。追蹤設定為在 on-first-retry 執行，表示它們將在失敗測試的第一次重試時執行。此外，在 CI 上執行時 retries 設定為 2，在本地端執行時設定為 0。這表示追蹤將在失敗測試的第一次重試時錄製，但不會在第一次執行和第二次重試時錄製。

playwright.config.ts

import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
  // ...
  use: {
    trace: 'on-first-retry', // record traces on first retry of each test
  },
});

若要瞭解有關錄製追蹤的可用選項的更多資訊，請查看我們關於追蹤檢視器的詳細指南。

追蹤通常在持續整合 (CI) 環境中執行，因為在本地端您可以使用UI 模式來開發和偵錯測試。但是，如果您想在不使用UI 模式的情況下在本機端執行追蹤，則可以使用 --trace on 強制開啟追蹤功能。

npx playwright test --trace on

開啟 HTML 報告

HTML 報告會顯示已執行的所有測試以及它們在哪些瀏覽器上執行的報告，以及它們所花費的時間。測試可以按通過的測試、失敗的測試、不穩定的測試或跳過的測試進行篩選。您也可以搜尋特定測試。按一下測試將開啟詳細檢視，您可以在其中查看有關測試的更多資訊，例如錯誤、測試步驟和追蹤。

npx playwright show-report

開啟追蹤

在 HTML 報告中，按一下測試名稱檔案名稱旁邊的追蹤圖示，直接開啟所需測試的追蹤。

您也可以按一下開啟測試的詳細檢視，然後向下捲動至 'Traces' 索引標籤，然後按一下追蹤螢幕截圖來開啟追蹤。

若要瞭解有關報告器的更多資訊，請查看我們關於報告器的詳細指南，包括 HTML 報告器。

檢視追蹤

透過按一下每個動作或使用時間軸懸停來檢視測試的追蹤記錄，並查看動作前後的頁面狀態。在測試的每個步驟中檢查記錄、原始碼和網路、錯誤和主控台。追蹤檢視器會建立 DOM 快照，因此您可以完全與其互動，並開啟瀏覽器開發人員工具來檢查 HTML、CSS 等。

若要瞭解有關追蹤的更多資訊，請查看我們關於追蹤檢視器的詳細指南。

下一步是什麼？

• 在 CI 上使用 GitHub Actions 執行測試
• 瞭解更多關於追蹤檢視器的資訊