DEV Community

Cover image for How to setup Cypress on Github Actions
Rodrigo Santos
Rodrigo Santos

Posted on

How to setup Cypress on Github Actions

In this text, I try to show you how to set up Cypress on Github Actions, but first I have one disclaimer for you.

I assume you know the basics about Github, that is commits, pull requests, and branches need to be familiar concepts.

Github Actions it's an important tool for automating and run software workflows day by day. In this article, I show to you when every time someone creates a pull request for your project repository, you can automatically run a command that executes a software testing script.

But first, I need you to have any Github repository with any Cypress test.

So let's start the fun...

1 . In your Github repository create a new file in directory .github/workflows called github-actions-init.yml

2 . In this file we must add content with steps of our workflow:

name: GitHub Actions Demo
on: [pull_request]
jobs:
 cypress-run:
    runs-on: ubuntu-latest
    steps: 
      - name: Checkout
        uses: actions/checkout@v2
      - name: Install node
        uses: actions/setup-node@v2
        with:
            node:version: '14'
      - name: Install dependencies
        run: npm install       
      - name: Cypress run
        uses: cypress-io/github-action@v2
Enter fullscreen mode Exit fullscreen mode

In this YAML file, we have some terms that need explanation, so let's go undestand line by line:

  • name: GitHub Actions Demo: It's basically the name of our workflow.
  • on: [pull_request]: Shows for github actions when running the workflow
  • jobs: Group all jobs in file
  • cypress-run: It's job's name
  • runs-on: ubuntu-latest: Indicates to a workflow should run in a Ubuntu Linux executor.
  • steps: All steps to run in workflow
  • Checkout: It's a step's name
  • uses: actions/checkout@v2: In this line basically our workflow checks our repository allowing you to run actions against own code
  • name: Install node: It's a step's name
  • uses: actions/setup-node@v2: This step is used for install a specified node version
  • node-version: Indicate a node version
  • name: Install dependencies: It's a step's name
  • run: npm install: Run the command install in node, to install all dependencies in project
  • name: Cypress run: It's a step's name
  • uses: cypress-io/github-action@v2: Run a Cypress command to execute all tests cases in project.

3 . After adding this file to the repository, it's time to create a pull request and see the magic happen.

It's all for today, but I hope this text helps you, and if you have any ask, text me in the comments. I see you soon

Project Repository: https://github.com/rodrigosta/e2e-toDoList
References:

Top comments (3)

Collapse
 
marcelofullstack profile image
Marcelo Guimarães

Top demais. Parabéns !!!!

Collapse
 
di3gocs profile image
Diego Silva

Muito bom!

Collapse
 
filipborgs profile image
Filipe Borges

This is very useful.
Congratulations