- Jul 14, 2026
- admin
- 0
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 ApplicationWhy Integrate Playwright into CI/CD?
Instead of running:
npx playwright testmanually 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.ymlGitHub Actions Integration
Create:
.github/workflows/playwright.ymlExample:
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 ReportTrigger Workflow
Automatically runs on:
Push
Pull Request
Merge
Manual Run
Scheduled RunExample schedule:
on:
schedule:
- cron: '0 2 * * *'Runs every day at 2 AM UTC.
Azure DevOps Pipeline
Create:
azure-pipelines.ymlExample:
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-reportRunning Different Browsers
projects: [
{
name:'Chromium',
use:{ browserName:'chromium'}
},
{
name:'Firefox',
use:{ browserName:'firefox'}
},
{
name:'WebKit',
use:{ browserName:'webkit'}
}
]CI automatically executes:
Chromium
Firefox
WebKitParallel Execution
workers: 4or
npx playwright test --workers=4CI 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
PASSWORDAccess:
process.env.USERNAMEMultiple Environments
QA
UAT
PreProd
ProductionRun:
ENV=QA npx playwright testor
ENV=UAT npx playwright testExample:
const baseURL =
process.env.ENV === "QA"
? "https://qa.site.com"
: "https://uat.site.com";Retry Failed Tests
retries: 2CI retries only failed tests.
Generate HTML Report
reporter: [
['html'],
['list']
]After execution:
playwright-report/is generated.
Open:
index.htmlGenerate 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
- 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
