🔹 Atoms

import { Page, Locator } from "playwright";

export type Atom = (page: Page, label: string) => Locator;

export const field: Atom = (page, label) =>
  page.getByLabel(label);

export const button: Atom = (page, label) =>
  page.getByRole("button", { name: label });

export const link: Atom = (page, label) =>
  page.getByRole("link", { name: label });

export const heading: Atom = (page, label) =>
  page.getByRole("heading", { name: label });

🔹 Molecules

import { Page } from "playwright";
import { field, button, link, heading } from "./atoms";

export async function fillField(page: Page, label: string, value: string) {
  await field(page, label).fill(value);
}

export async function clickButton(page: Page, label: string) {
  await button(page, label).click();
}

export async function followLink(page: Page, label: string) {
  await link(page, label).click();
}

export async function seeHeading(page: Page, label: string) {
  await heading(page, label).waitFor();
}

🔹 Sentences

import { When, Then } from "@cucumber/cucumber";
import { fillField, clickButton, seeHeading } from "../dsl/molecules";

When("I fill the field {string} with {string}", async function (label: string, value: string) {
  await fillField(this.page, label, value);
});

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

Then("I should see the heading {string}", async function (label: string) {
  await seeHeading(this.page, label);
});

🔹 Example Feature

Scenario: Reset password
  When I fill the field "Email" with "[email protected]"
  And I fill the field "Password" with "secret123"
  And I click the "Reset" button
  Then I should see the heading "Password updated"