Automate Your Browser Tests with Playwright and GitHub Actions

Introduction

Testing web applications manually is like herding cats—time-consuming, unpredictable, and sometimes downright chaotic. That’s where Playwright and GitHub Actions step in, making browser automation and continuous integration (CI) as smooth as a cat’s purr.

In this guide, we’ll show you how to integrate Playwright tests into a GitHub Actions workflow, ensuring your web app stays bug-free with every code push. Whether you’re a beginner or an advanced developer, we’ve got you covered with step-by-step instructions, Playwright code snippets, and best practices for parallel execution. Let’s get started!

---

Table of Contents

1. Why Use Playwright with GitHub Actions?
2. Setting Up Playwright in GitHub Actions
3. Optimizing for Parallel Execution
4. Handling Common Issues & Debugging
5. Advanced Playwright Configurations
6. Conclusion

---

Why Use Playwright with GitHub Actions?

GitHub Actions is a powerful CI/CD tool that lets you automate testing, deployment, and other tasks in your development workflow. Pairing it with Playwright means you can:

• Run browser tests automatically whenever you push changes.
• Test across multiple browsers (Chromium, Firefox, WebKit) with ease.
• Parallelize execution to speed up test runs.
• Debug issues quickly with screenshots and videos.

Now, let’s set up Playwright in a GitHub Actions workflow!

---

Setting Up Playwright in GitHub Actions

Prerequisites

Before diving in, ensure you have:

• A GitHub repository with a web app or site to test.
• Node.js and npm installed.
• Playwright installed in your project:

npm init playwright@latest

Creating a GitHub Actions Workflow

GitHub Actions workflows are defined in .github/workflows/. Let’s create a Playwright test workflow.

1️⃣ Create a new YAML workflow file:

mkdir -p .github/workflows
nano .github/workflows/playwright.yml

2️⃣ Add the following configuration:

name: Playwright Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: 🐱 Checkout repository
        uses: actions/checkout@v3

      - name: 📦 Install dependencies
        run: npm ci

      - name: 🎭 Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: 🏃 Run Playwright tests
        run: npm test

This workflow triggers Playwright tests on every push and pull request to main. The steps include checking out the repository, installing dependencies, setting up Playwright browsers, and running tests.

---

Optimizing for Parallel Execution

Parallel execution speeds up testing by running multiple tests simultaneously. In GitHub Actions, you can use a matrix strategy to run tests across different browsers and environments.

Modify the workflow to run tests in parallel:

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        browser: [chromium, firefox, webkit]

    steps:
      - name: 🐱 Checkout repository
        uses: actions/checkout@v3

      - name: 📦 Install dependencies
        run: npm ci

      - name: 🎭 Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: 🏃 Run Playwright tests
        run: npx playwright test --project=${{ matrix.browser }}

With this matrix strategy, tests will run concurrently in Chromium, Firefox, and WebKit, reducing test time significantly.

---

Handling Common Issues & Debugging

🔍 Debugging Failed Tests

When a test fails, Playwright captures screenshots and videos. To store them as artifacts in GitHub Actions:

      - name: 📸 Upload screenshots
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: screenshots
          path: test-results/

This ensures that any failed test outputs are available for review in GitHub Actions.

🐛 Troubleshooting Tips

• Playwright tests failing only in GitHub Actions? Use headless: false and take screenshots to debug.
• Tests flaking due to network issues? Add waitForTimeout() or retries.
• Chromium crashes? Increase memory with runs-on: ubuntu-latest-4xlarge.

---

Advanced Playwright Configurations

Running Tests in a Custom Docker Image

If your project requires custom dependencies, use a prebuilt Docker image:

    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:focal

Running Tests on a Schedule

To run tests on a schedule (e.g., every night):

on:
  schedule:
    - cron: "0 2 * * *" # Runs at 2 AM UTC

---

Conclusion

Integrating Playwright with GitHub Actions ensures smooth, automated browser testing for your web applications. By setting up parallel execution, debugging failed tests, and optimizing workflows, you can save time and maintain high test coverage effortlessly.

While GitHub Actions is powerful, BrowserCat’s cloud solution takes Playwright testing to the next level—offering faster execution, advanced debugging tools, and seamless test scaling. Give it a try! 😺🚀