Playwright HTML Report

#playwright #html #opensource #testing

A few days ago I wanted to generate a modern and complete html report for my Playwright project. I tried to find something good for me already ready to use, but I couldn't. So I created playwright-report.

To install playwright-html, use the command below:

npm i -D playwright-html

After the installation, you need to configure your project to use playwright-html as your report. Edit the file playwright.config.ts with the information below:

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

const config: PlaywrightTestConfig = {
  reporter: [
    ['playwright-html', { 
      testFolder: 'tests',
      title: 'Playwright HTML Report',
      project: 'QA Tests',
      release: '9.87.6',
      testEnvironment: 'DEV',
      embedAssets: true,
      embedAttachments: true,
      outputFolder: 'playwright-html-report',
      minifyAssets: true,
      startServer: true,
    }]
  ],
}

There is no mandatory option for playwright-report, so if you want, just remove all options. If you want to use, follow the description of each option:

Name	Default Value	Mandatory	Description
testFolder	tests	no	Folder of the test files
title	Playwright HTML Report	no	Title of the report that will be shown at the top of the page
project		no	Project name
release		no	Release version
testEnvironment		no	Test environment of the execution
embedAssets	true	no	Embed or not the assets to the HTML report file
embedAttachments	true	no	Embed or not the attachments to the HTML report file
outputFolder	playwright-html-report	no	Output folder where the HTML will be saved
minifyAssets	true	no	Minify or not the assets
startServer	true	no	Start or not the server to serve the HTML report

playwright-html on Gitlab.

If you encounter any errors, go to playwright-html repository and open an issue.

If you have any suggestions, feel free to comment.

I hope you Enjoy this tool!

Top comments (6)

Andre Steenkamp • Jul 19

Very nice looking report!

One suggestion though is that you have a section called 'Status by browser' but I am testing a specific browser but have multiple projects so it is picking up my project names as browsers.

Andre Steenkamp • Jul 19

Nevermind I see this was corrected in 'odhin-reports-playwright'

Alex De Lara • Mar 18

This is quite cool looking report - way better than the default Playwright; but at the same time is gets quite large. I understand it can be tough problem to solve if one wants to make the loading fast. Maybe break the index.hmtl in parts, one for each test ? This way the loading would not have to have everything at once.
But I still like it, thanks for making it available.