報告器

簡介

Playwright Test 提供多種內建報告器以滿足不同需求，也支援自訂報告器。試用內建報告器最簡單的方式是傳遞 --reporter 命令列選項。

npx playwright test --reporter=line

若要更多控制，您可以在組態設定檔中以程式方式指定報告器。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'line',
});

多重報告器

您可以同時使用多個報告器。例如，您可以使用 'list' 來產生美觀的終端機輸出，並使用 'json' 來取得包含測試結果的全面 json 檔案。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }]
  ],
});

CI 上的報告器

您可以在本機和 CI 上使用不同的報告器。例如，使用簡潔的 'dot' 報告器可以避免產生過多輸出。這是 CI 上的預設選項。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  // CI 使用簡潔的 'dot'，本機執行時預設使用 'list'
  reporter: process.env.CI ? 'dot' : 'list',
});

內建報告器

所有內建報告器都會顯示失敗的詳細資訊，主要差異在於成功執行時的詳細程度。

List 報告器

List 報告器是預設選項（除了 CI 上預設使用 dot 報告器）。它會為每個執行的測試列印一行。

npx playwright test --reporter=list

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'list',
});

以下是測試執行過程中的範例輸出。失敗將在最後列出。

npx playwright test --reporter=list
Running 124 tests using 6 workers

 1  ✓ should access error in env (438ms)
 2  ✓ handle long test names (515ms)
 3  x 1) render expected (691ms)
 4  ✓ should timeout (932ms)
 5    should repeat each:
 6  ✓ should respect enclosing .gitignore (569ms)
 7    should teardown env after timeout:
 8    should respect excluded tests:
 9  ✓ should handle env beforeEach error (638ms)
10    should respect enclosing .gitignore:

您可以透過傳遞以下組態選項來選擇加入步驟渲染：

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['list', { printSteps: true }]],
});

List 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_LIST_PRINT_STEPS	printSteps	是否在各自行上列印每個步驟。	false
PLAYWRIGHT_FORCE_TTY		是否產生適合即時終端機的輸出。支援 true、1、false、0、[WIDTH] 和 [WIDTH]x[HEIGHT]。[WIDTH] 和 [WIDTH]x[HEIGHT] 指定 TTY 尺寸。	終端機在 TTY 模式時為 true，否則為 false。
FORCE_COLOR		是否產生彩色輸出。	終端機在 TTY 模式時為 true，否則為 false。

Line 報告器

Line 報告器比 list 報告器更簡潔。它使用單行報告最後完成的測試，並在發生失敗時列印失敗訊息。Line 報告器適用於大型測試套件，可以顯示進度但不會透過列出所有測試來產生過多輸出。

npx playwright test --reporter=line

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'line',
});

以下是測試執行過程中的範例輸出。失敗會內嵌報告。

npx playwright test --reporter=line
Running 124 tests using 6 workers
  1) dot-reporter.spec.ts:20:1 › render expected ===================================================

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

[23/124] gitignore.spec.ts - should respect nested .gitignore

Line 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_FORCE_TTY		是否產生適合即時終端機的輸出。支援 true、1、false、0、[WIDTH] 和 [WIDTH]x[HEIGHT]。[WIDTH] 和 [WIDTH]x[HEIGHT] 指定 TTY 尺寸。	終端機在 TTY 模式時為 true，否則為 false。
FORCE_COLOR		是否產生彩色輸出。	終端機在 TTY 模式時為 true，否則為 false。

Dot 報告器

Dot 報告器非常簡潔 - 它只為每次成功的測試執行產生單一字元。它是 CI 上的預設選項，適用於您不希望有大量輸出的情況。

npx playwright test --reporter=dot

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'dot',
});

以下是測試執行過程中的範例輸出。失敗將在最後列出。

npx playwright test --reporter=dot
Running 124 tests using 6 workers
······F·············································

每個已執行的測試都會顯示一個字元，指示其狀態：

字元	說明
·	通過
F	失敗
×	失敗或逾時 - 將會重試
±	重試後通過（不穩定）
T	逾時
°	跳過

Dot 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_FORCE_TTY		是否產生適合即時終端機的輸出。支援 true、1、false、0、[WIDTH] 和 [WIDTH]x[HEIGHT]。[WIDTH] 和 [WIDTH]x[HEIGHT] 指定 TTY 尺寸。	終端機在 TTY 模式時為 true，否則為 false。
FORCE_COLOR		是否產生彩色輸出。	終端機在 TTY 模式時為 true，否則為 false。

HTML 報告器

HTML 報告器產生一個自包含資料夾，其中包含可作為網頁提供的測試執行報告。

npx playwright test --reporter=html

預設情況下，如果有些測試失敗，HTML 報告會自動開啟。您可以透過 Playwright 組態設定中的 open 屬性或 PLAYWRIGHT_HTML_OPEN 環境變數來控制此行為。該屬性的可能值為 always、never 和 on-failure（預設）。

您也可以設定用於提供 HTML 報告的 host 和 port。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { open: 'never' }]],
});

預設情況下，報告會寫入目前工作目錄中的 playwright-report 資料夾。可以使用 PLAYWRIGHT_HTML_OUTPUT_DIR 環境變數或報告器組態來覆寫該位置。

在組態設定檔中，直接傳遞選項：

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { outputFolder: 'my-report' }]],
});

如果您要將附件從 data 資料夾上傳到其他位置，您可以使用 attachmentsBaseURL 選項讓 html 報告知道在哪裡尋找它們。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { attachmentsBaseURL: 'https://external-storage.com/' }]],
});

開啟最後測試執行報告的快速方式是：

npx playwright show-report

或者如果有自訂資料夾名稱：

npx playwright show-report my-report

HTML 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_HTML_TITLE	title	在產生的報告中顯示的標題。	預設不顯示標題
PLAYWRIGHT_HTML_OUTPUT_DIR	outputFolder	儲存報告的目錄。	playwright-report
PLAYWRIGHT_HTML_OPEN	open	何時在瀏覽器中開啟 html 報告，可選擇 'always'、'never' 或 'on-failure'	'on-failure'
PLAYWRIGHT_HTML_HOST	host	當報告在瀏覽器中開啟時，將綁定到此主機名。	localhost
PLAYWRIGHT_HTML_PORT	port	當報告在瀏覽器中開啟時，將在此連接埠上提供服務。	9323 或 9323 不可用時的任何可用連接埠。
PLAYWRIGHT_HTML_ATTACHMENTS_BASE_URL	attachmentsBaseURL	data 子目錄中附件上傳的獨立位置。只有當您將報告和 data 分別上傳到不同位置時才需要。	data/
PLAYWRIGHT_HTML_NO_SNIPPETS	noSnippets	如果為 true，則停用動作記錄中程式碼片段的渲染。如果有頂層錯誤，該報告區段仍會渲染程式碼片段。支援 true、1、false 和 0。	false

Blob 報告器

Blob 報告包含有關測試執行的所有詳細資訊，可用於稍後產生任何其他報告。它們的主要功能是促進來自分片測試的報告合併。

npx playwright test --reporter=blob

預設情況下，報告會寫入 package.json 目錄或目前工作目錄（如果找不到 package.json）中的 blob-report 目錄。報告檔案名稱看起來像 report-<hash>.zip 或在使用分片時為 report-<hash>-<shard_number>.zip。雜湊值是從作為命令列參數傳遞的 --grep、--grepInverted、--project 和檔案篩選器計算出的可選值。雜湊值保證使用不同命令列選項執行 Playwright 會產生不同但在執行間穩定的報告名稱。輸出檔案名稱可以在組態設定檔中覆寫或作為 'PLAYWRIGHT_BLOB_OUTPUT_FILE' 環境變數傳遞。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['blob', { outputFile: `./blob-report/report-${os.platform()}.zip` }]],
});

Blob 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_BLOB_OUTPUT_DIR	outputDir	儲存輸出的目錄。寫入新報告前會刪除現有內容。	blob-report
PLAYWRIGHT_BLOB_OUTPUT_NAME	fileName	報告檔案名稱。	report-<project>-<hash>-<shard_number>.zip
PLAYWRIGHT_BLOB_OUTPUT_FILE	outputFile	輸出檔案的完整路徑。如果定義，將忽略 outputDir 和 fileName。	undefined

JSON 報告器

JSON 報告器產生一個包含有關測試執行所有資訊的物件。

您很可能希望將 JSON 寫入檔案。使用 --reporter=json 執行時，使用 PLAYWRIGHT_JSON_OUTPUT_NAME 環境變數：

Bash

PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json

PowerShell

$env:PLAYWRIGHT_JSON_OUTPUT_NAME="results.json"
npx playwright test --reporter=json

Batch

set PLAYWRIGHT_JSON_OUTPUT_NAME=results.json
npx playwright test --reporter=json

在組態設定檔中，直接傳遞選項：

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['json', { outputFile: 'results.json' }]],
});

JSON 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_JSON_OUTPUT_DIR		儲存輸出檔案的目錄。如果指定輸出檔案則忽略。	cwd 或組態目錄。
PLAYWRIGHT_JSON_OUTPUT_NAME	outputFile	輸出的基本檔案名稱，相對於輸出目錄。	JSON 報告列印到 stdout。
PLAYWRIGHT_JSON_OUTPUT_FILE	outputFile	輸出檔案的完整路徑。如果定義，將忽略 PLAYWRIGHT_JSON_OUTPUT_DIR 和 PLAYWRIGHT_JSON_OUTPUT_NAME。	JSON 報告列印到 stdout。

JUnit 報告器

JUnit 報告器產生 JUnit 風格的 xml 報告。

您很可能希望將報告寫入 xml 檔案。使用 --reporter=junit 執行時，使用 PLAYWRIGHT_JUNIT_OUTPUT_NAME 環境變數：

Bash

PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit

PowerShell

$env:PLAYWRIGHT_JUNIT_OUTPUT_NAME="results.xml"
npx playwright test --reporter=junit

Batch

set PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml
npx playwright test --reporter=junit

在組態設定檔中，直接傳遞選項：

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['junit', { outputFile: 'results.xml' }]],
});

JUnit 報告器支援以下組態選項和環境變數：

環境變數名稱	報告器組態選項	說明	預設值
PLAYWRIGHT_JUNIT_OUTPUT_DIR		儲存輸出檔案的目錄。如果未指定輸出檔案則忽略。	cwd 或組態目錄。
PLAYWRIGHT_JUNIT_OUTPUT_NAME	outputFile	輸出的基本檔案名稱，相對於輸出目錄。	JUnit 報告列印到 stdout。
PLAYWRIGHT_JUNIT_OUTPUT_FILE	outputFile	輸出檔案的完整路徑。如果定義，將忽略 PLAYWRIGHT_JUNIT_OUTPUT_DIR 和 PLAYWRIGHT_JUNIT_OUTPUT_NAME。	JUnit 報告列印到 stdout。
PLAYWRIGHT_JUNIT_STRIP_ANSI	stripANSIControlSequences	是否在將文字寫入報告之前移除 ANSI 控制序列。	預設情況下，輸出文字會原樣添加。
PLAYWRIGHT_JUNIT_INCLUDE_PROJECT_IN_TEST_NAME	includeProjectInTestName	是否在每個測試案例的名稱前綴中包含 Playwright 專案名稱。	預設情況下不包含。
PLAYWRIGHT_JUNIT_SUITE_ID		根 <testsuites/> 報告條目上的 id 屬性值。	空字串。
PLAYWRIGHT_JUNIT_SUITE_NAME		根 <testsuites/> 報告條目上的 name 屬性值。	空字串。

GitHub Actions 註解

您可以使用內建的 github 報告器在 GitHub Actions 中執行時取得自動失敗註解。

請注意，所有其他報告器在 GitHub Actions 上也都能正常運作，但不提供註解。另外，如果您使用矩陣策略執行測試，則不建議使用此註解類型，因為堆疊追蹤失敗會增加並遮蔽 GitHub 檔案檢視。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  // GitHub Actions CI 使用 'github' 來產生註解，加上簡潔的 'dot'
  // 本機執行時預設使用 'list'
  reporter: process.env.CI ? 'github' : 'list',
});

自訂報告器

您可以透過實作具有某些報告器方法的類別來建立自訂報告器。深入了解 Reporter API。

my-awesome-reporter.ts

import type {
  FullConfig, FullResult, Reporter, Suite, TestCase, TestResult
} from '@playwright/test/reporter';

class MyReporter implements Reporter {
  onBegin(config: FullConfig, suite: Suite) {
    console.log(`Starting the run with ${suite.allTests().length} tests`);
  }

  onTestBegin(test: TestCase, result: TestResult) {
    console.log(`Starting test ${test.title}`);
  }

  onTestEnd(test: TestCase, result: TestResult) {
    console.log(`Finished test ${test.title}: ${result.status}`);
  }

  onEnd(result: FullResult) {
    console.log(`Finished the run: ${result.status}`);
  }
}

export default MyReporter;

現在使用此報告器與 testConfig.reporter。

playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: './my-awesome-reporter.ts',
});

或者只需將報告器檔案路徑作為 --reporter 命令列選項傳遞：

npx playwright test --reporter="./myreporter/my-awesome-reporter.ts"

以下是一些開放原始碼報告器實作的簡短清單，您可以在撰寫自己的報告器時參考：

• Allure Reporter
• Github Actions Reporter
• Mail Reporter
• ReportPortal
• Monocart