レポーター

はじめに

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({
  // Concise 'dot' for CI, default 'list' when running locally
  reporter: process.env.CI ? 'dot' : 'list',
});

組み込みレポーター

すべての組み込みレポーターは失敗に関する詳細情報を示し、主に成功した実行での詳細度合いが異なります。

リストレポーター

リストレポーターはデフォルトです（dotレポーターがデフォルトであるCIを除く）。これは実行中の各テストに対して1行を出力します。

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 }]],
});

リストレポートは以下の設定オプションと環境変数をサポートします

環境変数名	レポーター設定オプション	説明	デフォルト
PLAYWRIGHT_LIST_PRINT_STEPS	printSteps	各ステップを個別の行に表示するかどうか。	false
PLAYWRIGHT_FORCE_TTY		ライブターミナルに適した出力を生成するかどうか。数値が指定された場合、それはターミナルの幅としても使用されます。	true (ターミナルがTTYモードの場合)、false (それ以外の場合)。
FORCE_COLOR		色付き出力を生成するかどうか。	true (ターミナルがTTYモードの場合)、false (それ以外の場合)。

ラインレポーター

ラインレポーターはリストレポーターよりも簡潔です。これは最後に完了したテストを1行で報告し、失敗が発生したときに失敗を出力します。ラインレポーターは、進行状況を表示するが、すべてのテストをリストアップして出力をスパムしない大規模なテストスイートに役立ちます。

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

ラインレポートは以下の設定オプションと環境変数をサポートします

環境変数名	レポーター設定オプション	説明	デフォルト
PLAYWRIGHT_FORCE_TTY		ライブターミナルに適した出力を生成するかどうか。数値が指定された場合、それはターミナルの幅としても使用されます。	true (ターミナルがTTYモードの場合)、false (それ以外の場合)。
FORCE_COLOR		色付き出力を生成するかどうか。	true (ターミナルがTTYモードの場合)、false (それ以外の場合)。

ドットレポーター

ドットレポーターは非常に簡潔です。成功したテスト実行ごとに1文字のみを生成します。これは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·············································

実行された各テストに対して1文字が表示され、そのステータスを示します

文字	説明
·	合格
F	失敗
×	失敗またはタイムアウト - 再試行されます
±	再試行で合格（不安定）
T	タイムアウト
°	スキップ

ドットレポートは以下の設定オプションと環境変数をサポートします

環境変数名	レポーター設定オプション	説明	デフォルト
PLAYWRIGHT_FORCE_TTY		ライブターミナルに適した出力を生成するかどうか。数値が指定された場合、それはターミナルの幅としても使用されます。	true (ターミナルがTTYモードの場合)、false (それ以外の場合)。
FORCE_COLOR		色付き出力を生成するかどうか。	true (ターミナルがTTYモードの場合)、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' }]],
});

データフォルダーから別の場所に添付ファイルをアップロードする場合、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_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/

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レポートは標準出力に出力されます。
PLAYWRIGHT_JSON_OUTPUT_FILE	outputFile	出力ファイルへのフルパス。定義されている場合、PLAYWRIGHT_JSON_OUTPUT_DIRとPLAYWRIGHT_JSON_OUTPUT_NAMEは無視されます。	JSONレポートは標準出力に出力されます。

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レポートは標準出力に出力されます。
PLAYWRIGHT_JUNIT_OUTPUT_FILE	outputFile	出力ファイルへのフルパス。定義されている場合、PLAYWRIGHT_JUNIT_OUTPUT_DIRとPLAYWRIGHT_JUNIT_OUTPUT_NAMEは無視されます。	JUnitレポートは標準出力に出力されます。
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 Actionsで実行する際、組み込みのgithubレポーターを使用すると、自動的な失敗アノテーションを取得できます。

他のすべてのレポーターもGitHub Actionsで動作しますが、アノテーションは提供しないことに注意してください。また、スタックトレースの失敗が倍増し、GitHubのファイルビューが不明瞭になるため、マトリックス戦略でテストを実行する場合は、このアノテーションタイプを使用することはお勧めしません。

playwright.config.ts

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

export default defineConfig({
  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
  // default 'list' when running locally
  reporter: process.env.CI ? 'github' : 'list',
});

カスタムレポーター

レポーターメソッドの一部を実装するクラスを作成することで、カスタムレポーターを作成できます。レポーター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