Skip to main content

追蹤檢視器

簡介​

Playwright 追蹤檢視器是一個 GUI 工具，讓您探索測試的已錄製 Playwright 追蹤，意即您可以在測試的每個動作之間前後移動，並視覺化查看每個動作期間發生的情況。

您將學習

錄製追蹤​

預設情況下，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 等。

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

接下來做什麼​