Writing Custom Reporters in Playwright

 πŸ§Ύ Writing Custom Reporters in Playwright

Playwright is a powerful end-to-end testing framework for web applications. It comes with built-in reporters like list, dot, html, and json. But sometimes, you need custom reporters to generate reports tailored to your team’s needs—such as custom logs, dashboards, or integration with third-party systems.


πŸ“Œ What is a Reporter?

A reporter in Playwright is a way to capture and display the results of your tests. Custom reporters let you control how the test results are logged, formatted, or sent elsewhere.


πŸ› ️ Steps to Create a Custom Reporter

✅ 1. Create a Reporter Class

Create a new JavaScript or TypeScript file, for example:

my-custom-reporter.js


js

Copy

Edit

class MyCustomReporter {

  onBegin(config, suite) {

    console.log('🎬 Test run started');

    console.log(`Running ${suite.allTests().length} tests...`);

  }


  onTestBegin(test) {

    console.log(`πŸ§ͺ Starting test: ${test.title}`);

  }


  onTestEnd(test, result) {

    console.log(`✅ Finished test: ${test.title} - Status: ${result.status}`);

  }


  onEnd(result) {

    console.log('πŸ“¦ Test run finished');

    console.log(`Overall status: ${result.status}`);

  }

}


module.exports = MyCustomReporter;

✅ 2. Use the Custom Reporter in Playwright Config

In your playwright.config.js:


js

Copy

Edit

const MyCustomReporter = require('./my-custom-reporter');


module.exports = {

  reporter: [

    [MyCustomReporter]

  ]

};

Or, if you're using the CLI:


bash

Copy

Edit

npx playwright test --reporter=./my-custom-reporter.js

πŸ”§ Reporter Methods You Can Implement

Method Description

onBegin Called before any tests are run

onEnd Called after all tests finish

onTestBegin Called before each individual test starts

onTestEnd Called after each test finishes

onStdOut/onStdErr Called when tests print to stdout/stderr

onStepBegin / onStepEnd Called on Playwright test steps


πŸ—ƒ️ Example Use Cases for Custom Reporters

Log test results in a custom format (e.g., Markdown, XML).


Save test results to a database or REST API.


Send Slack/email notifications on failures.


Create CI/CD-friendly summary logs.


πŸš€ Tip

If you want to build advanced reporters, look at Playwright’s built-in reporters like html.reporter.ts or json.reporter.ts in the Playwright GitHub repo.

Learn Playwright Training Course in Hyderabad

Read More

Using Playwright for Mobile Web Testing

Custom Helpers and Utilities in Playwright

Visual Regression Testing with Playwright

Slack Notifications for Playwright Test Results

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions

Comments

Popular posts from this blog

How to Install and Set Up Selenium in Python (Step-by-Step)

Tosca for API Testing: A Step-by-Step Tutorial

Feeling Stuck in Manual Testing? Here’s Why You Should Learn Automation Testing