Module P-3·7 min read

Gherkin syntax, step definitions, feature files, and bridging the communication gap with stakeholder collaboration.

Written by Jatin Jain Saraf · Architect of SupraScan

Module 4 — BDD with Cucumber

Who this is for: Teams looking to bridge the communication gap between product owners, QA, and developers. BDD turns plain-English requirements into executable test suites.

Learning Objectives

By the end of this module, you will be able to:

• Write human-readable test scenarios using Gherkin syntax
• Implement step definitions in JavaScript
• Map stakeholder requirements directly to code
• Run Cucumber in a Node.js environment

What is Behavior-Driven Development (BDD)?

BDD is an extension of TDD. While TDD focuses on the implementation (e.g., "does this function return the correct array?"), BDD focuses on the behavior from the user's perspective (e.g., "can a user filter products by category?").

The core tool for BDD in the JavaScript ecosystem is Cucumber.

Gherkin Syntax

Gherkin is a Domain-Specific Language (DSL) that allows you to write test scenarios in plain English. These are saved in .feature files.

The syntax uses specific keywords: Feature, Scenario, Given, When, and Then.

# features/login.feature
Feature: User Login
  As a registered user
  I want to log in to my account
  So that I can access my dashboard
 
  Scenario: Successful login with valid credentials
    Given the user is on the login page
    When the user enters "alice@example.com" and "password123"
    And clicks the login button
    Then they should be redirected to the dashboard
    And see a welcome message

This file serves as living documentation. A Product Manager can read, write, and approve this file without knowing any JavaScript.

Step Definitions

A .feature file does nothing on its own. It needs "Step Definitions" — JavaScript code that tells Cucumber what to do when it encounters a specific step.

// steps/login.steps.js
const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('chai'); // Cucumber works well with Chai
const browser = require('../lib/browser'); // Hypothetical browser utility
 
Given('the user is on the login page', async function () {
  await browser.navigateTo('/login');
});
 
// We use regular expressions or Cucumber Expressions to capture variables
When('the user enters {string} and {string}', async function (email, password) {
  await browser.fillInput('#email', email);
  await browser.fillInput('#password', password);
});
 
When('clicks the login button', async function () {
  await browser.click('#submit-btn');
});
 
Then('they should be redirected to the dashboard', async function () {
  const currentUrl = await browser.getCurrentUrl();
  expect(currentUrl).to.include('/dashboard');
});