追蹤檢視器

簡介

Playwright Trace Viewer 是一個 GUI 工具，可讓你探索已記錄的 Playwright Traces 測試，這意味著你可以在測試的每個動作中來回查看，並直觀地看到每個動作期間發生的情況。

你將學到

• 如何記錄追蹤
• 如何開啟 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
  },
});

要了解更多關於記錄追蹤的可用選項，請查看我們在 Trace Viewer 上的詳細指南。

追蹤通常在持續整合（CI）環境中執行，因為在本地你可以使用 UI Mode 來開發和除錯測試。然而，如果你想在本地執行追蹤而不使用 UI Mode，你可以使用 --trace on 強制開啟追蹤。

npx playwright test --trace on

開啟 HTML 報告

HTML 報告會顯示所有已執行的測試報告，以及在哪些瀏覽器上執行以及所花費的時間。測試可以按通過的測試、失敗的測試、不穩定的測試或跳過的測試進行篩選。你也可以搜尋特定的測試。點擊測試會打開詳細視圖，你可以看到更多有關測試的資訊，如錯誤、測試步驟和追蹤。

npx playwright show-report

開啟追蹤

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

你也可以點擊打開測試的詳細視圖，向下滾動到'Traces'標籤，並通過點擊追蹤截圖來打開追蹤。

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

查看追蹤

查看測試的追蹤，通過點擊每個操作或使用時間軸懸停，查看操作前後頁面的狀態。檢查測試每一步驟期間的日誌、來源和網路、錯誤和控制台。追蹤檢視器會建立一個 DOM 快照，以便您可以完全互動並打開瀏覽器 DevTools 檢查 HTML、CSS 等。

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

接下來是什麼

• 在 CI 上使用 GitHub Actions 執行測試
• 了解更多關於 Trace Viewer 的資訊