Playwright HTML Reports

A pilot never lands a plane by guessing altitude and speed. Every instrument reading gets displayed clearly on a dashboard for instant understanding. An HTML report gives a testing team that same clear dashboard, summarizing dozens or hundreds of test results in one browsable page.

From Raw Results to a Readable Report

Test Suite Finishes Running
        |
        v
Results Collected (pass, fail, skipped)
        |
        v
HTML Report Generated Automatically
        |
        v
Opened and Reviewed in a Browser

Enabling the HTML Reporter

module.exports = {
  reporter: 'html',
};

This tells Playwright to build a complete HTML report automatically every time a test run finishes, replacing the need to scroll through dense terminal text manually.

Viewing the Report Locally

npx playwright show-report

This opens the generated report directly in the default browser, displaying every test with a clear pass or fail indicator alongside its duration.

What a Report Actually Shows

Each test entry displays its name, status, and how long it took to run. A failed test expands to show the exact error message, a screenshot of the page at the moment of failure, and often a link to open the full trace recording.

Using Multiple Reporters Together

module.exports = {
  reporter: [
    ['html'],
    ['list'],
  ],
};

This produces both a full HTML report and a simple text list printed directly in the terminal, giving a quick summary during the run and a detailed report for later review.

Sharing a Report With the Whole Team

The generated report folder can upload to a shared server, a company intranet, or a continuous integration dashboard. This allows managers and other developers to review test results without ever running the tests themselves.

A Real-World Example

A team runs three hundred tests automatically every night after code changes merge. The next morning, a project manager opens the HTML report and immediately sees two failed tests, each with an attached screenshot showing a broken discount code field. No one needed to rerun a single test to understand exactly what went wrong.

Setting a Report to Stay Open Only on Failure

module.exports = {
  reporter: [['html', { open: 'on-failure' }]],
};

This automatically opens the report only when at least one test fails, staying quiet and out of the way during a fully successful run.

Quick Practice Task

Enable the HTML reporter in your project, run your test suite, then open the report and click into any single test to explore its details.

Key Takeaways

• HTML reports summarize test results in a clear, browsable page.
• The reporter setting in the config file controls report generation.
• Failed tests include screenshots and detailed error messages automatically.
• Teams can review shared reports without rerunning any tests themselves.