Beginner Tutorial: BDD Testing with Cucumber (TypeScript)

Behavior Driven Development (BDD) helps teams write tests in human-readable language.
Tools like Cucumber allow writing test scenarios using Gherkin syntax (Given–When–Then).

This tutorial will show how to:

Install Cucumber

Configure TypeScript

Write a Feature file

Implement Step Definitions

Run the test

Steps to Run Cucumber

1
Install Node js
First install Node.js.
Check installation:
```
javascript
1node -v
2npm -v
```

Create a Project

Following steps to create project -

javascript
1mkdir cucumber-bdd-demo
2cd cucumber-bdd-demo
3npm init -y

Install Dependencies

Install Cucumber.js with TypeScript support.

javascript
1npm install --save-dev @cucumber/cucumber
2npm install --save-dev typescript ts-node
3npm install --save-dev @types/node

Configure TypeScript

Create tsconfig.json

javascript
1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "commonjs",
5    "strict": true,
6    "esModuleInterop": true,
7    "outDir": "dist"
8  }
9}

Project Structure

Project structure is given below -

javascript
1cucumber-bdd-demo
2│
3├── features
4│   ├── login.feature
5│   └── step-definitions
6│        └── loginSteps.ts
7│
8├── tsconfig.json
9└── package.json

Create a Feature File

features/login.feature

javascript
1Feature: Login functionality
2
3  Scenario: Successful login
4    Given the user is on the login page
5    When the user enters valid username and password
6    Then the user should see the dashboard

Info

Explanation: Feature → describes system capability Scenario → test case Given / When / Then → test steps

Create Step Definitions

features/step-definitions/loginSteps.ts

javascript
1import { Given, When, Then } from '@cucumber/cucumber';
2import assert from 'assert';
3
4let loggedIn = false;
5
6Given('the user is on the login page', function () {
7  console.log("User navigates to login page");
8});
9
10When('the user enters valid username and password', function () {
11  loggedIn = true;
12});
13
14Then('the user should see the dashboard', function () {
15  assert.strictEqual(loggedIn, true);
16  console.log("Login successful. Dashboard displayed.");
17});

Add Test Script

Update package.json

javascript
1"scripts": {
2  "test": "cucumber-js --require-module ts-node/register --require features/**/*.ts"
3}

9
Run the Test
To run test -
```
javascript
1npm test
```
Success
Expected Output: Feature: Login functionality Scenario: Successful login ✓ Given the user is on the login page ✓ When the user enters valid username and password ✓ Then the user should see the dashboard 1 scenario (1 passed) 3 steps (3 passed)

Advantages of BDD

Using Cucumber provides:

Collaboration between QA, developers, and business

Readable test scenarios

Behavior-focused testing

Living documentation

Example Real Use Case

BDD is widely used with automation tools like:

Playwright

Selenium

Cypress

Beginner Tutorial: BDD Testing with Cucumber (TypeScript)

Prerequisites

Behavior Driven Development (BDD) helps teams write tests in human-readable language.
Tools like Cucumber allow writing test scenarios using Gherkin syntax (Given–When–Then).

Steps to Run Cucumber

Install Node js

Create a Project

Install Dependencies

Configure TypeScript

Project Structure

Create a Feature File

Create Step Definitions

Add Test Script

Run the Test

Advantages of BDD

Example Real Use Case

About the Author

Beginner Tutorial: BDD Testing with Cucumber (TypeScript)

Prerequisites

Behavior Driven Development (BDD) helps teams write tests in human-readable language.Tools like Cucumber allow writing test scenarios using Gherkin syntax (Given–When–Then).

Steps to Run Cucumber

Advantages of BDD

Example Real Use Case

About the Author

Behavior Driven Development (BDD) helps teams write tests in human-readable language.
Tools like Cucumber allow writing test scenarios using Gherkin syntax (Given–When–Then).