CI/CD Integration with Playwright -Azure DevOps

CI/CD Integration with Playwright (Azure DevOps & GitHub Actions) is one of the most important topics for automation engineers. It enables Playwright tests to run automatically whenever code is pushed, a pull request is created, or on a schedule.

What is CI/CD?

CI (Continuous Integration)

Developers frequently commit code to a shared repository. Every commit automatically triggers:

Build the application
Install dependencies
Run Playwright tests
Generate reports
Notify the team

CD (Continuous Delivery/Deployment)

If all tests pass, the application can be deployed automatically to QA, UAT, or Production.

Developer
    │
    ▼
GitHub / Azure DevOps
    │
    ▼
Build Project
    │
    ▼
Install Dependencies
    │
    ▼
Run Playwright Tests
    │
    ▼
Generate HTML Report
    │
    ▼
Publish Report
    │
    ▼
Deploy Application

Why Integrate Playwright into CI/CD?

Instead of running:

npx playwright test

manually every day, CI/CD executes tests automatically whenever code changes.

Benefits:

No manual execution
Faster feedback
Detect bugs earlier
Run tests in parallel
Execute across multiple browsers
Store reports automatically
Reduce human errors

Folder Structure

PlaywrightProject
│
├── tests
├── playwright.config.ts
├── package.json
├── azure-pipelines.yml
└── .github
      └── workflows
            └── playwright.yml

GitHub Actions Integration

Create:

.github/workflows/playwright.yml

Example:

name: Playwright Tests

on:
  push:
    branches:
      - main

  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: 22
    - run: npm ci
    - run: npx playwright install --with-deps
    - run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: always()
      with:
        name: playwright-report
        path: playwright-report/

Workflow Explained

Checkout Code
↓
Install Node
↓
Install Packages
↓
Install Browsers
↓
Run Tests
↓
Upload HTML Report

Trigger Workflow

Automatically runs on:

Push
Pull Request
Merge
Manual Run
Scheduled Run

Example schedule:

on:
  schedule:
    - cron: '0 2 * * *'

Runs every day at 2 AM UTC.

Azure DevOps Pipeline

Create:

azure-pipelines.yml

Example:

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:

- task: NodeTool@0
  inputs:
    versionSpec: '22.x'

- script: npm ci
  displayName: Install Packages

- script: npx playwright install --with-deps
  displayName: Install Browsers

- script: npx playwright test
  displayName: Run Playwright Tests

- task: PublishPipelineArtifact@1
  condition: always()

  inputs:
    targetPath: playwright-report
    artifact: playwright-report

Running Different Browsers

projects: [
{
    name:'Chromium',
    use:{ browserName:'chromium'}
},
{
    name:'Firefox',
    use:{ browserName:'firefox'}
},
{
    name:'WebKit',
    use:{ browserName:'webkit'}
}
]

CI automatically executes:

Chromium
Firefox
WebKit

Parallel Execution

workers: 4

npx playwright test --workers=4

CI finishes much faster.

Environment Variables

Instead of hardcoding credentials:

await page.fill("#username","admin");

Use:

await page.fill(
    "#username",
    process.env.USERNAME!
);

GitHub Secrets:

USERNAME
PASSWORD

Access:

process.env.USERNAME

Multiple Environments

QA
UAT
PreProd
Production

Run:

ENV=QA npx playwright test

ENV=UAT npx playwright test

Example:

const baseURL =
process.env.ENV === "QA"
? "https://qa.site.com"
: "https://uat.site.com";

Retry Failed Tests

retries: 2

CI retries only failed tests.

Generate HTML Report

reporter: [
    ['html'],
    ['list']
]

After execution:

playwright-report/

is generated.

Open:

index.html

Generate JUnit Report

reporter: [

['html'],

['junit',
{
outputFile:'results.xml'
}]

]

Azure DevOps and GitHub can publish JUnit results for easy viewing.

Capture Screenshots

use:{
screenshot:'only-on-failure'
}

Capture Videos

use:{
video:'retain-on-failure'
}

Capture Trace

use:{
trace:'retain-on-failure'
}

Useful for debugging CI failures.

Notifications

After execution, CI can notify teams via:

Microsoft Teams
Slack
Email
Azure DevOps notifications
GitHub notifications

Typical CI/CD Flow

Developer Pushes Code
        │
        ▼
GitHub / Azure DevOps
        │
        ▼
Checkout Repository
        │
        ▼
Install Node.js
        │
        ▼
Install npm Packages
        │
        ▼
Install Playwright Browsers
        │
        ▼
Run Playwright Tests
        │
        ▼
Generate HTML/JUnit Reports
        │
        ▼
Upload Reports as Artifacts
        │
        ▼
Notify Team
        │
        ▼
Deploy if Tests Pass

Techtutotialz Training, Job support, Interview support

Tags: CI/CD Integration with Playwright (Azure DevOps & GitHub Actions), Playwright Training, Playwright Tutorial

What is CI/CD?

Why Integrate Playwright into CI/CD?

Folder Structure

GitHub Actions Integration

Workflow Explained

Trigger Workflow

Azure DevOps Pipeline

Running Different Browsers

Parallel Execution

Environment Variables

Multiple Environments

Retry Failed Tests

Generate HTML Report

Generate JUnit Report

Capture Screenshots

Capture Videos

Capture Trace

Notifications

Typical CI/CD Flow

Leave a comment

Cancel reply

Related Posts