How To Generate a Playwright Report

12 months ago 46

An important aspect of any test automation framework is its ability to generate user-friendly, informative detailed reports. Reports offer insightful information about the execution of each test case. The development team can quickly identify and address problems by using...

An important aspect of any test automation framework is its ability to generate user-friendly, informative detailed reports. Reports offer insightful information about the execution of each test case. The development team can quickly identify and address problems by using these reports to highlight test failures. In this tutorial, we will generate a Playwright report using two different reporters.

1. Playwright HTML report using built-in reporter.

2. Allure HTML Report

1) How to generate a Playwright HTML report

We don�t need to install any plugin to generate the HTML report in the Playwright tool as Playwright comes equipped with built-in support for generating HTML reports.

a) Playwright Report Configuration

Go to your project folder and open the configuration file. Inside the configuration file under defineConfig add the reporter property. Add HTML as its value.

export default defineConfig({
   outputDir: 'test-results',
   use: {
   screenshot :'on',
   video : "on",
   trace: 'on-first-retry',
   headless : false,

  },

  reporter: ['html']
  
 
});

To attach the screenshots and videos to the HTML report add these properties with the value �on�.We can also manage if after the execution we want the HTML report to open always by default, never open by default or open only on failure.

reporter: [['html',{open:"always"}]],

Let�s try to understand the code now.

export default defineConfig({}): This line exports a default configuration object using the defineConfig function. This function is used to define the configuration for your Playwright tests.

outputDir: �test-results�: This configuration specifies the output directory for various artifacts generated during test execution, such as screenshots, videos, and other logs.

screenshot: �on�: Enables taking screenshots during test execution.

video: �on�: Enables video recording during test execution.

trace: Enables tracing of browser events and interactions.

Now save all the configuration changes and execute test scripts. After successful execution, an HTML report will be generated with screenshots and videos attached. See this HTML report using the below command.

npx playwright show-report

A test results folder is created that contains all the artifacts related to test scripts.

2) How to create an Allure Report in Playwright

Allure reporter is another popular reporter that integrates easily with the Playwright test automation framework. Allure Reporter offers visually appealing and informative HTML reports with rich visualizations including graphs and charts. Allure also has powerful community support.

a) Allure installation in Playwright Framework

Go to the project directory, open the terminal and execute the below command from allure-playwright

npm i allure-playwright

2. Next add the Allure command line.

npm install -g allure-commandline

If you face any permission issue then execute the above command with sudo.

sudo npm install -g allure-commandline

Once installation is successful these dependencies are added to the package.json file.

b) Allure report configuration

Open the Playwright configuration file. Modify the �reporter� property and provide value for the allure reporter.

reporter: [["line"], ["allure-playwright"]],

Additionally, we can specify the folder where allure results will be generated. Refer to the code snippet.

 reporter: [["line"],
     [
       "allure-playwright",
       {
         detail: true,
         outputFolder: "my-allure-results",
         suiteTitle: false,
       },
     ],
   ],

Once the configuration is done, save the file and execute the test cases.

Complete Playwright config file code:

import { defineConfig, devices } from '@playwright/test';


export default defineConfig({

  testDir: './tests',
  outputDir: 'test-results',
  timeout: 20 * 1000,
  retries : 0,
  workers:3,
  expect : {
    timeout: 20 * 1000,
  },
  use: {
   screenshot :'on',
   video : "on",
   trace: 'on-first-retry',
   headless : false,

  },
    
  reporter: [["line"],
     [
       "allure-playwright",
       {
         detail: true,
         outputFolder: "my-allure-results",
         suiteTitle: false,
       },
     ],
   ],
  
  
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'],
      headless: false,
      
     },
      
    },
  
  ]
  

 
});

After the successful execution, the �my-allure-results� folder is created under the project folder. This folder contains data in the form of json files and also contains the screenshots and videos captured. To generate an HTML report from this data we need to execute the below allure command.

allure generate ./my-allure-results �-clean

This command will read the allure test results from the my-allure-results directory and generate a report based on the provided input.

c) Open Allure Report

After the successful execution of the command allure report is generated inside the allure-report folder.To open the allure report execute the below command on the terminal.

allure open ./allure-report. //allure-report is folder name

Conclusion

HTML reports are a powerful tool for enhancing the testing process. Whether using the built-in HTML reporting capabilities or integrating with Allure Reporting, Testers can use these reports to gather information, facilitate collaboration, and ensure the overall success of their testing projects.

Note: To read previous Playwright articles visit here.

The post How To Generate a Playwright Report first appeared on AutomationQaHub.

View Entire Post

Read Entire Article