playwright-cucumber-ts-steps 0.1.5 → 0.1.7

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "playwright-cucumber-ts-steps",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A collection of reusable Playwright step definitions for Cucumber in TypeScript, designed to streamline end-to-end testing across web, API, and mobile applications.",
   "type": "commonjs",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./lib/index.js"
     },
     "./register": {
-      "import": "./dist/register.js"
+      "import": "./lib/register.js"
     }
   },
   "sideEffects": false,
   "typesVersions": {
     "*": {
       "*": [
-        "dist/*"
+        "lib/*"
       ]
     }
   },

package/src/actions/clickSteps.ts

@@ -0,0 +1,207 @@
+// e2e/step_definitions/common/actions/clickSteps.ts
+import { When, DataTable } from "@cucumber/cucumber";
+import { parseClickOptions } from "../helpers/utils/optionsUtils";
+import { CustomWorld } from "../helpers/world";
+
+When("I click", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+  if (!this.element) throw new Error("❌ No stored element to click.");
+  await this.element.click(options);
+  this.log?.("🖱️ Clicked on stored element");
+});
+
+When(
+  "I click on element {string}",
+  async function (this: CustomWorld, selector: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    const element = this.getLocator(selector);
+    await element.click(options);
+    this.element = element;
+    this.log?.(`🖱️ Clicked on element "${selector}"`);
+  }
+);
+When(
+  "I click on button {string}",
+  async function (this: CustomWorld, label: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    const button = await this.page.getByRole("button", { name: label });
+    await button.click(options);
+    this.element = button;
+    this.log?.(`🖱️ Clicked on button "${label}"`);
+  }
+);
+
+When("I click on link {string}", async function (this: CustomWorld, text: string, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+  const link = await this.page.getByRole("link", { name: text });
+  await link.click(options);
+  this.element = link;
+  this.log?.(`✅ Clicked on link "${text}"`);
+});
+
+When(
+  "I click on label {string}",
+  async function (this: CustomWorld, labelText: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    const label = await this.page.getByLabel(labelText);
+    await label.click(options);
+    this.element = label;
+    this.log?.(`🏷️ Clicked on label "${labelText}"`);
+  }
+);
+
+When(
+  "I click on text {string}",
+  async function (this: CustomWorld, rawText: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+
+    let text = rawText;
+    if (rawText.startsWith("@")) {
+      const alias = rawText.slice(1);
+      text = this.data[alias];
+      if (!text) throw new Error(`❌ No value found for alias "@${alias}"`);
+    }
+
+    const locator = this.page.getByText(text, { exact: false });
+    await locator.first().waitFor({ state: "visible", timeout: 5000 });
+    await locator.first().click(options);
+
+    this.element = locator.first();
+    this.log?.(`🖱️ Clicked on text "${text}"`);
+  }
+);
+
+When(
+  "I click on exact text {string}",
+  async function (this: CustomWorld, exactText: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    const locator = this.page.getByText(exactText, { exact: true });
+    await locator.waitFor({ state: "visible", timeout: 5000 });
+    await locator.click(options);
+    this.element = locator;
+    this.log?.(`🖱️ Clicked on exact text "${exactText}"`);
+  }
+);
+
+When("I click all", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+  if (!this.elements) throw new Error("❌ No stored elements to click.");
+  const count = await this.elements.count();
+  if (count === 0) throw new Error("⚠️ No elements found to click.");
+  for (let i = 0; i < count; i++) {
+    const el = this.elements.nth(i);
+    await el.waitFor({ state: "visible", timeout: 5000 });
+    await el.click(options);
+    this.log?.(`🖱️ Clicked element #${i + 1}`);
+  }
+  this.log?.(`✅ Clicked all ${count} elements.`);
+});
+
+When(
+  "I double click on text {string}",
+  async function (this: CustomWorld, text: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    const element = this.element || this.page.getByText(text);
+    await element.dblclick(options);
+    this.log?.(`🖱️ Double-clicked on text "${text}"`);
+  }
+);
+
+When(
+  "I double click position {int} {int}",
+  async function (this: CustomWorld, x: number, y: number, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    await this.page.mouse.dblclick(x, y, options);
+    this.log?.(`🖱️ Double-clicked at (${x}, ${y})`);
+  }
+);
+
+When("I double click", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+  if (!this.element) throw new Error("❌ No stored element to double-click.");
+  await this.element.dblclick(options);
+  this.log?.("🖱️ Double-clicked on stored element");
+});
+
+When("I right click", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+  if (!this.element) throw new Error("❌ No stored element to right-click.");
+  await this.element.click({ button: "right", ...options });
+  this.log?.("🖱️ Right-clicked on stored element");
+});
+
+When(
+  "I right click on text {string}",
+  async function (this: CustomWorld, text: string, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    const element = this.page.getByText(text);
+    await element.click({ button: "right", ...options });
+    this.log?.(`🖱️ Right-clicked on text "${text}"`);
+  }
+);
+
+When(
+  "I right click position {int} {int}",
+  async function (this: CustomWorld, x: number, y: number, ...rest: any[]) {
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseClickOptions(maybeTable) : {};
+    await this.page.mouse.click(x, y, { button: "right", ...options });
+    this.log?.(`🖱️ Right-clicked at (${x}, ${y})`);
+  }
+);
+
+When("I blur", async function (this: CustomWorld) {
+  await this.page.evaluate(() => {
+    const active = document.activeElement;
+    if (active && typeof (active as HTMLElement).blur === "function") {
+      (active as HTMLElement).blur();
+    }
+  });
+  this.log?.("🌀 Blurred active element");
+});
+
+When("I focus", async function (this: CustomWorld) {
+  if (!this.element) throw new Error("❌ No stored element to focus.");
+  await this.element.focus();
+  this.log?.("🎯 Focused stored element");
+});
+
+When("I click all", async function (this: CustomWorld, dataTable?: DataTable) {
+  const options = parseClickOptions(dataTable);
+
+  if (!this.elements) {
+    throw new Error("❌ No elements stored. Use a 'find' step before 'I click all'.");
+  }
+
+  const count = await this.elements.count();
+  if (count === 0) {
+    throw new Error("⚠️ Stored elements are empty. Nothing to click.");
+  }
+
+  for (let i = 0; i < count; i++) {
+    const element = this.elements.nth(i);
+    await element.waitFor({ state: "visible", timeout: 5000 });
+    await element.click(options);
+    this.log?.(`🖱️ Clicked element #${i + 1}`);
+  }
+
+  this.log?.(`✅ Clicked all ${count} stored elements.`);
+});
+When(/^I click on selector "([^"]+)"$/, async function (this: CustomWorld, selector: string) {
+  const locator = this.getLocator(selector);
+  await locator.click();
+  this.log?.(`🖱️ Clicked on selector: ${selector}`);
+});

package/src/actions/cookieSteps.ts

@@ -0,0 +1,29 @@
+// e2e/step_definitions/common/actions/cookieSteps.ts
+import { When } from "@cucumber/cucumber";
+
+When("I clear all cookies", async function () {
+  await this.page.context().clearCookies();
+  this.log("Cleared all cookies");
+});
+
+When("I clear cookies", async function () {
+  await this.page.context().clearCookies();
+  this.log("Cleared cookies (alias)");
+});
+
+When("I clear cookie {string}", async function (name: string) {
+  await this.page.context().addCookies([
+    {
+      name,
+      value: "",
+      domain: new URL(this.page.url()).hostname,
+      path: "/",
+      expires: 0,
+    },
+  ]);
+  this.log(`Cleared cookie: ${name}`);
+});
+When("I log all cookies", async function () {
+  const cookies = await this.page.context().cookies();
+  console.log("Cookies:", cookies);
+});

package/src/actions/debugSteps.ts

@@ -0,0 +1,7 @@
+// e2e/step_definitions/common/actions/debugSteps.ts
+import { When } from "@cucumber/cucumber";
+
+When("I debug with message {string}", async function (message: string) {
+  await this.page.pause();
+  this.log(`Paused test for debugging: ${message}`);
+});

package/src/actions/elementFindSteps.ts

@@ -0,0 +1,256 @@
+import { When } from "@cucumber/cucumber";
+import { expect, Locator } from "@playwright/test";
+import { CustomWorld } from "../helpers/world";
+
+// =============================
+// WHEN I FIND ELEMENT(S)
+// =============================
+
+When("I find element by selector {string}", async function (this: CustomWorld, selector: string) {
+  this.element = this.page.locator(selector);
+  await expect(this.element).toHaveCount(1);
+});
+When("I find link by text {string}", async function (text: string) {
+  this.currentLocator = this.getScope().getByRole("link", { name: text });
+});
+
+When("I find heading by text {string}", async function (text: string) {
+  this.currentLocator = this.getScope().getByRole("heading", { name: text });
+});
+
+When("I find headings by text {string}", async function (text: string) {
+  this.currentLocator = this.getScope().getByRole("heading", { name: text });
+});
+When("I find elements by selector {string}", async function (this: CustomWorld, selector: string) {
+  this.elements = this.page.locator(selector);
+  const count = await this.elements.count();
+  this.log?.(`Found ${count} elements with selector ${selector}`);
+});
+
+When("I find element by text {string}", async function (this: CustomWorld, text: string) {
+  this.element = this.page.getByText(text, { exact: true });
+  await expect(this.element).toHaveCount(1);
+});
+
+When("I find element by title {string}", async function (this: CustomWorld, title: string) {
+  this.element = this.page.getByTitle(title);
+  await expect(this.element).toHaveCount(1);
+});
+
+When("I find element by testid {string}", async function (this: CustomWorld, testid: string) {
+  this.element = this.page.getByTestId(testid);
+  await expect(this.element).toHaveCount(1);
+});
+
+When("I find element by role {string}", async function (this: CustomWorld, role: string) {
+  this.element = this.page.getByRole(role as any);
+  await expect(this.element).toHaveCount(1);
+});
+
+When(
+  "I find element by placeholder text {string}",
+  async function (this: CustomWorld, text: string) {
+    this.element = this.page.getByPlaceholder(text);
+    await expect(this.element).toHaveCount(1);
+  }
+);
+
+When("I find element by label text {string}", async function (this: CustomWorld, label: string) {
+  this.element = this.page.getByLabel(label);
+  await expect(this.element).toHaveCount(1);
+});
+When("I find elements by label text {string}", async function (label: string) {
+  this.currentLocator = this.getScope().getByLabel(label);
+});
+When("I find element by alt text {string}", async function (this: CustomWorld, alt: string) {
+  this.element = this.page.getByAltText(alt);
+  await expect(this.element).toHaveCount(1);
+});
+
+When("I find element by name {string}", async function (this: CustomWorld, name: string) {
+  this.element = this.page.getByRole("textbox", { name });
+  await expect(this.element).toHaveCount(1);
+});
+When("I find elements by name {string}", async function (name: string) {
+  this.currentLocator = this.getScope().locator(`[name="${name}"]`);
+});
+
+When("I find buttons by text {string}", async function (this: CustomWorld, buttonText: string) {
+  // 🧠 Resolve alias
+  if (buttonText.startsWith("@")) {
+    const alias = buttonText.slice(1);
+    buttonText = this.data?.[alias];
+    if (!buttonText) {
+      throw new Error(`No value found for alias "@${alias}"`);
+    }
+  }
+
+  // 🔍 Locate all matching buttons
+  this.elements = this.page.getByRole("button", {
+    name: buttonText,
+    exact: false,
+  });
+
+  this.log?.(`🔘 Stored all buttons matching text "${buttonText}"`);
+});
+// =============================
+// WHEN I GET ELEMENT(S)
+// =============================
+
+When("I get element by selector {string}", async function (this: CustomWorld, selector: string) {
+  this.element = this.page.locator(selector).first();
+});
+
+When("I get elements by selector {string}", async function (this: CustomWorld, selector: string) {
+  this.elements = this.page.locator(selector);
+});
+
+When("I get first element", async function (this: CustomWorld) {
+  if (!this.elements) throw new Error("No element collection found");
+  this.element = this.elements.first();
+});
+
+When("I get last element", async function (this: CustomWorld) {
+  if (!this.elements) throw new Error("No element collection found");
+  this.element = this.elements.last();
+});
+
+When(/^I get (\d+)(?:st|nd|rd|th) element$/, async function (this: CustomWorld, index: number) {
+  if (!this.elements) throw new Error("No elements stored to pick from");
+  const count = await this.elements.count();
+  if (index < 1 || index > count) {
+    throw new Error(`Cannot get element ${index} — only ${count} found`);
+  }
+  this.element = this.elements.nth(index - 1);
+  this.log?.(`Selected ${index} element from stored elements`);
+});
+
+When("I find elements by role {string}", async function (this: CustomWorld, role: string) {
+  const locator = this.page.getByRole(role as any);
+  const count = await locator.count();
+
+  if (count === 0) {
+    throw new Error(`No elements found with role "${role}"`);
+  }
+
+  this.elements = locator;
+  this.log?.(`Stored ${count} elements with role "${role}"`);
+});
+
+When("I get {int}rd element", async function (this: CustomWorld, index: number) {
+  if (!this.elements) throw new Error("No element collection found");
+  this.element = this.elements.nth(index);
+});
+
+When("I get focused element", async function (this: CustomWorld) {
+  this.element = (await this.page.evaluateHandle(
+    () => document.activeElement
+  )) as unknown as Locator;
+});
+When("I store element text as {string}", async function (this: CustomWorld, alias: string) {
+  const element = this.element;
+  if (!element) throw new Error("No element selected");
+  const text = await element.textContent();
+  this.data[alias] = text?.trim();
+  this.log?.(`Stored text "${text}" as "${alias}"`);
+});
+When("I find textarea by label text {string}", async function (this: CustomWorld, label: string) {
+  this.element = this.page.getByLabel(label);
+  this.log?.(`Stored textarea with label "${label}"`);
+});
+When(
+  "I find textarea by placeholder text {string}",
+  async function (this: CustomWorld, placeholder: string) {
+    this.element = this.page.getByPlaceholder(placeholder);
+    this.log?.(`Stored textarea with placeholder "${placeholder}"`);
+  }
+);
+When("I find textareas by label text {string}", async function (this: CustomWorld, label: string) {
+  this.elements = this.page.locator(`label:has-text("${label}") + textarea`);
+  this.log?.(`Stored multiple textareas with label "${label}"`);
+});
+When("I find textarea by name {string}", async function (this: CustomWorld, name: string) {
+  this.element = this.page.locator(`textarea[name="${name}"]`);
+  this.log?.(`Stored textarea with name "${name}"`);
+});
+When("I find textareas by ID {string}", async function (this: CustomWorld, id: string) {
+  this.elements = this.page.locator(`textarea#${id}`);
+  this.log?.(`Stored multiple textareas with ID "${id}"`);
+});
+When("I find input by ID {string}", async function (this: CustomWorld, id: string) {
+  this.element = this.page.locator(`input#${id}`);
+  this.log?.(`Stored input with ID "${id}"`);
+});
+When("I find inputs by ID {string}", async function (this: CustomWorld, id: string) {
+  this.elements = this.page.locator(`input#${id}`);
+  this.log?.(`Stored multiple inputs with ID "${id}"`);
+});
+When(
+  "I find textareas by placeholder text {string}",
+  async function (this: CustomWorld, placeholder: string) {
+    this.elements = this.page.locator(`textarea[placeholder="${placeholder}"]`);
+    this.log?.(`Stored multiple textareas with placeholder "${placeholder}"`);
+  }
+);
+When("I find input by label text {string}", async function (this: CustomWorld, label: string) {
+  this.element = this.page.getByLabel(label);
+  this.log?.(`Stored input with label "${label}"`);
+});
+When("I find input by name {string}", async function (this: CustomWorld, name: string) {
+  this.element = this.page.locator(`input[name="${name}"]`);
+  this.log?.(`Stored input with name "${name}"`);
+});
+When(
+  "I find input by placeholder text {string}",
+  async function (this: CustomWorld, placeholder: string) {
+    this.element = this.page.getByPlaceholder(placeholder);
+    this.log?.(`Stored input with placeholder "${placeholder}"`);
+  }
+);
+When("I find inputs by name {string}", async function (this: CustomWorld, name: string) {
+  this.elements = this.page.locator(`input[name="${name}"]`);
+  this.log?.(`Stored multiple inputs with name "${name}"`);
+});
+When(
+  "I find inputs by placeholder text {string}",
+  async function (this: CustomWorld, placeholder: string) {
+    this.elements = this.page.locator(`input[placeholder="${placeholder}"]`);
+    this.log?.(`Stored multiple inputs with placeholder "${placeholder}"`);
+  }
+);
+When("I find inputs by label text {string}", async function (this: CustomWorld, label: string) {
+  this.elements = this.page.locator(`label:has-text("${label}") + input`);
+  this.log?.(`Stored multiple inputs with label "${label}"`);
+});
+When("I find inputs by display value {string}", async function (this: CustomWorld, value: string) {
+  // 🧠 Handle alias
+  if (value.startsWith("@")) {
+    const alias = value.slice(1);
+    value = this.data?.[alias];
+    if (!value) {
+      throw new Error(`No value found for alias "@${alias}"`);
+    }
+  }
+
+  // 🔍 Find all matching inputs
+  this.elements = this.page.locator(`input[value="${value}"]`);
+
+  this.log?.(`📦 Stored multiple inputs with display value "${value}"`);
+});
+When("I find input by display value {string}", async function (this: CustomWorld, value: string) {
+  // 🧠 Handle alias
+  if (value.startsWith("@")) {
+    const alias = value.slice(1);
+    value = this.data?.[alias];
+    if (!value) {
+      throw new Error(`No value found for alias "@${alias}"`);
+    }
+  }
+
+  // 🎯 Try to find input element with matching display value
+  const locator = this.page.locator(`input[value="${value}"]`);
+
+  await expect(locator).toBeVisible({ timeout: 5000 });
+  this.element = locator;
+  this.log?.(`🔍 Found input with value: "${value}"`);
+});