19. Cucumber Integration

Setup

npm install @cucumber/cucumber @playwright/test
npm install ts-node typescript  # if using TypeScript

Feature Files

// features/login.feature
Feature: Login
  As a user
  I want to log into the application
  So that I can access my account

  Background:
    Given I am on the login page

  Scenario: Successful login
    When I enter username "standard_user" and password "secret_sauce"
    And I click the login button
    Then I should see the inventory page

  Scenario: Locked out user
    When I enter username "locked_out_user" and password "secret_sauce"
    And I click the login button
    Then I should see an error message

Step Definitions

// steps/login.steps.ts
import { Given, When, Then } from '@cucumber/cucumber';
import { Page, Browser, chromium } from '@playwright/test';

let browser: Browser;
let page: Page;

Given('I am on the login page', async function () {
  browser = await chromium.launch();
  const context = await browser.newContext();
  page = await context.newPage();
  await page.goto('https://www.saucedemo.com');
});

When('I enter username {string} and password {string}',
  async (username: string, password: string) => {
    await page.fill('#user-name', username);
    await page.fill('#password', password);
});

When('I click the login button', async () => {
  await page.click('#login-button');
});

Then('I should see the inventory page', async () => {
  await page.waitForSelector('.inventory_list');
  await browser.close();
});

Hooks & Tags

// hooks.ts
import { Before, After, BeforeAll, AfterAll } from '@cucumber/cucumber';

BeforeAll(async function () {
  // Global setup
});

Before(async function (scenario) {
  // Per-scenario setup
  console.log(`Starting: ${scenario.pickle.name}`);
});

After(async function (scenario) {
  if (scenario.result?.status === 'FAILED') {
    // Take screenshot
  }
});

AfterAll(async function () {
  // Global teardown
});

// Run specific tags
// cucumber-js --tags "@smoke and not @wip"

Cucumber Reports

// Generate JSON report
// cucumber-js --format json:reports/cucumber-report.json

// Use with Allure or other reporters
npm install allure-cucumberjs