Integrating Cypress with GitHub Actions: A Step-by-Step Guide 

Introduction:

Continuous Integration (CI) and Continuous Deployment (CD) have become essential practices in modern software development. Integrating Cypress, a popular end-to-end testing framework, with GitHub Actions can significantly streamline your testing workflow. This blog will guide you through the process of setting up Cypress with GitHub Actions, complete with an example test case.

What is Cypress? 

Cypress is an open-source testing framework that aims to make testing web applications easier. It offers a robust, reliable, and easy-to-setup environment for writing end-to-end tests, making it a popular choice among developers. 

What are GitHub Actions? 

GitHub Actions is a CI/CD tool that allows you to automate your workflows directly within your GitHub repository. By integrating Cypress with GitHub Actions, you can automate your testing process, ensuring your application is tested with every commit and pull request. 

Pre-requisites: 

1. A GitHub repository for your project. 
2. Node.js and npm are installed on your local machine. 
3. Cypress installed in your project (npm install cypress –save-dev). 

Note: For points 2 and 3 we don’t need to install on GHA because we are using the cypress/base: 20.13.1 docker images. node.js and npm come with that image the only thing is you have to install the project dependencies. 

Integration:

Step 1: Setting Up Cypress 

First, ensure you have Cypress installed in your project. If not, you can install it using npm: 

Step 2: Writing a Test Case

Create a simple test case to ensure Cypress is working correctly. In the cypress/e2e folder, create a file called test_cases.cy.js and add the following code:

/// <reference types="Cypress" /> 
describe('My First Test', () => { 
it('Select dropdown', () => { 
cy.visit('https://automationteststore.com/') 
cy.title().should('include', 'A place to practice your automation skills!'); 
cy.get(".block_6 > .nav > .dropdown > .dropdown-toggle").trigger('mouseover'); 
cy.get("li>a[href$=EUR]").click() 
}) 
}) 

This test visits the automationteststore homepage. checks if the title includes the expected text and selects the value from the dropdown. 

Step 3: Setting Up GitHub Actions with Docker 

Next, we will create a GitHub Actions workflow to run our Cypress tests automatically using a Docker container. In your project root, create a .github/workflows directory and inside it, create a file named test-cypress.yaml. 

Explanation of the Workflow:

• name: The name of the workflow. 
• on: Specifies when the workflow should run in this case it will trigger manually. 
• jobs: Defines the job to run the tests. 
• runs-on: The environment the job runs on (Ubuntu in this case). 
• container: Specifies the Docker container to use for running the tests (cypress/base:20.13.1). 
• steps: The sequence of actions to perform in the job: 
  • Checkout repository: Check out your GitHub repository. 
  • Run Cypress test: Installs the project dependencies and Executes the Cypress tests. 

Step 4: Checking the Workflow 

Navigate to the “Actions” tab in your GitHub repository. You should see your workflow. Click on the Run Workflow button to trigger the workflow.  

 After the click, you will see your workflow execution. 

Below the Screenshot, you will see the test result. I wrote one test case that’s why we can see one test passed. 

Conclusion:

Integrating Cypress with GitHub Actions is a powerful way to automate your end-to-end testing process. This setup ensures that your application is continuously tested, providing quick feedback and maintaining code quality. With this guide, you should be able to set up a basic Cypress testing workflow using GitHub Actions, making your development process more efficient and reliable.