Table of Contents
- Introduction
- Prerequisites
- Step 1: Prepare Your Playwright Tests
- Step 2: Define the GitLab CI/CD Configuration
- Explanation
- Step 3: Configure the Playwright Report
- Step 4: Execute the Pipeline
- Step 5: Automating Deployment Based on Test Results
- Bonus: Upload Reports to AWS S3
- Conclusion
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:
- A project repository hosted on GitLab.
- Node.js and npm installed locally.
- Playwright installed in your project:
npm install playwright
- 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
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
Explanation:
- Stages: Includes test and merge_reports stages to separate test execution and report merging.
- Variables: Configures the Playwright Docker image version.
-
Playwright Test Job:
- Executes tests in parallel across 16 shards (parallel: 16).
- Generates a blob-format report for each shard.
-
Merge Reports Job:
- Merges blob reports into a single HTML report for easy viewing.
- Uses the merge-reports feature of Playwright.
- 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:
- 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' }]
],
});
- 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
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
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)