Generate Allure HTML report with Playwright | How to Generate Allure HTML report in playwright with Java Script
Generate Allure HTML report with Playwright | How to Generate Allure HTML report in playwright with Java Script

Generate Allure HTML report with Playwright | How to Generate Allure HTML report in playwright with Java Script

This blog covers how we can generate an Allure HTML report using a playwright

Why is Allure Reporting to Playwright?

  • Easy to install
  • Allure reports provide great presentational diagrams
  • Clear and nice reporting UI
  • Can easily investigate test run

Playwright Installation

Create a new folder, which I called project playwright_With_JavaScripts

Step to Install Playwright

  1. To install playwright, in the project folder i.e playwright_With_JavaScripts:> run npm init playwright.
  2. In the terminal below option display either select TypeScript Or JavaScript (In our case I am selecting JavaScript)

Once Installation is done we can see in package.json playwright dependency is added

Some of the Commands in Playwright

  • npx playwright test
    Runs the end-to-end tests.
  • npx playwright test — project=chromium
    Runs the tests only on Desktop Chrome.
  • npx playwright test example
    Runs the tests in a specific file.
  • npx playwright test — debug
    Runs the tests in debug mode.
  • npx playwright codegen
    Auto generate tests with Codegen.

Test Case for Automation

Let’s take a simple example

  1. Open the site qaautomationlabs.com/
  2. Verify the title of the page
  3. After opening the site click on the Menu “Blogs”

Cose attached Below

// @ts-check

const { test, expect } = require(“@playwright/test”);

test(“Open the site and verify the title and Click on Menu Blogs”, async ({

page,

}) => {

await page.goto(“https://qaautomationlabs.com/”);

await expect(page).toHaveTitle(/About Us – QAAutomationLabs/);

const blogs = page.locator(“//span[text()=’Blogs’]”);

await blogs.last().click();

});

Allure Playwright Installation

Enter the below commands in your command line to install allure

npm i -D @playwright/test allure-playwright

or via yarn:

yarn add @playwright/test allure-playwright --dev

After installation we can see aullre-report in package.json

Run Test cases and Generate Allure Report

To generate an Allure report we have to follow the below steps

i) We have to pass reporter=”line” which will generate a report in plain text format in command npx playwright test


ii) Once we get data in plain text (How many test cases pass/how many fail ) using this data allure generate the report with the help of command allure-playwright

Steps 1

npx playwright test — reporter=line,allure-playwright

The above command generates Folder allure-results (See the below screenshot)

Steps 2

The below command is used to generate an allure report using the folder allure-results

allure generate ./allure-results — clean

Steps 3

The below command is used to open the allure report

allure open ./allure-report

Once we run the above command it will generate the Allure report

Execution Report

1. Test cases Pass report

2.Failed /Broken Test case report

☕️ Happy testing! ☕️

Leave a Reply

Your email address will not be published.