CI/CD Pipeline Setup with GitHub Actions and Playwright

Here’s a step-by-step guide to setting up a CI/CD pipeline using GitHub Actions with Playwright for UI testing:

🚀 Goal

Automate the following using GitHub Actions:

Install dependencies

Run Playwright tests

Report results

Optionally: Upload screenshots/videos or trigger deployments

📁 Project Structure (Example)

lua

Copy

Edit

my-project/

├── tests/

│   └── example.spec.ts

├── playwright.config.ts

├── package.json

├── .github/

│   └── workflows/

│       └── playwright.yml

✅ Step 1: Install Playwright

If not installed yet:

bash

Copy

Edit

npm init -y

npm install -D @playwright/test

npx playwright install

🧾 Step 2: Create GitHub Actions Workflow

📄 .github/workflows/playwright.yml

yaml

Copy

Edit

name: Playwright Tests

on:

  push:

    branches: [main]

  pull_request:

    branches: [main]

jobs:

  test:

    runs-on: ubuntu-latest

    steps:

    - name: Checkout code

      uses: actions/checkout@v3

    - name: Setup Node.js

      uses: actions/setup-node@v3

      with:

        node-version: '18'

    - name: Install dependencies

      run: npm ci

    - name: Install Playwright Browsers

      run: npx playwright install --with-deps

    - name: Run Playwright tests

      run: npx playwright test

    - name: Upload test results (if failed)

      if: failure()

      uses: actions/upload-artifact@v3

      with:

        name: playwright-report

        path: playwright-report

🛠 Optional Enhancements

✅ View Report in GitHub

Add this line in package.json to serve the report locally:

json

Copy

Edit

"scripts": {

  "test": "npx playwright test",

  "show-report": "npx playwright show-report"

}

📦 Upload Screenshots/Videos on Failure

Ensure Playwright is configured to save artifacts:

ts

Copy

Edit

// playwright.config.ts

import { defineConfig } from '@playwright/test';

export default defineConfig({

  use: {

    screenshot: 'only-on-failure',

    video: 'retain-on-failure',

  },

});

Then modify the GitHub Action to upload them:

yaml

Copy

Edit

    - name: Upload screenshots and videos

      if: failure()

      uses: actions/upload-artifact@v3

      with:

        name: test-artifacts

        path: test-results/

🚀 Optional: Add Deployment Step (e.g., Vercel, S3, EC2)

Add a final job step like:

yaml

Copy

Edit

    - name: Deploy to Vercel

      run: vercel --prod --token=$VERCEL_TOKEN

      env:

        VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

✅ Final Tips

Use secrets for storing API keys and tokens securely.

Run the pipeline on pull requests and push to main to catch bugs early.

Use matrix strategy to test across multiple browsers (Chromium, Firefox, WebKit).

Let me know if you want a sample repo or help setting up deployment in your pipeline!

Learn Playwright Training Course in Hyderabad

Read More

Integrating Playwright with Jenkins

Using Environment Variables in Playwright Tests

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions