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

#webdev #playwright #cicd #gitlab

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)