Cucumber with javascript Basics

Cucumber.js is a testing library which allows us to write our test cases in very familier plain english in given-when-then format. This makes out test cases common mode of communication between business and QA team.

Cucumber uses Gherkins language which provides the readable syntax like Given, When ,Then etc. This helps business person to understand what our automation test cases are doing even without having code knowledge.

For ex here below feature file is easily describing what out test case is performing —

A test case in Gherkin is called a Scenario and these scenarios are organised in features. So given this brief introduction about Cucumber.js now lets get started.

Prerequisites —

Here are prerequisites needed before installing cucumber.

JDK — Anything above 1.8.0 is required to be installed in your system. You can simply download from google if not installed. To check if it is installed OR you already have, you can run command java -version and this will return tha java version installed.

NodeJS — Similarly you can simply download from google if not installed. To check if it is installed OR you already have, you can run command node -v and this will return tha java version installed.

Steps —

Below are the simple steps to understand how Cucumber.js library works.

Create a new folder e.g. CucumberBasics

Open this folder in any editor preferably Visual studio Code.

Open terminal and run command npm init (this is very first command for any node base program.)

This will create package.json file where you will see all the options entered while going npm init command like -

Now you need to download cucumber through command-

npm i @cucumber/cucumber

you will see cucumber dependency addded in package.json and it will create one folder inside node_modules as cucumber.

cucumber >> bin >> cucumber-js this will help in running feature file.

Next we need to add extension / plugin “Cucumber(Gherkin) Full Support.” in you VS code which helps in formatting and providing coloured syntax for Gherkin language.

So far we understood what is required and installed for Cucumber.js. Now we will create the architecture.

Create ‘features’ folder in your project folder e.g. CucumberBasics.

Inside features, create ‘stepDefinitions’ folder

Now create one file login.feature inside features folder. You will see the folders like -

Now lets write your first feature file. Below I have written one common login feature file for easily understanding-

Now in order to run this feature file, run command- npx cucumber-js

and you will see undefined step definition because so far we have not written any step definition. But for sure our feature file is communicating with cucumber.

Lets create our first step definition say ‘stepDefinitions.js’ inside stepDefinition folder.

Now when you will run again this code, all the scenario and steps will get passed. So far you can get a fair idea how cucumber.js is communicating with feature file through stepDefinition. Lets explore more.

Multiple scenarios —

You will find situations where there are multiple scenarios with just little changes. So to avoid duplicate coding/steps, we will use regular expressions as “([^”]*)”

Background —

When there are some common steps in the feature file so we can add them in background as -

This part inside the Background will run before every scenario.

Scenario Outline —

To avoid duplicate scenarios just for some dynamic values, we can use Scenario Outline as -

Here this will be executing for both valid and invalid scenarios.

Read the data table —

There are several ways to read the data table from feature in the step definitions. But the most useful way is to use table.hashes() like -

Here hashes returns an array of objects where each row is converted to an object (column header is the key).

Cucumber tags -

Tags are used to run specific set of scenarios. If you have mention tag e.g. @dev or @prod so that specific set of scenarios will be executed.

Run command- npx cucumber-js — tags ‘@prod’

This will execute only scenarios with tag @prod and if you want to run rest of the scenarios not prod one, then you can use -

npx cucumber-js — tags ‘ not @prod’

Cucumber hooks -

When we run our test cases there are some common code we require before starting our test cases or before running each test cases and so on. So to handle these things, cucumber provided some hooks to use.

Before — This will get executed before running every scenarios.

After — This will get executed after running every scenarios.

BeforeAll — This will execute once before all the scenarios execute. It won’t run before running each scenarios like Before block does.

AfterAll — This will execute once after all the scenarios executed. It won’t run after running each scenarios like After block does.

If you want to run Before for just one tag , you can use tagged hook like -

So this is the very basic introductory documentation for Cucumber.js which helps in understanding how cucumber reads file from feature and how feature is linked with stepDefinitions. You will get to learn more whe you will execute this with testing framework like Protactor or cypress.