Add Cucumber BDD on top of your Playwright framework

// sets the CommonJS tsconfig before the requireModule hooks load
process.env.TS_NODE_PROJECT = process.env.TS_NODE_PROJECT || 'src/cucumber/tsconfig.json';

const common = {
  requireModule: ['ts-node/register', 'tsconfig-paths/register'],
  format: ['progress-bar', 'html:reports/cucumber/report.html', 'summary'],
};

module.exports = {
  level1: { ...common,
    require: ['src/cucumber/support/**/*.ts', 'src/cucumber/level-01-basic/steps/**/*.ts'],
    paths:   ['src/cucumber/level-01-basic/features/**/*.feature'] },
  // level2 also loads level1 steps — login steps are reused
};

export class CustomWorld extends World {
  page!: Page;
  loginPage!: LoginPage;
  cartPage!: CartPage;        // …all the existing Page Objects

  initPages(): void {       // called from the Before hook
    this.loginPage = new LoginPage(this.page);
    this.cartPage  = new CartPage(this.page);
  }
}
setWorldConstructor(CustomWorld);

BeforeAll(async () => { browser = await chromium.launch({ headless: !process.env.HEADED }); });

Before(async function (this: CustomWorld) {
  this.context = await browser.newContext({ baseURL: BASE_URL });
  this.page = await this.context.newPage();
  this.initPages();
});

After(async function (this: CustomWorld, { result }) {
  if (result?.status === Status.FAILED) this.attach(await this.page.screenshot(), 'image/png');
  await this.page?.close();
});

npm install -D @cucumber/cucumber ts-node tsconfig-paths
npx playwright install chromium
npm run cucumber:level0

@level0 @smoke
Feature: Cucumber + Playwright wiring (Level 0)

  Scenario: The TTACart login page loads
    Given I open the TTACart login page
    Then the page title should contain "TTACart"

Given('I open the TTACart login page', async function (this: CustomWorld) {
  await this.page.goto(LoginPage.PATH);
});

Then('the page title should contain {string}', async function (this: CustomWorld, expected: string) {
  await expect(this.page).toHaveTitle(new RegExp(expected, 'i'));
});

@level1 @login
Feature: TTACart Login (Level 1 — basic scenarios)

  Background:
    Given I am on the TTACart login page

  @smoke @P0
  Scenario: A standard user can log in
    When I log in as "standard_user" with password "tta_secret"
    Then I should land on the products page

  @negative
  Scenario: A locked-out user is refused
    When I log in as "locked_out_user" with password "tta_secret"
    Then I should see a login error containing "locked out"

When('I log in as {string} with password {string}',
  async function (this: CustomWorld, username: string, password: string) {
    await this.loginPage.loginAs(username, password);   // ← reuses the POM
  });

Then('I should land on the products page', async function (this: CustomWorld) {
  await this.inventoryPage.assertLoaded();
});

  Scenario Outline: <username> logging in ends on the <outcome>
    When I log in as "<username>" with password "<password>"
    Then I should see the "<outcome>"

    Examples: valid users
      | username                | password   | outcome  |
      | standard_user           | tta_secret | products |
      | problem_user            | tta_secret | products |
      | performance_glitch_user | tta_secret | products |

    When I add the following products to the cart:
      | productId                    |
      | tta-practice-backpack        |
      | tta-bike-light               |
      | test-allthethings-tshirt-red |

// step — one When consumes the whole table
When('I add the following products to the cart:', async function (this: CustomWorld, table: DataTable) {
  for (const { productId } of table.hashes()) await this.inventoryPage.addToCart(productId);
});

const customers = JSON.parse(readFileSync(join(__dirname, '../data/customers.json'), 'utf-8'));

When('I check out as the {string} customer', async function (this: CustomWorld, persona: string) {
  const customer = customers[persona];
  await this.cartPage.checkout();
  await this.checkoutStepOnePage.fillGuest(customer);    // ← reuses the POM
  await this.checkoutStepOnePage.continue();
  await this.checkoutStepTwoPage.finish();
});