classy-reporter 🎭

A feature-rich Playwright test reporter that produces a beautiful, interactive HTML report with historical trend charts, multi-language support, dark mode, and detailed per-test diagnostics.

Features

Test Status Tracking

• Passed — test executed successfully
• Failed — test failed with an error
• Skipped — test was skipped via .skip()
• Flaky — failed on first attempt, passed on retry
• Timed Out — test exceeded its timeout limit
• Interrupted — test execution was interrupted

HTML Report

• 9 stat tiles — Total, Passed, Failed, Skipped, Flaky, Timed Out, Interrupted, Pass Rate, Total Time
• Visual progress bar — colour-coded breakdown of pass / fail / skip
• Filter buttons — filter the list by status; filtered view matches the unfiltered layout exactly
• Suite grouping — tests organised by describe block
• Per-test error preview — single-line error with exact file & line number (at test.spec.js:42)
• Expandable test details with three tabs:
  • Steps — full step trace
  • Console — captured stdout / stderr with ANSI colour codes stripped
  • Attachments — screenshots and other files
• Historical trend charts (2 × 2 grid, visible after 2 runs):
  • Pass Rate Over Time
  • Test Results Distribution (passed / failed / skipped)
  • Total Tests Run
  • Test Duration
  • Chart tooltips show the full completed timestamp on hover
• Dark / Light theme toggle, persisted across page loads
• Language selector dropdown — switch between English, Español, and Français at any time; choice is persisted in the browser

Other Outputs

• JSON report (test-report.json) — machine-readable summary
• Console summary — printed to terminal after every run

Installation

npm install classy-reporter --save-dev

yarn add classy-reporter --dev

Quick Start

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

export default defineConfig({
  reporter: [['classy-reporter']],
});

Reports are written to classy-reports/test-report.html by default.

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | outputFile | string | 'test-report.html' | HTML report filename | | outputFolder | string | 'classy-reports' | Output directory | | title | string | 'Playwright Test Report' | Report heading | | enableTrends | boolean | true | Enable historical trend tracking | | trendsPeriodDays | number | 180 | Days of history to retain (min 1) | | historyFile | string | 'test-history.json' | History file name inside outputFolder | | language | string | 'en' | Default report language ('en', 'es', 'fr') |

Full example

export default defineConfig({
  reporter: [
    ['classy-reporter', {
      outputFile: 'test-report.html',
      outputFolder: 'classy-reports',
      title: 'My Test Report',
      enableTrends: true,
      trendsPeriodDays: 30,   // keep 30 days of history
      historyFile: 'test-history.json',
      language: 'en',         // 'en' | 'es' | 'fr'
    }]
  ],
});

Disable trends

reporter: [['classy-reporter', { enableTrends: false }]]

Use alongside other reporters

reporter: [
  ['classy-reporter'],
  ['list'],
  ['json', { outputFile: 'results.json' }],
],

Language Support

Set the language option to control the initial language of the generated report:

reporter: [['classy-reporter', { language: 'fr' }]]

After the report opens in the browser, users can change language at any time using the 🌐 dropdown in the top-right corner — no page reload required. The selection is saved in localStorage.

| Code | Language | |------|----------| | en | English (default) | | es | Español | | fr | Français |

Historical Trends

The reporter maintains a test-history.json file inside outputFolder. Each test run appends an entry; entries older than trendsPeriodDays are pruned automatically.

| Run count | Behaviour | |-----------|-----------| | 0 | No history file yet | | 1 | History created, "run more tests" prompt shown | | 2+ | Interactive trend charts appear |

Tip: Commit test-history.json to your repository to preserve trends across CI machines and team members.

The active retention period is printed to the console at the start of every run:

📅 Trend history retention: 30 day(s)  (set trendsPeriodDays in reporter options to change)

Console Tab — Captured Output

The Console tab inside each expanded test shows everything written to stdout and stderr during that test (e.g. console.log() calls). ANSI colour codes are stripped automatically so the output is always readable.

Failed Test Details

For failed tests the report shows:

• A compact, single-line error preview directly on the test row (same height as a passing row), including the source file and line number — e.g. at checkout.spec.js:87
• Full error details available by expanding the test and opening the Steps tab

Output Structure

classy-reports/
├── test-report.html    # Interactive HTML report
├── test-report.json    # JSON summary
└── test-history.json   # Historical trend data (auto-managed)

JSON Report Format

{
  "stats": {
    "total": 25,
    "passed": 20,
    "failed": 3,
    "skipped": 2,
    "flaky": 1,
    "timedOut": 0,
    "interrupted": 0,
    "duration": 45320
  },
  "suites": [...],
  "startTime": "2024-01-15T10:30:00.000Z",
  "endTime": "2024-01-15T10:30:45.320Z",
  "duration": 45320
}

Console Summary

═══════════════════════════════════════════════════════
                  TEST SUMMARY
═══════════════════════════════════════════════════════
Total Tests:      25
✅ Passed:        20
❌ Failed:        3
⏭️  Skipped:       2
⚠️  Flaky:         1
⏱️  Timed Out:     0
🛑 Interrupted:   0
───────────────────────────────────────────────────────
Pass Rate:        80.00%
Duration:         45.32s
═══════════════════════════════════════════════════════

Notes

CDN dependency

Trend charts use Chart.js loaded from a CDN. An internet connection is required for charts to render in the HTML report.

Version control tips

# .gitignore — ignore generated reports, keep history for trends
classy-reports/test-report.html
classy-reports/test-report.json

Commit test-history.json so trends are shared across the team and persist in CI:

git add classy-reports/test-history.json

Requirements

• Node.js >= 16.0.0
• @playwright/test >= 1.40.0

License

MIT