Cypress test automation with GitHub Actions

Follow these steps to set up the project:

1. Create a folder
   Command: mkdir cypress-project
2. Create a package.json, since then you can install Cypress as a Dev dependency
   Command: npm init -y
   Remove the “main”: “index.js” part from the package.json file for this test since we don’t need it.
3. Install Cypress (prettier)
   Command: npm i -D cypress prettier
4. Open Cypress
   Command: npx cypress open
   Alternatively, we can use the npx cypress run command to run cypress headlessly.
5. After opening Cypress, choose E2E testing. Continue with the default files. Choose any browser you like.
6. When you come to the Create your first spec window, choose the Scaffold example specs option. This is, of course, for this tutorial example. In your actual testing you should update your own tests.

When we have our Cypress test set up, we need to create GitHub Actions that will actually run our Cypress tests. First, we have to create the following path of folders in our root directory:

/.github/workflows

We have to create inside of this path a YML file that will contain the GitHub Actions script. We can name it as we want:

/.github/workflows/test.yml

We must update the test.yml file we created with the GitHub Actions script. The easiest way to do that is by going to the following source: https://github.com/cypress-io/github-action. There, we can find scripts created by Cypress experts such as Gleb Bahmutov.

The one I’ll use in this test example is the script for E2E testing:

name: End-to-end tests
on: push
jobs:
  cypress-run:
    runs-on: ubuntu-24.04
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      # Install npm dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
        uses: cypress-io/github-action@v6

Save these changes and go to the Actions tab inside of our repository. There we should see the test already running. Basically what this test does is triggering the Cypress tests that were already updated during the configuration. Each time some push is made (some changes are made to the repository) the Cypress test will run and recheck all items that are covered in the test scripts.

You may find the GitHub repository I set up following the above-mentioned steps here: https://github.com/NoToolsNoCraft/Cypress-GitHub-Workflow-test-example