🎯Blog # 24: Playwright Reporters Demystified: Know What Your Tests Are Saying

Whether you're running a handful of tests or scaling up to hundreds, knowing what happened, where it failed, and how to debug it fast is crucial. That’s where Playwright reporters become your best friends.

In this blog, I’ll take you on a tour of Playwright’s built-in reporters, show you sample test scripts, and (yes!) include screenshots of each report in action so you can see the difference.

🧠 What Are Reporters?

Reporters are like your test suite's storytellers. After executing your tests, they summarize the results—either in your terminal or in beautiful visual formats. Think of them as:

• Terminal dashboards 
• Structured outputs for CI/CD
• Visual tools for debugging
• Data sources for analytics

🧪 Sample Test File

Here’s the test script I’m using for this blog. Each test is designed to showcase one type of reporter:

const { test, expect } = require('@playwright/test');

test('List reporter example (updated)', async ({ page }) => {
    await page.goto('https://www.iana.org');
    await expect(page).toHaveTitle(/Internet Assigned Numbers Authority/);
});

test('Dot reporter example', async ({ page }) => {
    await page.goto('https://playwright.dev');
    await expect(page).toHaveTitle(/Playwright/);
});

test('HTML reporter example', async ({ page }) => {
    await page.goto('https://github.com');
    await expect(page).toHaveTitle(/GitHub/);
});

test('JSON reporter example', async ({ page }) => {
    await page.goto('https://www.wikipedia.org');
    await expect(page).toHaveTitle(/Wikipedia/);
});

Let’s explore how each reporter works—and what the output looks like 👇

📜 1. List Reporter

npx playwright test --reporter=list

🧾 Output: A clean list of each test with its status and time taken.

✅ Great for local debugging and readable summaries.

⚫ 2. Dot Reporter

Each dot represents a test, and failed tests show as F.

npx playwright test --reporter=dot

⚡ Fast, minimal, perfect for CI terminals or massive test suites.

📈 3. Line Reporter

npx playwright test --reporter=line

It shows real-time updates of tests as they run—visually pleasing and useful in CI logs.

🌐 4. HTML Reporter

npx playwright test --reporter=html
npx playwright show-report

📊 A beautiful, clickable HTML report showing:

• Test names, status, duration
• Ability to view traces and errors
• Great for debugging failed tests

🎯 Ideal for team collaboration or sharing detailed results with stakeholders.

🧾 5. JSON Reporter

npx playwright test --reporter=json

📄 Output: A structured json file with full test metadata.

📌 To specify file location, use config like:

reporter: [['json', { outputFile: 'results/report.json' }]]

💡 Use this to:

• Build custom dashboards
• Feed test data into analytics tools
• Automate monitoring/reporting

🧪 6. JUnit Reporter

npx playwright test --reporter=junit

🗂️ Produces an XML file compatible with tools like Jenkins, CircleCI, and GitLab CI.

📌 To specify output file:

reporter: [['junit', { outputFile: 'results/junit-results.xml' }]]

✅ Best for CI/CD integrations that expect standardized XML format.

⚙️ Configuring Reporters in playwright.config.js

Instead of passing reporters via CLI each time, you can configure them once in your playwright.config.js file:

import { defineConfig } from '@playwright/test';
export default defineConfig({
  reporter: [
    ['list'],
    ['html'],
    ['json', { outputFile: 'results/report.json' }],
    ['junit', { outputFile: 'results/junit-results.xml' }]
  ]
});

Now just run:

npx playwright test

💡 Your test run will generate all configured reports in one go!

✅ Final Thoughts

Choosing the right reporter isn’t just about pretty output—it’s about clarity, debuggability, and team collaboration.

• 🚀 Start with html for local devs
• ⚙️ Use junit or json in CI
• 🔍 Combine reporters for the best of all worlds

Let me know which reporter is your favorite—or if you’ve used these in creative ways.

Thanks for reading and happy testing with Playwright! 💜🎭