QA Automation Labs

Integration of Cucumber with CI/CD Jenkins to Execute Cypress Test Cases

image-8-768x444

Integration of Cucumber with CI/CD Jenkins to Execute Cypress Test Cases

Problem Statement

We need to integrate the Cucumber report in CI/CD Jenkins for to execute the Cypress test cases So that we can see the results of the cucumber cypress test case in graphical form (pie chat etc.) In Jenkins itself.

What is Cucumber

Cucumber reads executable specifications written in plain text and validates that the software does what those specifications say. The specifications consist of multiple examples or scenarios. For example:

Scenario: Breaker guesses a word

  Given the Maker has chosen a word

  When the Breaker makes a guess

  Then the Maker is asked to score

Each scenario is a list of steps for Cucumber to work through. Cucumber verifies that the software conforms with the specification and generates a report indicating  success or  failure for each scenario.

What is BDD?

BDD bridges the gap between business stakeholders and the technical team through a common platform. Hence, communication among the team becomes more transparent.

Gherkin is being used as the language in which the test cases are written in a simple format and can also be read and modified by a non-technical user.

Steps to Integrate Cucumber in Jenkin CI/CD

Step 1:

 Create a folder and Generate package.json

  1. Create a new folder, I called mine project cypress_with_cucumber
  2. Type npm init (package.json) is created

Step 2:

Install cypress

To install Cypress in the root of the project folder run command, run the command: npm install cypress –save-dev

Step 3:

Install two plugins “cypress-cucumber-preprocessor” and “multiple-cucumber-html-reporter,”

Run > npm install — save-dev cypress-cucumber-preprocessor

Run > npm install multiple-cucumber-html-reporter

Step 4:

Add below line under plugins -> index.js

/// <reference types=”cypress” />

const cucumber = require(“cypress-cucumber-preprocessor”).default;

module.exports = (on, config) => {

on(“file:preprocessor”, cucumber());

};

Step 5:

Package.json looks like see below

{
“name”: “cypress_cucumber_jenkin”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“run:non-headless”: “cypress open”,
“run:headless”: “cypress run”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“cypress”: “^9.7.0”,
“cypress-cucumber-preprocessor”: “^4.3.1”,
“multiple-cucumber-html-reporter”: “^1.21.4”
},
“cypress-cucumber-preprocessor”: {
“cucumberJson”: {
“generate”: true,
“outputFolder”: “cypress/cucumber-json”,
“filePrefix”: “”,
“fileSuffix”: “.cucumber”
},
“nonGlobalStepDefinitions”: true
}
}

Detail of pacakage.json fields

Step 6:

Add the below line in cypress.json

{
“testFiles”: “**/*.feature”
}

Step 7:

Create feature and .spec file

How to create feature and .spec please follow the links

Feature files look like given below

.spec files look like given below

Test Class

Page Class

Set Up Jenkins

Step 1 Install Jenkin in mac

To run the cypress test case in Jenkin’s first step to installing Jenkins, below are the steps for Jenkin installation.

Step 1.1: Install Homebrew

If you don’t already have the Homebrew package manager installed, you will first need to follow the installation steps from https://brew.sh/

You can check if Homebrew is already installed by opening a terminal by typing

brew –version

Step 1.2: Install Jenkins

Once Homebrew is installed, you can run the following command which will download and install the current Long-term support (LTS) version of Jenkins.

brew install Jenkins-lts.

Step 1.3: Start the Jenkins server

The next step is actually to start the Jenkins server. You can do that with this command:

brew services start Jenkins-lts

This will start the Jenkins server in a few seconds. You can check if it is properly working by visiting http://localhost:8080/

Step 1.4: Get the installation password

To get the password needed to run the installation process, just check the content of the file mentioned on the screen.

Step: 2 Configure Jenkin

Once you have installed Jenkins in any of the ways presented, it is time to do the final setup.

Step 2.1: Install plugins

Jenkins is composed of multiple components called plugins. The next step asks you which plugins you would like to install. Just install the suggested plugins. Don’t worry about this — you can easily add or remove plugins later. Just install the recommended plugins.

Step 2.2: Create a Jenkins User

The next step is to create a Jenkins admin user. Make sure you write down the username and password as you will need them later.

Step 2.3: Configure the Jenkins URL

The final step is to configure the URL for the Jenkins server. This would be prefilled for you. So all you need to do is to click “Save and continue“.

Soon the server will be configured and it’s ready for action.

Step 3: Source Code Management setting in Jenkin

Step 3.1: Install node from Global tool configuration

Step 3.2: Provide repository URL, credential, and branch name of the git repository under source code management

Step 3.3: Install the Cucumber report by selecting the plugin

Click on Manage Jenkin -> Manage Plugin and Search for “Cucumber”. In the below screenshot we can see Cucumber report is already installed

Step 3.4

In Post Build set up JSON path as shown below and finally click on save/or apply

Set Up Build Steps in Jenkins

1. Click on Build and — > Select Execute Shell and add the below lines under the command and Click on Save or apply

npm install /* This command installs all devDependencies */
npm install cypress

npm run run:headless /* This command will run the test case in headless mode*/
node cucumber-html-report.js /* This command uses the generated .json from the above step and finally generates the cucumber report */

2. Click on Build Now, As the user click on Build now build start running

3. Click on Console Output, we can see the build start running

4. Once Build runs successfully we can see Cucumber report is generated 

Verify the Cucumber report in Jenkins Dashboard

Cucumber report is generated and displayed on the Jenkins dashboard

Click on the Cucumber report from the dashboard. We can see a pie chart with detail of each .feature

Passed Test cases Report

In below screenshot, we can see Passed Steps, Scenarios, and Features

Failed Test cases Report

In the below report, we can see one of the test cases is failing

Conclusion

Cucumber and Cypress with CI/CD Jenkins pipelines have proven to be a robust and sustainable pair. You can write feature files containing Cucumber scenarios and then use Cypress to write your step definitions in your spec files. A special preprocessor then converts the scenarios and step definitions into “regular” JavaScript Cypress tests.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More
image

Enhance Testing Workflows with HTML Allure Reports in Cypress

Allure Report is the utility that processes test results collected by a compatible test framework and produces an HTML report. Allure Report is i
Read More