Understanding Reporters in playwright - List, Dot, Json, JUnit & HTML Reporters

 In this example, we will explore how to use different reports in Playwright, including practical examples. In Playwright, reporters are tools that collect and present the results of your tests. You can choose different reporters depending on how you want to view or use your test results — whether it's plain text in the terminal, a pretty HTML page, or a machine-readable format like JSON or JUnit XML.

Here is a breakdown of the most commonly used Playwright reporters:

List Reporter (list)

Purpose: Displays test results in a human-readable, sequential list format in the console.

Output: Each test is printed as it runs, showing the test name, status (pass/fail), and any errors. It’s verbose and shows results in real-time.

Format: Plain text in the terminal/console.

Use Case:

1. Ideal for local development and debugging when you want to see test progress and failures immediately.
2. Useful for small test suites where console output is sufficient.
3. Shows a list of test files and test cases.
4. Displays a ✓ for passed tests, and ✖ for failed ones.

Example Output:

Running 3 tests using 1 worker
✓ Page should have a title (120ms)
✗ Login should fail with invalid credentials (150ms)
  Error: expect(received).toBe(expected)
✓ User can log out (100ms)

Configuration:

For more control, you can specify reporters programmatically in the configuration file.

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

export default defineConfig({
  reporter: 'line',
});

The easiest way to try out built-in reporters is to pass --reporter command line option.

npx playwright test --reporter=line

Dot Reporter (dot)

Purpose: Provides a compact, minimalistic console output for test results.

Output: Each test is represented by a single character:

1. . (dot) for a passed test.
2. F for a failed test.
3. S for a skipped test.
4. Results are printed in a grid-like format, making it easy to scan large test suites.

Format: Plain text in the terminal/console.

Use Case:

1. Best for CI/CD pipelines or large test suites where concise output is preferred.
2. Reduces clutter compared to the List reporter.

Example Output:

Running 3 tests using 1 worker
....F.....
1 failed
  Login should fail with invalid credentials

Configuration:

For more control, you can specify reporters programmatically in the configuration file.

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

export default defineConfig({
  reporter: 'dot',
});

The easiest way to try out built-in reporters is to pass --reporter command line option.

npx playwright test --reporter=dot

JSON Reporter (json)

Purpose: Generates a machine-readable JSON file with detailed test execution data.

Output: A JSON file containing test suite details, test results, durations, errors, and metadata (e.g., project, worker info).

Format: JSON file (e.g., report.json).

Use Case:

1. Useful for custom reporting, post-processing, or integration with external tools (e.g., dashboards, analytics).
2. Ideal for automation pipelines needing structured data.

Example Output (simplified):

{
  "suites": [
    {
      "title": "example.spec.js",
      "tests": [
        {
          "title": "Page should have a title",
          "status": "passed",
          "duration": 120
        },
        {
          "title": "Login should fail",
          "status": "failed",
          "duration": 150,
          "errors": [{ "message": "expect(received).toBe(expected)" }]
        }
      ]
    }
  ]
}

Configuration:

For more control, you can specify reporters programmatically in the configuration file.

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

export default defineConfig({
  reporter: [['json', { outputFile: 'results.json' }]],
});

The easiest way to try out built-in reporters is to pass --reporter command line option. Most likely you want to write the JSON to a file. When running with --reporter=json, use PLAYWRIGHT_JSON_OUTPUT_NAME environment variable:

PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json

JUnit Reporter (junit)

Purpose: Produces an XML report compatible with JUnit, commonly used in CI/CD systems like Jenkins, TeamCity, or GitLab.

Output: An XML file with test suite and test case details, including statuses, durations, and failure messages.

Format: XML file (e.g., junit-report.xml).

Use Case:

1. Essential for integrating Playwright test results with CI/CD tools that support JUnit XML format.
2. Provides standardized reporting for test result visualization.

Example Output

<testsuites name="Playwright Tests">
  <testsuite name="example.spec.js" tests="2" failures="1">
    <testcase name="Page should have a title" time="0.120"/>
    <testcase name="Login should fail" time="0.150">
      <failure message="expect(received).toBe(expected)"/>
    </testcase>
  </testsuite>
</testsuites>

Configuration:

For more control, you can specify reporters programmatically in the configuration file.

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

export default defineConfig({
  reporter: [['junit', { outputFile: 'results.xml' }]],
});

The easiest way to try out built-in reporters is to pass --reporter command line option. Most likely you want to write the report to an xml file. When running with --reporter=junit, use PLAYWRIGHT_JUNIT_OUTPUT_NAME environment variable:

PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit

HTML Reporter (html)

Purpose: Generates a rich, interactive HTML report with a user-friendly interface for viewing test results.

Output: An HTML file (with embedded CSS/JS) that includes a summary, test details, screenshots, videos, traces, and error stacks. Can be opened in a browser.

Format: HTML file (e.g., playwright-report/index.html).

Use Case:

1. Best for sharing detailed test results with stakeholders or teams.
2. Useful for debugging, as it includes visual artifacts like screenshots and videos (if enabled).
3. Suitable for both local and CI/CD environments.

Example Output: A browser-based report with:

1. Test summary (passed/failed/skipped counts).
2. Detailed test case views with timings, errors, and attachments.
3. Links to screenshots, videos, or Playwright traces (if configured).

Configuration:

For more control, you can specify reporters programmatically in the configuration file.

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

export default defineConfig({
  reporter: [['html', { outputFolder: 'playwright-report', open: 'on-failure' }]],
});

The easiest way to try out built-in reporters is to pass --reporter command line option.

npx playwright test --reporter=html

Multiple reporters

you can implement multiple reports in playwright by adding multiple reports in playwright configuration. In the Playwright configuration file (playwright.config.js or equivalent), you can specify an array of reporters in the reporter property. Each reporter is defined as an array where:

1. The first element is the reporter name (e.g., list, dot, json, junit, html).
2. The second element (optional) is an object with reporter-specific options (e.g., output file or folder).

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

export default defineConfig({
  reporter: [
    ['list'],
    ['json', { outputFile: 'report.json' }],
    ['junit', { outputFile: 'report.xml' }],
    ['html', { outputFolder: 'html-report', open: 'never' }]
  ],
});

Reporters on CI

You can use different reporters locally and on CI. For example, using concise 'dot' reporter avoids too much output. This is the default on CI.

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

export default defineConfig({
  // Concise 'dot' for CI, default 'list' when running locally
  reporter: process.env.CI ? 'dot' : 'list',
});

GitHub Actions annotations

You can use the built in github reporter to get automatic failure annotations when running in GitHub actions.

Note that all other reporters work on GitHub Actions as well, but do not provide annotations. Also, it is not recommended to use this annotation type if running your tests with a matrix strategy as the stack trace failures will multiply and obscure the GitHub file view.

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

export default defineConfig({
  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
  // default 'list' when running locally
  reporter: process.env.CI ? 'github' : 'list',
});

This is all about different type of reporting in playwright. In Playwright, reporters are tools that collect and present the results of your tests. You can choose different reporters depending on how you want to view or use your test results.