Day 15: Custom Reporters — Allure, HTML Dashboards, and Slack Notifications

This is Day 15 of the 21-Day Playwright with TypeScript Challenge. One lesson per day. Zero to production-ready in 3 weeks.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Built-in reporters cover basics. Custom reporters send Slack alerts on failure, generate Allure dashboards, and create team-specific formats.

Built-in Reporters

// playwright.config.ts
reporter: [
  ['html', { open: 'never' }],        // Rich HTML report
  ['json', { outputFile: 'results.json' }], // Machine-readable
  ['junit', { outputFile: 'junit.xml' }],   // CI integration
  ['list'],                             // Console output
  ['dot'],                              // Minimal dots
]

Allure Integration

# Install
npm install -D allure-playwright allure-commandline

# Config
reporter: [['allure-playwright']]

# Generate report
npx allure generate allure-results -o allure-report --clean
npx allure open allure-report

Custom Reporter: Slack on Failure

// reporters/SlackReporter.ts
import type { Reporter, TestCase, TestResult } from '@playwright/test/reporter';

class SlackReporter implements Reporter {
  private failures: string[] = [];

  onTestEnd(test: TestCase, result: TestResult) {
    if (result.status === 'failed') {
      this.failures.push(test.title + ': ' + result.error?.message?.slice(0, 100));
    }
  }

  async onEnd() {
    if (this.failures.length === 0) return;
    
    const webhook = process.env.SLACK_WEBHOOK_URL;
    if (!webhook) return;

    await fetch(webhook, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        text: '! ' + this.failures.length + ' test(s) failed:\n' +
          this.failures.map(f => '- ' + f).join('\n')
      }),
    });
  }
}

export default SlackReporter;

Using Custom Reporter

// playwright.config.ts
reporter: [
  ['html'],
  ['./reporters/SlackReporter.ts'],
]

Tomorrow (Day 16): CI/CD integration — GitHub Actions pipeline from scratch.