DEV Community

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

Posted on

5 1

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!

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay