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-playwright2. Next add the Allure command line.
npm install -g allure-commandlineIf you face any permission issue then execute the above command with sudo.
sudo npm install -g allure-commandlineOnce 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 —-cleanThis 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 nameConclusion
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.