How to Generate HTML Report in Playwright End to End Automation Tool

AUTHOR NOTE: THIS ARTICLE WAS WRITTEN EARLIER WHERE THERE WAS NO HTML REPORT SUPPORTED BY PLAYRIGHT. PLAYWRIGHT’S LATEST VERSION HAS GOT ITS OWN HTML REPORTER YOU NO NEED TO FOLLOW WORKAROUND. CHECK THE OFFICIAL WEBSITE FOR MORE DETAILS.

Playwright supports various reporters, by default playwright supports Dot Reporter, Line Reporter, JUnit XML Reporter, JSON Reporter, List Reporter.

With the Recent changes playwright supports allure reports as well.

This tutorial explains 2 different ways to Generate HTML Reports

1. Allure Report
2. HTML Report

Method 1: Allure Reports with Playwright

Step by Step Guide to Integrate and Generate Allure Report with Playwright

Pre-Requisite:

1. We are assuming, you already have some tests in your framework

Step 1: Install allure command line

To open the allure report, you need to have allure dependency need to be installed on your machine.

npm i -D allure-commandline

Step 2: Install allure for playwright

npm i -D experimental-allure-playwright

Step 3: Configure Playwright global Config file

We are specifying reporter in the playwright configuration file. If you don’t want to specify reporter type in the configuration file you can mention it in the command line as well. we will show both the option here.

Configuration for Allure Reports, Copy and Paste the below code into your playwright.config.ts file. This file should be located in your Project Root Folder

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    screenshot: 'only-on-failure'
  },
  reporter: 'experimental-allure-playwright',
};
export default config;

Note:
If you want to invoke reporter in the command line just skip this step

Step 4: Run Playwright Tests

Option 1: Execute Playwright Tests with a global configuration file

If you have set up the global configuration file As mentioned in the above step Just execute your tests with the below command

npx playwright test

Option 2: Execute Playwright Tests with reporter option

Note: Follow this option only if you have skipped Step 3 i.e If you have not configured the playwright global config file

Execute Test with playwright reporter option using below command

npx playwright test --reporter=line,experimental-allure-playwright

Once you execute the tests you should see a folder with the name allure-results

Step 5: Generate allure report for Playwright

Using the command line you can generate the allure report.

Generate allure report in Playwright using below command

npx allure generate ./allure-results --clean

Once you execute the above command one more folder will be generated with name allure-report

Step 6: Open Playwright Allure Test Report using command prompt

Allure has generated a detailed report for you, if you want to see the beautiful report you need to open the allure report with the below command

npx allure open ./allure-report

The Allure report opens in the browser it looks like below

Allure Report Integration is Complete with the above step.

Method 2: HTML Reports with Playwright

Step by Step Guide to Generate HTML Results in Playwright

The problem with the allure report is you will not be able to share the HTML file with stakeholders directly, to do that you need to create a docker container and some configuration you need to do.

There is an easy way to generate a Simple HTML file with Playwright

In Simple we are creating a JUnit XML file and then we are converting that to an HTML file after tests execution is complete.

Step 1: Install XUnit Viewer Package

This package will be help full to create the HTML file from JUnit XML File

Use the below command to Install XUnit Viewer package

npm install --save-dev xunit-viewer

Step 2: Create Global Teardown file for Playwright

In your Project Root Folder Create a new file with the name global-teardown.ts

Copy and Paste the below code into global-teardown.ts

//global-teardown.ts
const exec = require('child_process').execSync;
async function globalSetup() {
    await exec('npx xunit-viewer -r  results.xml -o results.html ')
  };
export default globalSetup;

Step 3: Configure your Playwright global config file

Open the playwright.config.ts config file which should be located in your project root folder. if it's not created already create one.

Copy and Paste the below code into playwright.config.ts

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  globalTeardown:require.resolve('./global-teardown'),
  use: {
    screenshot: 'only-on-failure'
  },
    reporter: [ ['junit', { outputFile: 'results.xml' }] ],
};
export default config;

Step 4: Execute Playwright Tests to Generate HTML File

We have done all the required configuration to generate HTML report in Playwright now Execute your tests with the below command

npx playwright test

Step 5: View Playwright Generated HTML Report

Once the execution of the Playwright test is complete you can see the results.html file in your Project Folder

Open results.html on your browser.

The results.html file generated by the playwright is a simple HTML file that has inline CSS, So you can share this single HTML file with stakeholders.

Note:
1. The HTML File doesn’t have screenshots integrated.
2. Pass/Fail are marked in color red and green
3. Failed Tests shows the stack trace upon clicking on failed tests

Reference: https://playwright.dev/

☕ Buy me a Coffee

If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi