# Display last HTML report
npx playwright show-report

# Specify reporter
npx playwright test --reporter=html
npx playwright test --reporter=dot           # minimal CI output
npx playwright test --reporter=line          # one line per test
npx playwright test --reporter=json          # machine-readable
npx playwright test --reporter=junit         # CI integration

# Combine reporters
npx playwright test --reporter=dot,html

# Merge sharded reports
npx playwright merge-reports --reporter=html ./blob-report

// playwright.config.ts
import {defineConfig} from '@playwright/test'

export default defineConfig({
  reporter: process.env.CI
    ? [['dot'], ['html', {open: 'never'}], ['junit', {outputFile: 'results/junit.xml'}], ['github']]
    : [['list'], ['html', {open: 'on-failure'}]],
})

import {defineConfig} from '@playwright/test'

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

import {defineConfig} from '@playwright/test'

export default defineConfig({
  reporter: [
    [
      'junit',
      {
        outputFile: 'results/junit.xml',
        stripANSIControlSequences: true,
        includeProjectInTestName: true,
      },
    ],
  ],
})

// reporters/notification-reporter.ts
import type {FullResult, Reporter, TestCase, TestResult} from '@playwright/test/reporter'

class NotificationReporter implements Reporter {
  private passed = 0
  private failed = 0
  private skipped = 0
  private failures: string[] = []

  onTestEnd(test: TestCase, result: TestResult) {
    switch (result.status) {
      case 'passed':
        this.passed++
        break
      case 'failed':
      case 'timedOut':
        this.failed++
        this.failures.push(`${test.title}: ${result.error?.message?.split('\n')[0]}`)
        break
      case 'skipped':
        this.skipped++
        break
    }
  }

  async onEnd(result: FullResult) {
    const total = this.passed + this.failed + this.skipped
    const status = this.failed > 0 ? 'FAILED' : 'PASSED'
    const message = [
      `Tests ${status}`,
      `Passed: ${this.passed} | Failed: ${this.failed} | Skipped: ${this.skipped}`,
      `Duration: ${(result.duration / 1000).toFixed(1)}s`,
    ]

    if (this.failures.length > 0) {
      message.push('', 'Failures:')
      this.failures.slice(0, 5).forEach((f) => message.push(`  - ${f}`))
      if (this.failures.length > 5) {
        message.push(`  ...and ${this.failures.length - 5} more`)
      }
    }

    const webhookUrl = process.env.NOTIFICATION_WEBHOOK
    if (webhookUrl) {
      const controller = new AbortController()
      const timeout = setTimeout(() => controller.abort(), 5000)
      try {
        await fetch(webhookUrl, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({text: message.join('\n')}),
          signal: controller.signal,
        })
      } catch (error) {
        // Intentionally swallow notifier failures to avoid blocking test completion
        console.warn('Webhook notification failed:', error.message)
      } finally {
        clearTimeout(timeout)
      }
    }
  }
}

export default NotificationReporter

import {defineConfig} from '@playwright/test'

export default defineConfig({
  reporter: [['dot'], ['html', {open: 'never'}], ['./reporters/notification-reporter.ts']],
})

import {defineConfig} from '@playwright/test'

export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
})

# Local trace viewer
npx playwright show-trace results/my-test/trace.zip

# From HTML report (click Traces tab)
npx playwright show-report

# Online viewer: https://trace.playwright.dev

import {defineConfig} from '@playwright/test'

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
})

use: {
  video: {
    mode: 'retain-on-failure',
    size: { width: 1280, height: 720 },
  },
},

test-results/
├── checkout-test-chromium/
│   ├── trace.zip
│   ├── test-failed-1.png
│   └── video.webm
├── login-test-firefox/
│   ├── trace.zip
│   └── test-failed-1.png
└── junit.xml

playwright-report/
├── index.html
└── data/

blob-report/
└── report-1.zip

- uses: actions/upload-artifact@v4
  if: ${{ !cancelled() }}
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 14

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: test-traces
    path: |
      test-results/**/trace.zip
      test-results/**/*.png
      test-results/**/*.webm
    retention-days: 7

import {defineConfig} from '@playwright/test'

export default defineConfig({
  reporter: [['html', {outputFolder: 'playwright-report', open: 'never'}]],
})

import {defineConfig} from '@playwright/test'

export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
})

reporter: [['junit', { outputFile: 'results/junit.xml' }]],

# GitHub Actions
- uses: dorny/test-reporter@latest
  with:
    path: results/junit.xml
    reporter: java-junit

# Azure DevOps
- task: PublishTestResults@latest
  inputs:
    testResultsFiles: 'results/junit.xml'

# Jenkins
junit 'results/junit.xml'

import {defineConfig} from '@playwright/test'

export default defineConfig({
  reporter: process.env.CI ? [['blob'], ['dot']] : [['html', {open: 'on-failure'}]],
})

use: {
  screenshot: 'only-on-failure',
},