YouTipPlaywright Ci Cd
This chapter introduces how to integrate Playwright tests into CI/CD pipelines, including GitHub Actions and other common CI platforms.
* * *
## GitHub Actions Integration
When you choose to add GitHub Actions during `npm init playwright@latest`, Playwright will automatically generate workflow configurations.
### Auto-generated Workflow
## Example
# File path: .github/workflows/playwright.yml
name: Playwright Tests
on:
push:
branches: [main, master]
pull_request:
branches: [main, master]
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4 # 1. Checkout code
- uses: actions/setup-node@v4 # 2. Install Node.js
with:
node-version: 20
- name: Install dependencies
run: npm ci # 3. Install dependencies
- name: Install Playwright Browsers
run: npx playwright install --with-deps # 4. Install browsers and system dependencies
- name: Run Playwright tests
run: npx playwright test # 5. Run tests
- uses: actions/upload-artifact@v4
if: always()# 6. Upload test report (upload even if tests fail)
with:
name: playwright-report
path: playwright-report/
retention-days: 30
* * *
## Viewing CI Test Results
### Viewing Test Logs
In the Actions page of your GitHub repository, click on each run to view detailed test logs.
Each worker's output is displayed independently, making it easy to locate specific failed tests.
### Viewing HTML Reports
If `reporter: 'html'` is configured, you can download `playwright-report/` from Artifacts to view the complete HTML report locally.
### Publishing Reports to Web
## Example
# File path: .github/workflows/playwright.yml
# Deploy HTML report to GitHub Pages (simplified example)
- name: Upload report
uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
* * *
## Other CI Platforms
### Jenkins
pipeline { agent any stages { stage('Install') { steps { sh 'npm ci' sh 'npx playwright install --with-deps' } } stage('Test') { steps { sh 'npx playwright test' } } } post { always { archiveArtifacts artifacts: 'playwright-report/**' junit 'test-results/junit.xml' } }}
### GitLab CI
## Example
# File path: .gitlab-ci.yml
playwright-tests:
image: mcr.microsoft.com/playwright:v1.52.0-jammy
script:
- npm ci
- npx playwright test
artifacts:
when: always
paths:
- playwright-report/
expire_in: 30 days
* * *
## Running Playwright with Docker
Microsoft provides official Docker images with all system dependencies pre-installed, ready to use out of the box.
### Using Official Images
# Pull image docker pull mcr.microsoft.com/playwright:v1.52.0-jammy # Run tests in container docker run --rm -v $(pwd):/work -w /work \ mcr.microsoft.com/playwright:v1.52.0-jammy \ npx playwright test
### Dockerfile Example
## Example
# File path: Dockerfile
FROM mcr.microsoft.com/playwright:v1.52.0-jammy
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
CMD ["npx", "playwright", "test"]
* * *
## CI Environment Best Practices
| Practice | Description |
| --- | --- |
| Use `--with-deps` | `npx playwright install --with-deps` automatically installs Linux system dependencies |
| Lock Playwright version | Lock `@playwright/test` version in `package.json` to avoid unexpected upgrades in CI |
| Cache browsers | Cache the `ms-playwright` directory to avoid downloading browsers every time |
| Control workers count | Use `workers: process.env.CI ? 1 : undefined` to control resource usage in CI |
| Set timeouts | CI environments are slower than local, appropriately increase `timeout` and `retries` |
| Preserve test artifacts | Upload Trace, screenshots, videos, and reports as CI Artifacts |