DEV Community

Cover image for Integrating Playwright with CI/CD Pipelines using GitLab: A Step-by-Step Guide
Aswani Kumar
Aswani Kumar

Posted on

Integrating Playwright with CI/CD Pipelines using GitLab: A Step-by-Step Guide

Table of Contents

Introduction

Modern software development emphasizes rapid iterations, quality assurance, and seamless delivery. Integrating end-to-end (E2E) testing tools like Playwright with CI/CD pipelines ensures that applications are tested consistently, reliably, and automatically before deployment. In this guide, we’ll demonstrate how to integrate Playwright with GitLab CI/CD pipelines step-by-step.

Prerequisites

Before starting, ensure you have the following:

  1. A project repository hosted on GitLab.
  2. Node.js and npm installed locally.
  3. Playwright installed in your project:
npm install playwright
Enter fullscreen mode Exit fullscreen mode
  1. Basic knowledge of GitLab CI/CD and its YAML configuration syntax.

Step 1: Prepare Your Playwright Tests

Create and organize your Playwright test cases. Typically, Playwright tests are stored in a folder like tests or e2e. Ensure your tests run locally by using the Playwright test runner:

npx playwright test
Enter fullscreen mode Exit fullscreen mode

Once your tests pass locally, proceed to integrate them into your CI/CD pipeline.

Step 2: Define the GitLab CI/CD Configuration

GitLab CI/CD pipelines are configured using a .gitlab-ci.yml file located at the root of your repository. Update your configuration to use sharding, parallel execution, and merged HTML reports as follows:

stages:
  - test
  - merge_reports

variables:
  CI: "true"
  PLAYWRIGHT_IMAGE: "mcr.microsoft.com/playwright:v1.49.0-noble"

playwright_test:
  stage: test
  image: ${PLAYWRIGHT_IMAGE}
  script:
    - npm install
    - npx playwright install --with-deps
    - npx playwright test --reporter blob --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL
  rules:
    - if: '$CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "main"'
  parallel: 16
  artifacts:
    when: always
    paths:
      - blob-report/*
    expire_in: 1 day

merge_reports:
  stage: merge_reports
  when: always
  image: ${PLAYWRIGHT_IMAGE}
  before_script:
    - npm ci
  script:
    - echo "Merging test reports"
    - npx playwright merge-reports --reporter html ./blob-report
  rules:
    - if: '$CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "main"'
  artifacts:
    when: always
    paths:
      - playwright-report/**
    expire_in: 1 week
Enter fullscreen mode Exit fullscreen mode

Explanation:

  1. Stages: Includes test and merge_reports stages to separate test execution and report merging.
  2. Variables: Configures the Playwright Docker image version.
  3. Playwright Test Job:
    • Executes tests in parallel across 16 shards (parallel: 16).
    • Generates a blob-format report for each shard.
  4. Merge Reports Job:
    • Merges blob reports into a single HTML report for easy viewing.
    • Uses the merge-reports feature of Playwright.
  5. Artifacts: Ensures both blob reports and merged HTML reports are available for inspection.

Step 3: Configure the Playwright Report

Playwright generates detailed HTML reports by default. To ensure the report is generated and configured correctly:

  1. Update the playwright.config.ts file to include the following:
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['blob'],
    ['html', { outputFolder: 'playwright-report', open: 'never' }]
  ],
});
Enter fullscreen mode Exit fullscreen mode
  1. This configuration ensures blob-format reports are generated for merging and a final HTML report is created.

Step 4: Execute the Pipeline

Commit your .gitlab-ci.yml file and push your changes to the repository. GitLab will automatically trigger the pipeline.

Monitor the pipeline’s progress in the CI/CD > Pipelines section of your GitLab project. If the tests pass, the pipeline will complete successfully, and a merged HTML report will be available.

Step 5: Automating Deployment Based on Test Results

For a complete CI/CD workflow, you can link the testing stage to deployment:

deploy:
  stage: deploy
  script:
    - echo "Deploying application..."
  only:
    - main
  when: on_success
Enter fullscreen mode Exit fullscreen mode

This ensures the deployment only happens if the tests pass.

Bonus: Upload Reports to AWS S3

For persistent report hosting, configure a job to upload reports to AWS S3:

upload_reports:
  stage: merge_reports
  script:
    - aws s3 cp playwright-report/ s3://your-bucket-name/playwright-report/ --recursive
  dependencies:
    - merge_reports
Enter fullscreen mode Exit fullscreen mode

This enables team members to view reports from an accessible URL.

Conclusion

Integrating Playwright with GitLab CI/CD pipelines enables automated E2E testing, ensuring higher code quality and fewer production issues. By leveraging GitLab’s powerful CI/CD capabilities, Playwright’s sharding, and its reporting features, you can build robust pipelines that validate application behavior at every stage of development.

Start building your pipeline today, and enjoy the benefits of a seamless testing and deployment workflow!

Top comments (0)