Automating UI Testing with Playwright & GitHub Actions

🚀 How I Built a Remote Event-Driven Test Framework for My Portfolio Site

Why Automate UI Testing?

If you’re maintaining a personal project, you’ve probably faced this:

🔹 You push updates, but… did anything break?

🔹 Manually checking pages is tedious—and easy to forget.

🔹 Bugs creep in when you least expect them.

That’s why I set up automated UI testing with Playwright, running tests on every code push and a schedule via GitHub Actions. Now, I get notified if anything fails—without lifting a finger.

Here’s what this setup gives me:

✅ Confidence that my site works after every update.

✅ Instant feedback when something breaks.

✅ Zero manual effort—tests run automatically, whether I remember or not.

In this post, I’ll walk through how I built this Playwright-powered CI/CD setup so you can do the same for your projects.

What is Playwright? Why Use It for UI Testing?

Playwright is an end-to-end testing framework developed by Microsoft, designed for fast, reliable, and cross-browser testing.

🚀 Key Features That Make Playwright Stand Out

🔹 Cross-Browser Support – Run tests on Chromium, WebKit, and Firefox with a single API.

🔹 Headless & Headed Modes – Run tests in background mode for speed or visually debug in real browsers.

🔹 Auto-Waiting & Smart Selectors – No need to add manual wait times—Playwright automatically waits for elements to appear.

🔹 API Testing – Playwright isn’t just for UI—it can also test APIs alongside frontend tests.

🔹 Mobile Emulation – Test your site as if it’s running on real devices.

🔹 Built-in Reporters – Generate HTML, JSON, or JUnit reports without extra setup.

🔹 Network Interception – Mock API responses to test edge cases without modifying backend services.

🔹 Parallel Execution – Run tests in parallel to speed up execution.

Unlike Selenium, Playwright uses modern browser APIs, making it faster, more stable, and easier to work with in CI/CD pipelines.

Photo by Arnold Francisca on Unsplash

Step 1: Setting Up Playwright

Playwright is an end-to-end testing framework that lets you automate browsers like Chromium, Firefox, and WebKit. It’s perfect for UI testing because it can interact with pages like a real user.

1️⃣ Install Playwright & Dependencies

If you haven’t installed Node.js, do that first (Download here). Then, inside your project folder:

npm init -y  # Initialize a Node.js project
npm install --save-dev @playwright/test  # Install Playwright
npx playwright install  # Install required browsers

This sets up Playwright and downloads the browsers it will use for testing.

Step 2: Writing Your First Test

Let’s create a simple test script to verify that your homepage loads correctly.

Create a tests/homepage.spec.js file:

import { test, expect } from '@playwright/test';

test('Homepage loads correctly', async ({ page }) => {
  await page.goto('https://your-website.com');  // Change this to your site
  await expect(page).toHaveTitle(/Your Site Name/i);  // Check page title
});

Run it locally:

npx playwright test

You should see a test success message if everything is set up correctly!

Step 3: Automating Tests with GitHub Actions

Now that we have Playwright tests, we can automate them with GitHub Actions. This means:

✔️ Tests run automatically whenever you push code.

✔️ Scheduled runs catch issues even when you’re not working on the project.

✔️ Notifications let you know when tests pass or fail.

3️⃣ Create a GitHub Actions Workflow

Inside your project, create a .github/workflows/playwright.yml file:

name: Playwright Tests

on:
  push:
    branches:
      - main
  schedule:
    - cron: '30 10 * * 2'  # Runs every Tuesday at 10:30 AM UTC

permissions:
  contents: write
  issues: write

jobs:
  test:
    runs-on: ubuntu-latest
    env:
      BASE_URL: ${{ secrets.BASE_URL }}
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Install Dependencies
        run: |
          npm install
          npx playwright install --with-deps

      - name: Run Playwright Tests
        run: npx playwright test --reporter=html

      - name: Upload Playwright Report as Artifact
        uses: actions/upload-artifact@v4
        with:
          name: playwright-test-report
          path: playwright-report/

      - name: Deploy Report to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: playwright-report/

      - name: Create Issue if Tests Passed
        if: success()
        uses: JasonEtco/create-an-issue@v2
        with:
          filename: .github/ISSUE_TEMPLATE/test-success.md
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Create Issue if Tests Failed
        if: failure()
        uses: JasonEtco/create-an-issue@v2
        with:
          filename: .github/ISSUE_TEMPLATE/test-failed.md
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

What This Workflow Does:

📌 Runs Playwright tests on every push and every Tuesday at 10:30 AM UTC.

📌 Uploads test reports as artefacts for review.

📌 Deploys reports to GitHub Pages for easy access.

📌 Creates a GitHub Issue if tests pass or fail, so you get notified.

Final Thoughts: Why This Matters

After setting this up, I no longer have to check if my site is working manually. Instead, I get:

✅ Instant feedback on regressions.

✅ Scheduled monitoring without lifting a finger.

✅ Confidence that key features are working—automatically.

If you’re maintaining a personal project, automating UI testing might be easier than you think! 🚀

Would love to hear how others approach test automation—drop a comment if you have any tips or challenges!

🔗 Live Project: benpavey.com

🔗 GitHub Repo: GitHub - BenPavey/benpavey-portfolio-tests

📌 TL;DR – Steps to Implement This

1️⃣ Install Playwright → npm install --save-dev @playwright/test

2️⃣ Write UI tests → tests/homepage.spec.js

3️⃣ Run tests locally → npx playwright test

4️⃣ Automate with GitHub Actions → .github/workflows/playwright.yml

5️⃣ (Optional) Run in Docker → docker build -t playwright-tests . && docker run --rm playwright-tests