How to Set Up Cypress in GitHub Actions for End-to-End Testing

name: 'Usage of github-action GitHub Action'
on:
push:
    branches:
        - main
jobs:
deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Cypress run
      uses: cypress-io/github-action@v6
      with:
        build: npm run build
        start: npm start

github-action

GitHub Action for running Cypress end-to-end & component tests

What is Cypress?​

The Cypress GitHub Action is designed to simplify the setup of Cypress in your GitHub Actions workflow. It manages the installation of dependencies and leverages built-in caching for Node.js dependencies, which can greatly enhance the speed of test execution. Additionally, the action provides a range of flexible configuration options to accommodate diverse testing requirements.

How to Set Up Cypress Component Testing in GitHub Actions​

Cypress Component Testing is of a kind unit test you would do to your UI components. This allows developers to mount individual components into an isolated test environment and lets developers interact with these components as a user would do so. In this way, it is ensured that every component behaves correctly in isolation from the rest of the application.

- name: Cypress run
  uses: cypress-io/github-action@v6
  with:
    component: true

How to Test with Chrome in GitHub Actions​

For testing with Chrome, configure your workflow file as follows:

name: Chrome
on: push
jobs:
  chrome:
    runs-on: ubuntu-22.04
    name: E2E on Chrome
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          browser: chrome

How to Test with Firefox in GitHub Actions​

name: Firefox
on: push
jobs:
  firefox:
    runs-on: ubuntu-22.04
    name: E2E on Firefox
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          browser: firefox

How to Test with Edge in GitHub Actions​

For testing on Edge, use this workflow configuration:

name: Test with Edge
on: push
jobs:
  edge:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          browser: edge

How to Run Cypress in Headed Mode in GitHub Actions​

Running tests in headed mode (with the browser UI visible) can be useful for debugging. Here’s how to configure it:

name: Run Cypress in Headed Mode
on: push
jobs:
  cypress-run:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          browser: chrome
          headed: true

Best Practices for Setting Up Browser Tests

• Parallel Testing: To reduce the total testing time, consider setting up parallel execution across different browsers.
• Capture Artifacts: Configure workflows to save screenshots and videos of the test runs. This can be critical for diagnosing issues after test failures.
• Use Caching: Implement caching for Node dependencies and Cypress binaries to decrease the setup time of your workflows.

How to Specify Test Specs in Cypress GitHub Actions​

We can even go further and specify the test files that we’re going to run, or the specs, using Cypress: this will help a lot in big projects or when we want to test new features or bug fixes very fast. Here is a guide on how to set up Cypress so it only runs specific test specs when using the GitHub Actions configuration.

name: Cypress Tests
on: push
jobs:
  cypress-run:
    name: Cypress Run
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Cypress Run
        uses: cypress-io/github-action@v6
        with:
          spec: |
            cypress/e2e/spec-a.cy.js
            cypress/**/*-b.cy.js

Benefits of Specifying Specs in Cypress

• Focused Testing: By specifying test specs, you can focus on testing only the parts of your application that have changed or are critical, which is more efficient.
• Faster Feedback: Running fewer tests reduces the overall testing time, providing faster feedback to developers.
• Resource Optimization: Helps conserve CI/CD resources, which can be particularly beneficial for projects with limited testing resources or budget constraints.

How to Set Up Parallel Cypress Tests in GitHub Actions​

Running Cypress tests in parallel is a great way to speed up the execution of our e2e test suites as our application grows. In this blog post, I will show you how to set up parallel Cypress tests in our CI/CD pipeline using Cypress Cloud and the matrix strategy.

To utilize parallel testing, you must have a Cypress Cloud account since the parallelization feature relies on Cypress Cloud to manage and balance the test load.

name: Parallel Cypress Tests
on: push
jobs:
  test:
    name: Cypress Run
    runs-on: ubuntu-22.04
    strategy:
      fail-fast: false  # Continue running other tests even if one fails
      matrix:
        containers: [1, 2, 3]  # Adjust the array size to increase or decrease parallelism
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Cypress Run
        uses: cypress-io/github-action@v6
        with:
          record: true
          parallel: true
          group: 'Actions Example'
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}