BDD — Explained with Examples

Feature: User Login
  As a registered user
  I want to log into the application
  So that I can access my account

  Scenario: Successful login with valid credentials
    Given I am on the login page
    When I enter "alice@example.com" in the email field
    And I enter "CorrectPass123" in the password field
    And I click the "Login" button
    Then I should be redirected to the dashboard
    And I should see "Welcome, Alice"

  Scenario: Failed login with invalid password
    Given I am on the login page
    When I enter "alice@example.com" in the email field
    And I enter "WrongPass" in the password field
    And I click the "Login" button
    Then I should see "Invalid email or password"
    And I should remain on the login page

// features/login.feature (Gherkin — shared with stakeholders)
// (shown above)

// features/step_definitions/login_steps.js (code)
const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('chai');
const { LoginPage } = require('../pages/login');

Given('I am on the login page', async function () {
  this.page = new LoginPage();
  await this.page.navigate();
});

When('I enter {string} in the email field', async function (email) {
  await this.page.enterEmail(email);
});

When('I click the {string} button', async function (button) {
  await this.page.clickButton(button);
});

Then('I should be redirected to the dashboard', async function () {
  const url = await this.page.getCurrentUrl();
  expect(url).to.include('/dashboard');
});

Then('I should see {string}', async function (message) {
  const text = await this.page.getPageText();
  expect(text).to.include(message);
});