How to Generate Playwright HTML Report – Complete Step-by-Step Guide with Examples (2026)

Leave a Comment / Uncategorized / By

Introduction: Why HTML Reports Are Essential in Modern Test Automation

Automation testing is not just about executing test cases—it is also about understanding the results quickly and efficiently. A detailed test report helps QA engineers identify failures, analyze errors, and share execution results with developers and stakeholders.

Modern DevOps and CI/CD pipelines execute automated tests after every code change. Instead of manually reviewing console logs, teams rely on Playwright HTML reports to visualize execution results through an interactive dashboard.

Playwright provides a built-in HTML Reporter that generates rich, user-friendly reports containing:

  • Test execution summary
  • Passed, failed, and skipped tests
  • Error messages
  • Stack traces
  • Screenshots
  • Videos
  • Trace Viewer links
  • Execution duration

If you’re learning how to generate Playwright HTML report, you’re building an essential skill used by QA Automation Engineers, SDETs, Selenium engineers transitioning to Playwright, software testing students, and developers.

Whether you are:

  • A QA Automation Engineer
  • An SDET
  • A Selenium engineer transitioning to Playwright
  • A software testing student
  • A web developer
  • Preparing for Playwright interviews

Learning Playwright HTML Reporter will help you debug automation failures faster, improve collaboration, and create professional automation frameworks.

In this guide, you’ll learn:

  • What is a Playwright HTML Report?
  • Types of Playwright reporters
  • How to configure the HTML Reporter
  • Generate HTML reports
  • Customize report output
  • CI/CD integration
  • Report dashboard walkthrough
  • Troubleshooting tips
  • Interview questions
  • FAQs

What Is a Playwright HTML Report?

A Playwright HTML Report is an interactive report generated after test execution that provides a visual summary of automation results.

Unlike simple console output, the HTML report presents detailed information in an easy-to-navigate web interface.

Simple Definition

A Playwright HTML Report is a browser-based dashboard that displays test execution results, screenshots, videos, traces, and error details after running Playwright tests.

Features of the HTML Reporter

The built-in HTML Reporter includes:

  • Interactive dashboard
  • Test summary
  • Passed tests
  • Failed tests
  • Skipped tests
  • Execution duration
  • Error stack traces
  • Screenshots
  • Videos
  • Trace Viewer integration

Benefits for QA Teams

Using Playwright HTML reports helps teams:

  • Analyze failures quickly
  • Share execution reports
  • Improve debugging
  • Track regression results
  • Simplify CI/CD reporting
  • Increase test visibility
  • Improve collaboration

Why Generate HTML Reports in Playwright?

Automation frameworks generate hundreds or even thousands of test results during every execution.

Reviewing console logs is time-consuming.

HTML reports provide a structured and interactive way to analyze results.

Benefits for SDETs and QA Engineers

HTML reports help teams:

  • Identify failed test cases
  • Review screenshots
  • Analyze stack traces
  • Investigate browser recordings
  • Validate regression execution
  • Improve release confidence

Real-World Example

Imagine an e-commerce application with:

  • Login tests
  • Search tests
  • Checkout tests
  • Payment tests
  • Order history tests

After executing 500 tests:

Console Output:

Passed: 486

Failed: 14

This doesn’t explain why tests failed.

The HTML report immediately shows:

  • Failed step
  • Screenshot
  • Stack trace
  • Video recording
  • Trace file
  • Execution timeline

This significantly reduces debugging time.

Understanding Playwright Reporters

Playwright supports multiple reporters depending on your project requirements.

1. HTML Reporter

The HTML Reporter generates a rich web-based dashboard.

Configuration:

reporter: ‘html’

Best For

  • Manual report review
  • QA teams
  • Regression testing
  • CI/CD artifacts

2. List Reporter

Displays execution progress in the terminal.

Example:

reporter: ‘list’

Best For

  • Local development
  • Debugging
  • Small projects

3. Dot Reporter

Displays minimal output.

Example:

reporter: ‘dot’

Output:

……..F…..

Best For

  • Fast CI execution
  • Large automation suites

4. JSON Reporter

Exports execution results in JSON format.

reporter: ‘json’

Best For

  • Dashboards
  • Custom reporting
  • Analytics tools

5. JUnit Reporter

Generates XML reports.

reporter: ‘junit’

Best For

  • Jenkins
  • Azure DevOps
  • Enterprise CI servers

6. Combining Multiple Reporters

Playwright allows multiple reporters simultaneously.

Example:

reporter: [

[‘list’],

[‘html’],

[‘junit’],

[‘json’]

]

Practical Scenario

One execution can generate:

  • Console output
  • HTML report
  • XML report
  • JSON report

at the same time.

Step-by-Step Guide: How to Generate Playwright HTML Report

Step 1: Install and Configure Playwright

Create a new Playwright project.

mkdir playwright-report-demo

cd playwright-report-demo

npm init -y

npm init playwright@latest

Verify installation.

npx playwright test

Expected Result

Playwright installs:

  • Browser binaries
  • Test Runner
  • HTML Reporter
  • Configuration files

Step 2: Configure the HTML Reporter

Open playwright.config.ts

import { defineConfig } from ‘@playwright/test’;

export default defineConfig({

    reporter: ‘html’

});

Explanation

This tells Playwright to automatically generate an HTML report after every test execution.

Use Case

Ideal for:

  • Regression testing
  • CI/CD pipelines
  • Enterprise automation
  • Test result analysis

Step 3: Run Playwright Tests

Execute your test suite.

npx playwright test

Expected Output

After the execution completes, Playwright automatically generates the HTML report inside the default playwright-report directory.

Step 4: Generate the Playwright HTML Report

After executing your Playwright tests, the HTML report is automatically generated if the HTML Reporter is configured.

Run your test suite:

npx playwright test

Expected Output

Running 15 tests using 4 workers

15 passed (18s)

To open the last HTML report run:

npx playwright show-report

Explanation

Playwright automatically:

  • Executes all test cases
  • Collects execution results
  • Captures failures
  • Stores screenshots (if enabled)
  • Stores videos (if enabled)
  • Generates an interactive HTML report

By default, the report is created inside:

playwright-report/

Step 5: Open the HTML Report

Use the Playwright CLI to launch the report in your browser.

npx playwright show-report

Explanation

The command starts a local web server and opens the report in your default browser.

Example Output

Serving HTML report at:

http://127.0.0.1:9323

Open the URL to explore your test results.

Use Case

Useful for:

  • Local debugging
  • Reviewing regression results
  • Sharing execution outcomes with team members

Step 6: Customize the HTML Report Output Directory

You can customize where Playwright stores the generated HTML report.

Example configuration:

import { defineConfig } from ‘@playwright/test’;

export default defineConfig({

    reporter: [

        [‘html’, {

            outputFolder: ‘reports/html-report’,

            open: ‘never’

        }]

    ]

});

Explanation

This configuration:

  • Stores reports inside reports/html-report
  • Prevents the report from opening automatically after execution

Available Options

OptionDescription
outputFolderDirectory where reports are saved
open: ‘always’Opens report automatically
open: ‘never’Never opens automatically
open: ‘on-failure’Opens only when tests fail

Practical Use Case

Enterprise projects often organize reports like this:

playwright-project/

reports/

html-report/

junit/

json/

screenshots/

videos/

This keeps all reporting artifacts organized.

Step 7: Enable Screenshots, Videos, and Trace Collection

The Playwright HTML Report becomes much more useful when screenshots, videos, and traces are included.

Example configuration:

import { defineConfig } from ‘@playwright/test’;

export default defineConfig({

    use: {

        screenshot: ‘only-on-failure’,

        video: ‘retain-on-failure’,

        trace: ‘retain-on-failure’

    }

});

Explanation

This configuration:

  • Captures screenshots only for failed tests
  • Saves videos only when a test fails
  • Stores Playwright Trace Viewer files for debugging

Benefits

Failed tests become much easier to investigate because developers can review:

  • Exact browser state
  • User actions
  • Network activity
  • Console logs
  • Execution timeline

Exploring the Playwright HTML Report Dashboard

The Playwright HTML Report provides a rich dashboard for analyzing test execution.

1. Test Summary

The home page displays an overview of the execution.

Typical information includes:

  • Total tests
  • Passed tests
  • Failed tests
  • Skipped tests
  • Execution duration

Placeholder Screenshot

+——————————————————+

|            Playwright HTML Report                    |

+——————————————————+

| Total Tests : 120                                    |

| Passed      : 116                                    |

| Failed      : 4                                      |

| Skipped     : 0                                      |

| Duration    : 5m 22s                                 |

+——————————————————+

[Screenshot Placeholder: Playwright HTML Report Dashboard]

2. Passed, Failed, and Skipped Tests

Each test is grouped by status.

Example:

✔ Login Test

✔ Search Product

✔ Checkout

✖ Payment

✖ Order History

Clicking any test displays detailed execution steps.

3. Error Stack Traces

Failed tests include detailed stack traces.

Example:

TimeoutError:

locator.click:

Timeout 30000ms exceeded

Benefits

Developers can quickly identify:

  • Failed line number
  • Exception message
  • Test location
  • Stack trace

without searching through console logs.

4. Screenshots and Videos

If enabled, failed tests automatically display:

  • Failure screenshots
  • Browser videos

Example:

Payment Test

📷 Screenshot

🎥 Video Recording

These visual artifacts make debugging much faster.

5. Trace Viewer Integration

One of Playwright’s most powerful features is the built-in Trace Viewer.

Example configuration:

trace: ‘retain-on-failure’

The HTML report automatically provides a link to open the trace.

Trace Viewer allows you to inspect:

  • Every click
  • Keyboard input
  • Network requests
  • DOM snapshots
  • Console logs
  • Timeline of events

Practical Scenario

Instead of reproducing a failure manually, open the trace and replay the test step by step.

Architecture Diagram

Execute Tests

      │

      ▼

Playwright Test Runner

      │

      ▼

Collect Results

      │

      ▼

Generate HTML Report

      │

      ▼

Screenshots

Videos

Trace Files

      │

      ▼

Interactive Dashboard

Real-World Reporting Example

Imagine a regression suite with 250 test cases.

Execution Results:

Passed : 243

Failed : 7

Skipped : 0

Clicking Payment Test reveals:

  • Stack trace
  • Screenshot
  • Video recording
  • Trace file
  • Execution duration
  • Browser information

Instead of manually reproducing the issue, QA engineers can identify the root cause within minutes.

Running HTML Reports in CI/CD Pipelines

Generating reports locally is useful during development, but in enterprise environments, Playwright HTML reports are typically generated automatically in CI/CD pipelines after every build. Teams can then download and review the reports even if the pipeline has finished.

GitHub Actions

GitHub Actions is one of the most widely used CI/CD platforms for Playwright automation.

Create a workflow file:

name: Playwright HTML Report

on:

  push:

    branches:

      – main

jobs:

  test:

    runs-on: ubuntu-latest

    steps:

      – uses: actions/checkout@v4

      – uses: actions/setup-node@v4

        with:

          node-version: 20

      – run: npm ci

      – run: npx playwright install –with-deps

      – run: npx playwright test

      – uses: actions/upload-artifact@v4

        if: always()

        with:

          name: playwright-html-report

          path: playwright-report/

Explanation

This workflow:

  • Checks out the project
  • Installs dependencies
  • Executes Playwright tests
  • Generates the HTML report
  • Uploads the report as a downloadable artifact

Expected Output

After the workflow completes, GitHub Actions displays:

Artifacts

✔ playwright-html-report.zip

QA engineers can download and open the report without rerunning the tests.

Azure DevOps

Azure DevOps also supports publishing Playwright reports.

Example pipeline:

trigger:

– main

pool:

  vmImage: ubuntu-latest

steps:

– task: NodeTool@0

  inputs:

    versionSpec: ’20.x’

– script: npm ci

– script: npx playwright install –with-deps

– script: npx playwright test

– task: PublishBuildArtifacts@1

  inputs:

    PathtoPublish: ‘playwright-report’

    ArtifactName: ‘PlaywrightReport’

Practical Scenario

Useful for:

  • Enterprise regression suites
  • Release validation
  • Daily automation execution

Jenkins

Many organizations continue using Jenkins for automation pipelines.

Example Jenkins Pipeline:

pipeline {

    agent any

    stages {

        stage(‘Install’) {

            steps {

                sh ‘npm ci’

                sh ‘npx playwright install –with-deps’

            }

        }

        stage(‘Execute Tests’) {

            steps {

                sh ‘npx playwright test’

            }

        }

    }

    post {

        always {

            archiveArtifacts artifacts: ‘playwright-report/**’

        }

    }

}

Explanation

After test execution:

  • HTML report is archived
  • Screenshots are stored
  • Videos are preserved
  • Reports remain available for download

GitLab CI

GitLab CI supports artifact publishing in a similar way.

Example:

stages:

– test

playwright:

  image: mcr.microsoft.com/playwright:v1.54.0

  script:

    – npm ci

    – npx playwright test

  artifacts:

    paths:

      – playwright-report

Expected Result

GitLab stores the generated Playwright HTML report as a pipeline artifact that team members can download from the pipeline page.

Publishing HTML Reports as Build Artifacts

One of the most important enterprise reporting practices is publishing reports as pipeline artifacts.

Typical workflow:

Run Tests

     │

     ▼

Generate HTML Report

     │

     ▼

Upload as Artifact

     │

     ▼

Download from CI/CD

     │

     ▼

Review Failures

Benefits

Publishing reports allows teams to:

  • Share execution results
  • Debug failures remotely
  • Preserve historical reports
  • Review regressions without rerunning tests

Best Practices for Playwright Reporting

Following these best practices helps build professional reporting solutions.

1. Store Reports as Pipeline Artifacts

Always upload HTML reports after execution.

Benefits:

  • Easy sharing
  • Centralized storage
  • Historical execution tracking

2. Enable Screenshots and Videos

Configuration:

use: {

    screenshot: ‘only-on-failure’,

    video: ‘retain-on-failure’

}

Why?

Visual evidence significantly reduces debugging time.

3. Enable Trace Collection

trace: ‘retain-on-failure’

Trace files allow developers to replay failed tests step by step.

4. Archive Reports for Regression Analysis

Many teams archive reports for:

  • Weekly regression runs
  • Monthly releases
  • Sprint reviews
  • Production deployments

Historical reports help compare application quality over time.

5. Generate Reports for Every Pipeline Execution

Avoid generating reports only for failed builds.

Generate reports for:

  • Pull Requests
  • Nightly builds
  • Smoke tests
  • Regression suites
  • Production releases

This provides complete visibility into automation health.

Enterprise Reporting Strategy

A mature Playwright reporting framework typically stores:

reports/

├── html-report/

├── junit/

├── json/

├── screenshots/

├── videos/

├── traces/

└── history/

This structure makes it easy to integrate with dashboards, CI servers, and reporting tools.

Report Retention Strategy

Many organizations automatically retain reports.

Example policy:

Report TypeRetention
Smoke Test Reports7 days
Regression Reports30 days
Release Reports90 days
Production Validation Reports1 year

Long-term storage helps teams analyze quality trends and investigate past failures.

Common Reporting Mistakes

 Deleting Reports Immediately

Always archive reports before cleanup.

 Capturing Screenshots for Every Test

This consumes significant disk space.

Recommended:

screenshot: ‘only-on-failure’

 Ignoring Trace Viewer

Trace Viewer is one of Playwright’s most valuable debugging tools.

Always enable it for failed tests.

 Publishing Only Console Logs

Console output lacks the rich information available in HTML reports.

Always publish:

  • HTML reports
  • Screenshots
  • Videos
  • Trace files

Common HTML Report Issues and Troubleshooting Tips

Although Playwright automatically generates HTML reports, you may occasionally encounter reporting issues, especially in CI/CD pipelines or enterprise automation projects. Understanding these problems will help you quickly identify and resolve them.

Issue 1: HTML Report Not Generated

Cause

The HTML reporter is not configured correctly or tests did not execute successfully.

Example configuration:

reporter: ‘html’

Solution

Verify your playwright.config.ts file.

import { defineConfig } from ‘@playwright/test’;

export default defineConfig({

    reporter: ‘html’

});

Then rerun your tests:

npx playwright test

Expected Result

A new folder is created:

playwright-report/

containing the generated HTML report.

Issue 2: Blank HTML Report

Cause

The report was generated before any tests executed or the execution failed before reporting completed.

Solution

Verify:

  • Test files exist.
  • Tests executed successfully.
  • The output folder is not empty.

Run:

npx playwright test

Then open the report:

npx playwright show-report

Issue 3: Missing Screenshots or Videos

Cause

Screenshots and videos are not enabled in the Playwright configuration.

Solution

Configure Playwright to retain artifacts for failed tests.

use: {

    screenshot: ‘only-on-failure’,

    video: ‘retain-on-failure’,

    trace: ‘retain-on-failure’

}

Expected Result

The HTML report automatically displays:

  • 📷 Screenshots
  • 🎥 Videos
  • 📍 Trace Viewer

for failed test cases.

Issue 4: Incorrect Report Path

Cause

The configured output directory is incorrect or does not exist.

Incorrect example:

outputFolder: ‘reports’

while attempting to open:

npx playwright show-report playwright-report

Solution

Ensure the configured directory matches the report location.

reporter: [

[‘html’, {

outputFolder: ‘playwright-report’

}]

]

Issue 5: CI Artifact Publishing Failures

Cause

The CI/CD pipeline is not configured to archive the generated report.

Solution

Publish the report directory as a build artifact.

GitHub Actions example:

– uses: actions/upload-artifact@v4

  if: always()

  with:

    name: playwright-report

    path: playwright-report/

Expected Result

The report becomes downloadable directly from the pipeline execution.

Architecture Diagram

Execute Tests

      │

      ▼

Generate HTML Report

      │

      ▼

Screenshots

Videos

Trace Files

      │

      ▼

Upload Artifact

      │

      ▼

CI/CD Dashboard

      │

      ▼

Team Review

Playwright HTML Report vs Allure Report vs JUnit Report

FeaturePlaywright HTML ReportAllure ReportJUnit Report
Interactive Dashboard✅ Yes✅ Yes❌ No
Built into Playwright✅ Yes❌ Plugin Required❌ Reporter Required
Screenshots✅ Yes✅ Yes❌ No
Videos✅ Yes✅ Yes❌ No
Trace Viewer✅ Yes❌ No❌ No
CI/CD Friendly✅ Excellent✅ Excellent✅ Excellent
XML Output❌ NoOptional✅ Yes
Easy Setup⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Best ForPlaywright ProjectsEnterprise DashboardsCI Servers

Why Choose the Playwright HTML Reporter?

Compared to third-party reporting tools, the Playwright HTML Reporter offers:

  • Built-in support with no additional plugins
  • Interactive dashboard
  • Automatic screenshots and videos
  • Trace Viewer integration
  • Simple configuration
  • Excellent CI/CD compatibility
  • Fast report generation

For most Playwright projects, the HTML Reporter is the recommended default choice.

Playwright HTML Report Interview Questions with Answers

1. What is a Playwright HTML Report?

A Playwright HTML Report is an interactive web-based report that displays automation execution results, including passed, failed, and skipped tests, screenshots, videos, and trace files.

2. Which reporter generates HTML reports?

The built-in HTML Reporter generates Playwright HTML reports.

Configuration:

reporter: ‘html’

3. How do you open the generated report?

Use the Playwright CLI command:

npx playwright show-report

This starts a local server and opens the report in your browser.

4. Can Playwright generate multiple report formats?

Yes. Playwright supports multiple reporters simultaneously, including:

  • HTML
  • List
  • Dot
  • JSON
  • JUnit

Example:

reporter: [

[‘html’],

[‘json’],

[‘junit’]

]

5. Why should screenshots and videos be enabled?

Screenshots and videos provide visual evidence of failures, making debugging faster and more effective.

6. What is the purpose of Trace Viewer?

Trace Viewer records every action performed during a test, including clicks, network requests, DOM snapshots, and console logs. It allows developers to replay failed tests step by step.

7. Why should HTML reports be archived in CI/CD pipelines?

Archiving reports allows teams to:

  • Review failures later
  • Share results with stakeholders
  • Maintain regression history
  • Compare executions across releases

FAQs – How to Generate Playwright HTML Report

Q1. What is how to generate Playwright HTML report?

It is the process of configuring Playwright’s HTML Reporter to create an interactive report containing test execution results, screenshots, videos, and trace files.

Q2. How do I get started with how to generate Playwright HTML report?

Install Playwright, configure the HTML reporter in playwright.config.ts, execute your tests, and open the report using:

npx playwright show-report

Q3. Is how to generate Playwright HTML report suitable for beginners?

Yes. Playwright includes the HTML Reporter by default, making it simple for beginners to generate and review professional test reports.

Q4. What are the benefits of Playwright HTML reports?

Benefits include:

  • Interactive dashboards
  • Faster debugging
  • Screenshots and videos
  • Trace Viewer integration
  • Better collaboration
  • Improved CI/CD reporting

Q5. Can Playwright HTML reports be integrated with CI/CD pipelines?

Yes. HTML reports can be generated automatically and published as build artifacts in GitHub Actions, Azure DevOps, Jenkins, and GitLab CI.

Leave a Comment

Your email address will not be published. Required fields are marked *