GitHub Actions integration in Cypress

Introduction

GitHub Actions lets you run tasks automatically when you change your code. Integrating Cypress means you can test your website every time you update it, without doing it by hand.

You want to check your website works after every code change.

You want to run tests automatically when you push code to GitHub.

You want to catch bugs early before your users see them.

You want to save time by automating your testing process.

You want to share test results easily with your team.

Syntax

Cypress

name: Cypress Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npx cypress run

This is a basic GitHub Actions workflow file in YAML format.

It runs Cypress tests on every push or pull request automatically.

Examples

This runs tests whenever you push code to any branch.

Cypress

on: push
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npx cypress run

This runs tests only on pull requests targeting the main branch, using clean install.

Cypress

on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npx cypress run

This example adds caching to speed up repeated installs.

Cypress

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Cache node modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
      - run: npm ci
      - run: npx cypress run

Sample Program

This workflow runs Cypress tests on every push or pull request. It checks out the code, sets up Node.js version 18, installs dependencies cleanly, and runs Cypress tests.

Cypress

name: Cypress Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npx cypress run

Important Notes

Make sure your project has a valid package.json with Cypress listed as a dependency.

You can customize the Node.js version in the setup step to match your project needs.

Check GitHub Actions logs to see detailed test results and errors if tests fail.

Summary

GitHub Actions can run Cypress tests automatically on code changes.

This helps catch bugs early and saves manual testing time.

Workflows are defined in YAML files inside your project's .github/workflows folder.