Cucumber BDD Testing

Write executable specifications with Cucumber.

Feature File

Feature: User Login
  As a user
  I want to log in to the system
  So that I can access my account

  Background:
    Given the application is running

  Scenario: Successful login
    Given I am on the login page
    When I enter email "user@example.com"
    And I enter password "password123"
    And I click the login button
    Then I should be redirected to the dashboard
    And I should see a welcome message

  Scenario: Failed login
    Given I am on the login page
    When I enter email "wrong@example.com"
    And I enter password "wrong"
    And I click the login button
    Then I should see an error message
    And I should remain on the login page

  Scenario Outline: Multiple login attempts
    Given I am on the login page
    When I enter email "<email>"
    And I enter password "<password>"
    Then I should see "<result>"

    Examples:
      | email            | password  | result  |
      | user@example.com | pass123   | Success |
      | wrong@email.com  | wrong     | Error   |

Step Definitions

import { Given, When, Then } from '@cucumber/cucumber'
import { expect } from '@playwright/test'

Given('I am on the login page', async function() {
  await this.page.goto('/login')
})

When('I enter email {string}', async function(email: string) {
  await this.page.fill('[data-cy="email"]', email)
})

When('I enter password {string}', async function(password: string) {
  await this.page.fill('[data-cy="password"]', password)
})

When('I click the login button', async function() {
  await this.page.click('[data-cy="submit"]')
})

Then('I should be redirected to the dashboard', async function() {
  await expect(this.page).toHaveURL('/dashboard')
})

World (Context)

import { setWorldConstructor, World } from '@cucumber/cucumber'
import { chromium } from '@playwright/test'

export class CustomWorld extends World {
  page: any
  
  async init() {
    const browser = await chromium.launch()
    this.page = await browser.newPage()
  }
}

setWorldConstructor(CustomWorld)