Test Reporters

📢 Test Reporters: Your Test Results Storytellers

The Newspaper Analogy 📰

Imagine you run a toy factory. Every day, quality checkers test hundreds of toys. But how do you know what happened? You need a reporter — someone who writes down everything that happened and tells you the story!

In Playwright, Test Reporters are like newspaper reporters for your tests. They watch your tests run and then write a “news report” about what passed, what failed, and why.

🏠 Built-in Reporters: Your News Team

Playwright comes with a team of reporters ready to work. Each one writes their report in a different style!

Meet the Team:

How to Pick a Reporter

// playwright.config.js
export default {
  reporter: 'list'
};

That’s it! One line tells Playwright which reporter to use.

🌐 HTML Reporter: The Picture Book

The HTML Reporter creates a beautiful, colorful webpage showing all your test results. It’s like turning your test results into a picture book!

Why Kids (and Adults) Love It:

• Pretty colors — Green for pass, red for fail
• Click to explore — See details of any test
• Screenshots — See what went wrong
• Videos — Watch the test replay!

Setting It Up

// playwright.config.js
export default {
  reporter: [
    ['html', {
      outputFolder: 'my-report',
      open: 'never'
    }]
  ]
};

Opening Your Report

npx playwright show-report

This opens the report in your browser. It’s like opening a book full of pictures!

graph TD
    A["Tests Run"] --> B["HTML Reporter Watches"]
    B --> C["Creates Pretty Webpage"]
    C --> D["You Open in Browser"]
    D --> E["See Colors & Screenshots!"]

📊 JSON Reporter: The Robot’s Notebook

The JSON Reporter writes everything in a special language that computers understand perfectly. It’s like a robot taking notes!

When to Use JSON:

• Building dashboards
• Sending results to other tools
• Storing results in databases
• Creating custom reports

Example Setup

// playwright.config.js
export default {
  reporter: [
    ['json', {
      outputFile: 'results.json'
    }]
  ]
};

What JSON Looks Like

{
  "suites": [{
    "title": "Login Tests",
    "specs": [{
      "title": "should login",
      "ok": true,
      "duration": 1234
    }]
  }]
}

It’s organized data that programs can easily read and use!

🏭 JUnit Reporter: The Factory Standard

JUnit is like a universal language that all CI/CD systems understand. It’s been around forever and works everywhere!

Where JUnit Works:

• Jenkins — The most popular CI tool
• GitHub Actions — Reads JUnit automatically
• Azure DevOps — Native support
• CircleCI — Built-in parsing

Setup Example

// playwright.config.js
export default {
  reporter: [
    ['junit', {
      outputFile: 'results.xml'
    }]
  ]
};

What JUnit XML Looks Like

<testsuites>
  <testsuite name="Login" tests="3">
    <testcase name="login works"/>
    <testcase name="logout works"/>
  </testsuite>
</testsuites>

Think of JUnit as the universal translator that lets any CI system understand your test results!

🎨 Custom Reporters: Be Your Own Storyteller!

What if the built-in reporters don’t tell the story YOU want? Create your own custom reporter!

A Custom Reporter is Like:

• A diary that writes exactly what you care about
• A special notification system
• Your own news channel

Building Your First Custom Reporter

// my-reporter.js
class MyReporter {
  onBegin(config, suite) {
    console.log('🚀 Starting tests!');
  }

  onTestEnd(test, result) {
    const emoji = result.status === 'passed'
      ? '✅' : '❌';
    console.log(`${emoji} ${test.title}`);
  }

  onEnd(result) {
    console.log('🏁 All done!');
  }
}

export default MyReporter;

Using Your Custom Reporter

// playwright.config.js
export default {
  reporter: './my-reporter.js'
};

Available Events You Can Listen To:

graph TD
    A["onBegin"] --> B["onTestBegin"]
    B --> C["Test Runs..."]
    C --> D["onTestEnd"]
    D --> E{More Tests?}
    E -->|Yes| B
    E -->|No| F["onEnd"]

🎭 Multiple Reporters: The Dream Team

Why pick just one reporter when you can have them ALL working together?

Real-World Example:

// playwright.config.js
export default {
  reporter: [
    ['list'],
    ['html', { open: 'never' }],
    ['json', { outputFile: 'results.json' }],
    ['junit', { outputFile: 'results.xml' }]
  ]
};

What Happens:

1. list — Shows progress in terminal
2. html — Creates pretty report for humans
3. json — Saves data for your dashboard
4. junit — Feeds results to Jenkins

All at the same time! It’s like having four reporters at a press conference, each writing for a different newspaper.

graph TD
    A["Your Tests"] --> B["Playwright"]
    B --> C["list - Terminal"]
    B --> D["html - Browser"]
    B --> E["json - Data File"]
    B --> F["junit - CI System"]

Mix Built-in + Custom

// playwright.config.js
export default {
  reporter: [
    ['list'],
    ['./my-slack-reporter.js'],
    ['html']
  ]
};

Now you get terminal output, Slack notifications, AND an HTML report!

🎯 Quick Decision Guide

🌟 Remember!

• Reporters = News writers for your tests
• Built-in = Ready to use, pick your style
• HTML = Beautiful pictures for humans
• JSON = Robot-readable data
• JUnit = Universal CI language
• Custom = Your own special reporter
• Multiple = Use as many as you need!

Your tests work hard. Make sure someone is there to tell their story! 📰✨