CI/CD +playwright

 

Playwright CI/CD Using Azure DevOps (ADO) – Step by Step

---

Step 1: Prerequisites

Make sure you have:

• Azure DevOps project

• Git repo with Playwright framework

• Node.js (LTS) configured locally

• Playwright project already working locally

---

Step 2: Repo Structure (Minimum Required)

playwright-automation/
├── tests/
├── pages/
├── playwright.config.ts
├── package.json
└── azure-pipelines.yml

---

Step 3: Create Azure Pipeline YAML

📁 azure-pipelines.yml

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:

# Step 1: Checkout code
- checkout: self

# Step 2: Install Node.js
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'

# Step 3: Install dependencies
- script: |
    npm ci
  displayName: 'Install dependencies'

# Step 4: Install Playwright browsers
- script: |
    npx playwright install --with-deps
  displayName: 'Install Playwright Browsers'

# Step 5: Run Playwright tests
- script: |
    npx playwright test
  displayName: 'Run Playwright Tests'
  env:
    BASE_URL: 'https://qa.example.com'

# Step 6: Publish HTML Report
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: 'playwright-report'
    artifact: 'PlaywrightReport'
    publishLocation: 'pipeline'
  displayName: 'Publish Playwright Report'

---

Step 4: Commit & Push

git add .
git commit -m "Add ADO CI pipeline for Playwright"
git push origin main

---

Step 5: Create Pipeline in Azure DevOps

1. Go to Azure DevOps → Pipelines

2. Click New Pipeline

3. Select Azure Repos Git

4. Choose your repository

5. Select Existing Azure Pipelines YAML

6. Choose azure-pipelines.yml

7. Click Run

---

Step 6: Verify Pipeline Execution

Pipeline stages:

1. Checkout repo

2. Install Node.js

3. Install dependencies

4. Install browsers

5. Execute tests

6. Publish report

---

Step 7: View Test Report

1. Open completed pipeline run

2. Go to Artifacts

3. Download PlaywrightReport

4. Open index.html

---

Step 8: Enable Parallel Execution (Optional)

- script: |
    npx playwright test --workers=4

---

Step 9: Add Environment Variables

Use ADO → Library → Variable Groups

env:
  BASE_URL: $(BASE_URL)
  USERNAME: $(USERNAME)
  PASSWORD: $(PASSWORD)

✔ Secure credentials
✔ Environment-based execution

---

Step 10: Schedule Nightly Runs

1. Go to Pipeline → Triggers

2. Enable Scheduled runs

3. Example: nightly at 2 AM

---

Step 11: Best Practices (Real Projects)

✔ Use npm ci not npm install
✔ Store secrets in variable groups
✔ Retry flaky tests
✔ Publish reports always
✔ Run smoke tests on PRs

---