DEV Community

Cover image for Playwright HTML Report
Rodrigo Odhin
Rodrigo Odhin

Posted on

Playwright HTML Report

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
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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 (0)