Generate Stunning HTML and Allure Reports with Playwright in TypeScript

Are you looking for a way to visualize your Playwright test results with stunning HTML and Allure reports? Look no further! In this blog post, we'll walk you through the step-by-step process of setting up and generating both HTML and Allure reports for your Playwright automation project using TypeScript. Let's get started!

Step 1: Install Necessary Packages

First, we need to install the required packages. Open your terminal and navigate to your project directory. Run the following commands to install the Allure Playwright and HTML Reporters:

npm install --save-dev @playwright/test allure-playwright playwright-html-reporter

Additionally, install the Allure command line tool globally on your system:

npm install -g allure-commandline

Step 2: Configure Playwright

Next, we need to configure Playwright to use both Allure and HTML reporters. Update your playwright.config.ts file with the following content:

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

export default defineConfig({
  reporter: [
    ['allure-playwright'],
    ['html', { outputFolder: 'html-report', open: 'never' }]
  ],
});

Step 3: Run Your Tests

Now, it's time to execute your Playwright tests. Run the following command in your terminal:

npx playwright test

This will run your tests and generate the results in both HTML and Allure formats.

Step 4: Generate and View Allure Report

To view the Allure report, first, generate it by running:

allure generate .\allure-results\ --clean

Next, serve the Allure report to view it in your browser:

allure serve .\allure-results

This command will start a local server and open the Allure report in your default web browser.

Step 5: View HTML Report

To view the HTML report, navigate to the html-report folder and open the index.html file in your browser. You can do this with the following commands:

cd html-report
start index.html

Conclusion

That's it! You've successfully set up and generated both HTML and Allure reports for your Playwright tests using TypeScript. With these beautiful and informative reports, you can easily visualize and analyze your test results. Happy testing!