Understanding Custom reporters in playwright

 In this example, we will explore how to use custom reports in Playwright, including practical examples. Custom reporters in Playwright let you hook into the test lifecycle and build your own way of reporting test results. This is useful when the built-in reporters don’t fully meet your needs. for example, sending test results to Slack, a custom dashboard, a database, or generating a very specific format.

What is a Custom Reporter?

A custom reporter is a class that implements the Reporter interface provided by Playwright. You can hook into events like:

1. onBegin() – when testing starts.
2. onTestBegin() – when a test starts.
3. onTestEnd() – when a test finishes.
4. onEnd() – when testing ends.

You can create a custom reporter by implementing a class with some of the reporter methods.

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;

Now use this reporter with testConfig.reporter.

playwright.config.ts

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

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

Or just pass the reporter file path as --reporter command line option:

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

This is all about custom reporters in playwright.