Automation QA Testing Course Content

End-to-End Test Automation Pipeline with Playwright, GitHub Actions, and Allure Reports

 In today’s fast-paced software development environment, automated testing is essential for delivering high-quality web applications. Modern CI/CD pipelines require reliable, scalable, and transparent test automation to ensure confidence in every release.

In this article, we explore how Playwright, GitHub Actions, and Allure Reports work together to create a powerful end-to-end testing automation framework. You will learn how to set up Playwright tests, integrate them into a GitHub Actions CI pipeline, and generate professional Allure reports that provide clear insights into test execution.

This blog explains how these tools work together and provides a complete, step-by-step guide to setting up Playwright tests, integrating them with GitHub Actions Pipeline , and generating professional Allure reports.

Why Playwright?

Playwright is a modern end-to-end testing framework built by Microsoft. It is designed specifically for testing web applications across different browsers with speed and reliability.

Key Features of Playwright

  • Cross-browser testing: Supports Chromium, Firefox, and WebKit.
  • Auto-waiting: Automatically waits for elements to be ready, reducing flaky tests.
  • Headless and headed execution: Ideal for CI environments.
  • Rich debugging tools: Screenshots, videos, and traces on failures.
  • Multi-language support: JavaScript, TypeScript, Python, Java, and .NET.

Playwright is especially well-suited for CI pipelines because it runs fast and is highly deterministic.

Why GitHub Actions?

GitHub Actions is GitHub’s built-in CI/CD platform that allows you to automate workflows directly from your repository.

Benefits of GitHub Actions

  • Native GitHub integration
  • Simple YAML-based configuration
  • Free runners for public repositories
  • Automatic triggers on push and pull requests
  • Easy artifact and report management

Using GitHub Actions ensures your Playwright tests run automatically whenever code changes are introduced.

Why Allure Reports?

Test execution is only half the story. Teams also need clear, actionable insights from test results. Allure Reports provides a visually rich and interactive reporting solution.

What Makes Allure Unique?

  • Clean test dashboards
  • Step-level execution details
  • Screenshots and logs attached to failures
  • Test history and trends
  • Easy sharing through static HTML reports

Allure turns raw test data into meaningful information for developers, QA engineers, and stakeholders.

Overall Architecture

Here’s how everything fits together:

  1. Playwright runs UI tests
  2. Allure captures test execution results
  3. GitHub Actions triggers tests on repository events
  4. Allure HTML reports are generated
  5. Reports are stored as artifacts or deployed to GitHub Pages (gh-page)

This creates a fully automated, end-to-end testing pipeline.

Step 1: Setting Up Playwright

Prerequisites

  • Node.js (version 16 or later)
  • npm or yarn
  • GitHub repository

Install Playwright

Run the following commands in your project directory:

npm init -y
npm install -D @playwright/test
npx playwright install

This installs Playwright along with required browser binaries.

Step 2: Installing and Configuring Allure for Playwright

Install the Allure Dependencies to generate the Allure report:

npm install -D allure-playwright allure-commandline

Update Playwright Configuration

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

export default defineConfig({
reporter: [
['list'],
['allure-playwright']
],
use: {
screenshot: 'only-on-failure',
video: 'retain-on-failure'
}
});

This configuration enables Allure reporting and captures screenshots and videos for failed tests.

Step 3: Running Tests with Allure Locally

Execute End-to-end test cases locally and generate allure-results directory.

npx playwright test

Allure result files will be generated in the allure-results directory.




Generate Allure Report

Below command help in generating the Allure Report

npx allure generate allure-results --clean -o allure-report

Open Report

Once Allure Report is generate next step it to open it. Below command will help in opening the report.

npx allure open allure-report

At this stage, you should see a fully interactive Allure report. Below are some of the screenshot of Allure report.










Step 4: Integrating with GitHub Actions

The following GitHub Actions workflow runs Playwright tests and generates an Allure report:

Create Workflow File (.yml)

Create the following file in your repository:

name: Playwright Tests with Allure Report

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

jobs:
test:
runs-on: ubuntu-latest

steps:
- name: Checkout repository
uses: actions/checkout@v4

- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 18

- name: Install dependencies
run: npm ci

- name: Install Playwright browsers
run: npx playwright install --with-deps

- name: Run Playwright tests
run: npx playwright test
continue-on-error: true

- name: Generate Allure report
run: |
npx allure generate allure-results --clean -o allure-report

- name: Upload Allure report as artifact
uses: actions/upload-artifact@v4
with:
name: allure-report
path: allure-report

Explanation

  • Tests run automatically on pushes and pull requests
  • Allure report is generated after execution
  • Report is uploaded as a downloadable artifact

Step 5: Publishing Allure Report Using GitHub Pages (gh-pages)

In the below steps you will see howto make reports accessible via a browser in GitHub action itself.

We have to do below configration in GitHub Action

  1. In GitHub Open setting -> Page
  2. From Source -> Deploy from a branch
  3. Select:
  • Source: Deploy from a branch
  • Branch: gh-pages
  • Folder: / (root)



  • Step 6: Code Push

    As the code push test cases start executing in GitHub. In below screenshot you can see test cases are executed successfully.




Step 6: Pages build and deployment

“Pages build and deployment” is an automatic GitHub Actions workflow that GitHub creates and runs when you enable GitHub Pages for a repository.




What is “Pages build and deployment”?

Pages build and deployment is a system-managed GitHub Actions workflow that:

  1. Takes files from a specified branch or workflow
  2. Builds them (if needed)
  3. Deploys them to GitHub Pages
  4. Publishes them as a public website

You do not write this workflow yourself. GitHub creates and manages it for you.

Once deployed, the report will be available at:

https://<username>.github.io/<repository-name>/

In the below screenshot you can see Allure report is avilable

Press 


When we open the link you can see all executed test cases status


Best Practices

  • Keep tests small and independent
  • Use descriptive test titles
  • Capture screenshots and videos on failure
  • Clean old Allure results before generating new reports
  • Run tests in headless mode for CI
  • Protect the gh-pages branch from manual edits

Conclusion

Combining Playwright, GitHub Actions, and Allure Reports creates a modern, scalable, and reliable test automation pipeline. This approach not only improves test visibility and execution reliability but also integrates seamlessly into CI/CD workflows. By adopting this setup, teams can reduce regressions, improve release confidence, and deliver high-quality web applications faster.




Press enter or click to view image in full size







No comments:

Post a Comment

Note: Only a member of this blog may post a comment.