How to Execute Cypress E2E Test Cases Using CI/CD GitLab

Cypress is an end-to-end testing framework that is used to test web applications. It is an open-source JavaScript-based framework that enables developers to write and run automated tests for their web applications in a simple and easy way.

Cypress provides a fast, reliable, and easy-to-use testing experience for web developers. It allows developers to write tests in JavaScript, and its powerful features include automatic reload of tests, time travel debugging, and interactive debugging. Cypress also provides a dashboard to view test results and insights.

GitLab provides integration with Cypress through its CI/CD pipelines. Developers can configure GitLab to run Cypress tests as part of the pipeline and view the test results within the GitLab UI. GitLab also provides the ability to store test artifacts such as screenshots and videos.

About GiLab

GitLab is a web-based Git repository manager that provides source code management, continuous integration/continuous deployment (CI/CD) pipelines, and other related features for software development. It offers a complete DevOps platform that enables teams to collaborate on code, automate builds and tests, and deploy applications.

In addition to Git repository management, GitLab includes features such as issue tracking, code review, automated testing, and container registry. It also provides integration with various third-party tools like Kubernetes, Jira, Jenkins, and many more.

GitLab is an open-source tool and provides both on-premises and cloud-based deployment options. It is a popular choice for organizations of all sizes that are looking for an all-in-one solution for their software development needs.

Why GiLab as CI/CD

GitLab is a popular choice for CI/CD because it provides an all-in-one platform for managing the entire development lifecycle. With GitLab, developers can:

1. Manage code repositories: GitLab provides robust source code management capabilities with built-in version control using Git.
2. Automate builds and deployments: GitLab provides a built-in CI/CD pipeline that allows developers to automatically build, test, and deploy their code changes.
3. Collaborate effectively: GitLab provides an integrated issue tracking system, code review tools, and collaboration features that enable team members to work together more efficiently.
4. Increase visibility and transparency: GitLab provides real-time insights into the progress of the development process through its powerful dashboard, enabling developers to monitor builds, deployments, and other key metrics.
5. Flexible deployment options: GitLab supports multiple deployment options, including cloud-based and self-hosted solutions, enabling teams to choose the deployment method that best fits their needs.

GiLab CI/CD WorkFlow

Here’s an high level GitLab CI/CD workflow diagram:

Explanation:

1. When a push or merge request is made to the repository, GitLab CI/CD is triggered.
2. The Build Job is responsible for running tests and building the artifact.
3. The Test Job deploys the artifact to a staging environment for integration testing.
4. After the integration testing is complete, the changes are reviewed in the staging environment. If approved, the changes move to the next stage. If rejected, they are sent back to the development stage for further work.
5. The Prod Deploy Job deploys the changes to the production environment once they have been approved.
6. The Done stage indicates that the entire workflow is complete.

Let’s Set Up GitLab

Steps

Below are the Steps for Gitlab Setup

Create a GitLab account: If you don’t have a GitLab account, you can sign up for free at gitlab.com

Step 1

Login into https://gitlab.com/ with provided options Google, GitHub,Twitter,Bitbucket and Salesforce. In my case I am login with GitHub account.

Step 2

Sign-in with GitHub account. you will see below screen is open.

Step 3

Click on ‘Create a project’

Step 4

Clicking on ‘Create a project’ below screen is open with four options (Create blank project,Create from template,Import project,Run CI/CD for external repository)

Step 5

Click on ‘Import project’ from above screen.

Lets import from GitHub by clicking on GitHub

Step 6

When we click on Import all existing repositories are display. In below screens we can see total 17 repositories are displaying.

Step 7

Let’s Import repositories from GitHub ->GitLab. In my case let import the repository “Cypress_GitLab”

As we click on Import, Import is start and complete after few min

Step 8

Go to project below screens is open

Step 9

Now Let’s Set up CI/CD by clicking on “Set up CI/CD” from above screen

Click on Configure pipeline it will open the default pipeline

Step 10

Now Lets update the existing .yaml file with below data

e2eChrome:
  image: cypress/browsers:node18.12.0-chrome107      
  stage: test
  script:
    - npm ci
    - npm run RunTCOnChrome

e2eElectron:
  image: cypress/browsers:node18.12.0-chrome107     
  stage: test
  script:
    - npm ci
    - npm run RunTCOnElectron
  artifacts:
    when: always
    paths:
      - cypress/screenshots/
      - cypress/videos/

The artifacts section is used to capture the test results and make them available for download after the job completes. In this case, we are capturing the screenshots and videos generated during the test run and making them available in the cypress/screenshots/ and cypress/videos/ directories, respectively.

Execute Test Case

Below are the test cases that I have taken as an example for demo purpose

1. File : api.cy.js

In this test case we are performing CRUD operation

describe('API automation Test Case:', () => {
    it("GET API testing Using Cypress API Plugin", () => {
        cy.request("GET", "https://reqres.in/api/users?page=2").should((response) => {
          expect(response.status).to.eq(200);
        });
      });
      
      it("POST API testing Using Cypress API Plugin", () => {
        cy.request("POST", "https://reqres.in/api/users", {
          name: "morpheus",
          job: "leader",
        }).should((response) => {
          expect(response.status).to.eq(201);
        });
      });
      
      it("PUT API testing Using Flip Plugin", () => {
        cy.request("PUT", "https://reqres.in/api/users/2", {
          name: "morpheus",
          job: "zion resident",
        }).should((response) => {
          expect(response.status).to.eq(200);
        });
      });
      
      it("DELETE API testing Using Cypress API Plugin", () => {
        cy.request("DELETE", "https://reqres.in/api/users/2").should((response) => {
          expect(response.status).to.eq(204);
        });
      });
    })

2. File : qaautomationlabs_Flow.cy.js

In this test case we are opening the site https://qaautomationlabs.com/

1. Open URL https://qaautomationlabs.com/
2. Click on Read More button
3. Verify Particular Blog
4. Click on Blog link and Search the data

/// <reference types="cypress" />

describe("QAAutomationLabs.com", { testIsolation: false }, () => {
  it("Open URL", () => {
    cy.visit("https://qaautomationlabs.com/");
  });
  it("Click on Read More ", () => {
    cy.get(".staticslider-button").click();
  });
  it("Verify Particular Blog ", () => {
    cy.contains(
      "Running End-to-End Cypress Test cases In Google Cloud Build Pipeline"
    );
  });
  it("Click on Blogs", () => {
    cy.contains("Blog").scrollIntoView().click({ force: true });
  });
  it("Search the data", () => {
    cy.get('[id="wp-block-search__input-2"]').scrollIntoView();
    cy.get('[id="wp-block-search__input-2"]')
      .click({ force: true })
      .type("cypress");
    cy.get('[id="search-icon"]').click({ force: true });
    cy.contains("Search Results for: cypress");
  });
});

Package.json look like attached below

{
  "name": "cypress_gitlab",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "RunTCOnChrome": "cypress run --browser chrome",
    "RunTCOnElectron": "cypress run --browser electron"
  },
  "author": "Kailash Pathak",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^12.5.1"
  }
}

Trigger the Job from GitLab or Push the Code

As we trigger the job from GitLab or push any code , Job is triggered. Test cases are start executing In Chorme and Electron

As we trigger the job in console we can see first required dependency install then test case start executing

Test Case execution Report

Chrome:

In below screen shot we can see test case executed successfully in Chrome

Electron:

In below screen shot we can see test case executed successfully in Electron

Lets Wrap up

Cypress and GitLab can be used together to create a robust and efficient software development pipeline. By integrating Cypress with GitLab’s CI/CD pipelines, developers can automate the testing process and ensure that new code changes don’t introduce any issues or regressions.