playwright-cucumber-ts-steps 1.1.6 → 1.1.8

package/README.md

@@ -104,34 +104,29 @@ npx playwright test
 
 We support a **Friendly Syntax** for filtering tests via the `TAGS` environment variable.
 
-| Logic   | Symbol  | Example          | Description                                           |
-| ------- | ------- | ---------------- | ----------------------------------------------------- |
-| **OR**  | `,`     | `@login,@signup` | Run tests that have `@login` **OR** `@signup`.        |
-| **AND** | `+`     | `@smoke+@api`    | Run tests that have **BOTH** `@smoke` **AND** `@api`. |
-| **MIX** | `,` `+` | `@a+@b, @c`      | Run tests with (`@a` AND `@b`) **OR** just `@c`.      |
+| Logic   | Symbol | Example          | Description                                      |
+| ------- | ------ | ---------------- | ------------------------------------------------ |
+| **AND** | `,`    | `@login,@signup` | Run tests that have `@login` **AND** `@signup`.  |
+|         |
+| **MIX** | `,`    | `@a,@b, @c`      | Run tests with (`@a` AND `@b`) **OR** just `@c`. |
 
 **Usage:**
 
 ```bash
 # Run only smoke tests
 TAGS='@smoke' npx playwright test
+OR
 npx playwright test -g "@smoke"
 
 # Run smoke tests that are also critical
-TAGS='@smoke+@critical' npx playwright test
-npx playwright test -g "(?=.*@smoke)(?=.*@critical)"
-
-# Run login OR regression tests
-TAGS='@login,@regression' npx playwright test
-
-npx playwright test -g "@login|@regression"
+TAGS='@smoke,@critical' npx playwright test
+OR
+npx playwright test -g "@smoke|@critical"
 
 ```
 
 _(On Windows PowerShell, use `$env:TAGS="@smoke"; npx playwright test`)_
 
-````
-
 **In your Test Runner (`tests/bdd.spec.ts`):**
 
 ```typescript
@@ -142,7 +137,7 @@ import { runTests } from "playwright-cucumber-ts-steps";
 
 // OPTION 2: Run only Smoke tests
 runTests("features/*.feature", { tags: "@smoke" });
-````
+```
 
 ---
 

package/dist/backend/actions/click.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=click.d.ts.map

package/dist/backend/actions/click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/click.ts"],"names":[],"mappings":""}

package/dist/backend/actions/click.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+/**
+ * Clicks on the previously stored element.
+ * Pattern: When I click
+ */
+(0, registry_1.Step)("I click", async (page, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const element = (0, state_1.getActiveElement)(page);
+    await element.click(options);
+    console.log("🖱️ Clicked on stored element");
+});
+/**
+ * Clicks on an element matching the given selector.
+ * Pattern: When I click on element {string}
+ */
+(0, registry_1.Step)("I click on element {string}", async (page, selector, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const element = page.locator(selector);
+    await element.click(options);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🖱️ Clicked on element "${selector}"`);
+});
+/**
+ * Clicks on a button with the given label.
+ * Pattern: When I click on button {string}
+ */
+(0, registry_1.Step)("I click on button {string}", async (page, label, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const button = page.getByRole("button", { name: label });
+    await button.click(options);
+    (0, state_1.setActiveElement)(page, button);
+    console.log(`🖱️ Clicked on button "${label}"`);
+});
+/**
+ * Clicks on a link with the given text.
+ * Pattern: When I click on link {string}
+ */
+(0, registry_1.Step)("I click on link {string}", async (page, text, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const link = page.getByRole("link", { name: text });
+    await link.click(options);
+    (0, state_1.setActiveElement)(page, link);
+    console.log(`✅ Clicked on link "${text}"`);
+});
+/**
+ * Clicks on a label with the given text.
+ * Pattern: When I click on label {string}
+ */
+(0, registry_1.Step)("I click on label {string}", async (page, labelText, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const label = page.getByLabel(labelText);
+    await label.click(options);
+    (0, state_1.setActiveElement)(page, label);
+    console.log(`🏷️ Clicked on label "${labelText}"`);
+});
+/**
+ * Clicks on an element containing the given text (fuzzy match).
+ * Supports aliasing with @alias.
+ * Pattern: When I click on text {string}
+ */
+(0, registry_1.Step)("I click on text {string}", async (page, rawText, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    let text = rawText;
+    // Handle Alias (e.g., "@username")
+    if (rawText.startsWith("@")) {
+        const aliasKey = rawText.slice(1);
+        const storedValue = (0, state_1.getVariable)(page, aliasKey);
+        if (!storedValue) {
+            throw new Error(`❌ No value found for alias "@${aliasKey}"`);
+        }
+        text = storedValue;
+    }
+    const locator = page.getByText(text, { exact: false }).first();
+    await locator.waitFor({ state: "visible", timeout: 5000 });
+    await locator.click(options);
+    (0, state_1.setActiveElement)(page, locator);
+    console.log(`🖱️ Clicked on text "${text}"`);
+});
+/**
+ * Clicks on an element containing the exact given text.
+ * Pattern: When I click on exact text {string}
+ */
+(0, registry_1.Step)("I click on exact text {string}", async (page, exactText, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const locator = page.getByText(exactText, { exact: true });
+    await locator.waitFor({ state: "visible", timeout: 5000 });
+    await locator.click(options);
+    (0, state_1.setActiveElement)(page, locator);
+    console.log(`🖱️ Clicked on exact text "${exactText}"`);
+});
+/**
+ * Clicks all previously stored elements.
+ * Pattern: When I click all
+ */
+(0, registry_1.Step)("I click all", async (page, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const elements = (0, state_1.getActiveElements)(page);
+    const count = await elements.count();
+    if (count === 0)
+        throw new Error("⚠️ No elements found to click.");
+    for (let i = 0; i < count; i++) {
+        const el = elements.nth(i);
+        await el.waitFor({ state: "visible", timeout: 5000 });
+        await el.click(options);
+        console.log(`🖱️ Clicked element #${i + 1}`);
+    }
+    console.log(`✅ Clicked all ${count} elements.`);
+});
+/**
+ * Double-clicks on the previously stored element.
+ * Pattern: When I double click
+ */
+(0, registry_1.Step)("I double click", async (page, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const element = (0, state_1.getActiveElement)(page);
+    await element.dblclick(options);
+    console.log("🖱️ Double-clicked on stored element");
+});
+/**
+ * Double-clicks on an element containing the given text.
+ * Pattern: When I double click on text {string}
+ */
+(0, registry_1.Step)("I double click on text {string}", async (page, text, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const element = page.getByText(text).first();
+    await element.dblclick(options);
+    console.log(`🖱️ Double-clicked on text "${text}"`);
+});
+/**
+ * Double-clicks at the given page coordinates.
+ * Pattern: When I double click position {int} {int}
+ */
+(0, registry_1.Step)("I double click position {int} {int}", async (page, x, y, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    await page.mouse.dblclick(x, y, options);
+    console.log(`🖱️ Double-clicked at (${x}, ${y})`);
+});
+/**
+ * Right-clicks on the previously stored element.
+ * Pattern: When I right click
+ */
+(0, registry_1.Step)("I right click", async (page, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const element = (0, state_1.getActiveElement)(page);
+    await element.click({ button: "right", ...options });
+    console.log("🖱️ Right-clicked on stored element");
+});
+/**
+ * Right-clicks on an element containing the given text.
+ * Pattern: When I right click on text {string}
+ */
+(0, registry_1.Step)("I right click on text {string}", async (page, text, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    const element = page.getByText(text).first();
+    await element.click({ button: "right", ...options });
+    console.log(`🖱️ Right-clicked on text "${text}"`);
+});
+/**
+ * Right-clicks at the given page coordinates.
+ * Pattern: When I right click position {int} {int}
+ */
+(0, registry_1.Step)("I right click position {int} {int}", async (page, x, y, table) => {
+    const options = (0, state_1.parseClickOptions)(table);
+    await page.mouse.click(x, y, { button: "right", ...options });
+    console.log(`🖱️ Right-clicked at (${x}, ${y})`);
+});
+/**
+ * Clicks on an element matching the given selector (Regex Version).
+ * Pattern: I click on selector "..."
+ */
+(0, registry_1.Step)(/^I click on selector "([^"]+)"$/, async (page, selector) => {
+    const locator = page.locator(selector);
+    await locator.click();
+    (0, state_1.setActiveElement)(page, locator);
+    console.log(`🖱️ Clicked on selector: ${selector}`);
+});

package/dist/backend/actions/find.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=find.d.ts.map

package/dist/backend/actions/find.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"find.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/find.ts"],"names":[],"mappings":""}

package/dist/backend/actions/find.js

@@ -0,0 +1,291 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+// =============================
+// 1. GENERAL FINDING (Single)
+// =============================
+/**
+ * Finds an element by CSS selector.
+ * Pattern: When I find element by selector ".my-class"
+ */
+(0, registry_1.Step)("I find element by selector {string}", async (page, selector) => {
+    const element = page.locator(selector);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by selector: "${selector}"`);
+});
+/**
+ * Finds an element by exact text.
+ * Pattern: When I find element by text "Submit"
+ */
+(0, registry_1.Step)("I find element by text {string}", async (page, text) => {
+    const element = page.getByText(text, { exact: true });
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by exact text: "${text}"`);
+});
+/**
+ * Finds an element by title attribute.
+ * Pattern: When I find element by title "Tooltip"
+ */
+(0, registry_1.Step)("I find element by title {string}", async (page, title) => {
+    const element = page.getByTitle(title);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by title: "${title}"`);
+});
+/**
+ * Finds an element by test id (data-testid).
+ * Pattern: When I find element by testid "submit-btn"
+ */
+(0, registry_1.Step)("I find element by testid {string}", async (page, testid) => {
+    const element = page.getByTestId(testid);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by testid: "${testid}"`);
+});
+/**
+ * Finds an element by ARIA role.
+ * Pattern: When I find element by role "button"
+ */
+(0, registry_1.Step)("I find element by role {string}", async (page, role) => {
+    const element = page.getByRole(role);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by role: "${role}"`);
+});
+/**
+ * Finds an element by placeholder.
+ * Pattern: When I find element by placeholder text "Search..."
+ */
+(0, registry_1.Step)("I find element by placeholder text {string}", async (page, text) => {
+    const element = page.getByPlaceholder(text);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by placeholder: "${text}"`);
+});
+/**
+ * Finds an element by label.
+ * Pattern: When I find element by label text "Username"
+ */
+(0, registry_1.Step)("I find element by label text {string}", async (page, label) => {
+    const element = page.getByLabel(label);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by label: "${label}"`);
+});
+/**
+ * Finds an element by alt text (images).
+ * Pattern: When I find element by alt text "Logo"
+ */
+(0, registry_1.Step)("I find element by alt text {string}", async (page, alt) => {
+    const element = page.getByAltText(alt);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by alt text: "${alt}"`);
+});
+// =============================
+// 2. SPECIFIC ELEMENTS (Link/Heading/Name)
+// =============================
+/**
+ * Finds a link by text.
+ * Pattern: When I find link by text "Home"
+ */
+(0, registry_1.Step)("I find link by text {string}", async (page, text) => {
+    const element = page.getByRole("link", { name: text });
+    // We use .first() here because links often have duplicates (e.g. footer/header)
+    // but strict mode usually prefers uniqueness.
+    (0, state_1.setActiveElement)(page, element.first());
+    console.log(`🔍 Found link by text: "${text}"`);
+});
+/**
+ * Finds a heading by text.
+ * Pattern: When I find heading by text "Welcome"
+ */
+(0, registry_1.Step)("I find heading by text {string}", async (page, text) => {
+    const element = page.getByRole("heading", { name: text });
+    (0, state_1.setActiveElement)(page, element.first());
+    console.log(`🔍 Found heading by text: "${text}"`);
+});
+/**
+ * Finds an element by name attribute.
+ * Pattern: When I find element by name "email"
+ */
+(0, registry_1.Step)("I find element by name {string}", async (page, name) => {
+    // Broad selector for name attribute
+    const element = page.locator(`[name="${name}"]`);
+    await (0, test_1.expect)(element).toHaveCount(1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element by name: "${name}"`);
+});
+// =============================
+// 3. GENERAL FINDING (Multiple)
+// =============================
+/**
+ * Finds all elements by selector.
+ * Pattern: When I find elements by selector ".items"
+ */
+(0, registry_1.Step)("I find elements by selector {string}", async (page, selector) => {
+    const elements = page.locator(selector);
+    const count = await elements.count();
+    (0, state_1.setActiveElements)(page, elements);
+    console.log(`🔍 Found ${count} elements with selector: "${selector}"`);
+});
+/**
+ * Finds all headings by text.
+ * Pattern: When I find headings by text "Chapter"
+ */
+(0, registry_1.Step)("I find headings by text {string}", async (page, text) => {
+    const elements = page.getByRole("heading", { name: text });
+    (0, state_1.setActiveElements)(page, elements);
+    console.log(`🔍 Found headings matching "${text}"`);
+});
+/**
+ * Finds all buttons by text (supports alias).
+ * Pattern: When I find buttons by text "Save"
+ */
+(0, registry_1.Step)("I find buttons by text {string}", async (page, text) => {
+    let searchText = text;
+    // Handle Alias
+    if (text.startsWith("@")) {
+        const alias = text.slice(1);
+        const val = (0, state_1.getVariable)(page, alias);
+        if (!val)
+            throw new Error(`❌ No value found for alias "@${alias}"`);
+        searchText = val;
+    }
+    const elements = page.getByRole("button", { name: searchText });
+    (0, state_1.setActiveElements)(page, elements);
+    console.log(`🔍 Found buttons matching "${searchText}"`);
+});
+// =============================
+// 4. GET / REFINE SELECTION
+// =============================
+/**
+ * Gets the first element from a stored list.
+ * Pattern: When I get first element
+ */
+(0, registry_1.Step)("I get first element", async (page) => {
+    const elements = (0, state_1.getActiveElements)(page);
+    const element = elements.first();
+    (0, state_1.setActiveElement)(page, element);
+    console.log("👉 Selected FIRST element");
+});
+/**
+ * Gets the last element from a stored list.
+ * Pattern: When I get last element
+ */
+(0, registry_1.Step)("I get last element", async (page) => {
+    const elements = (0, state_1.getActiveElements)(page);
+    const element = elements.last();
+    (0, state_1.setActiveElement)(page, element);
+    console.log("👉 Selected LAST element");
+});
+/**
+ * Gets the nth element (1-based index).
+ * Pattern: When I get 2nd element
+ */
+(0, registry_1.Step)(/^I get (\d+)(?:st|nd|rd|th) element$/, async (page, indexStr) => {
+    const index = parseInt(indexStr, 10);
+    const elements = (0, state_1.getActiveElements)(page);
+    const count = await elements.count();
+    if (index < 1 || index > count) {
+        throw new Error(`❌ Cannot get element #${index} — only ${count} found.`);
+    }
+    // Playwright is 0-based, Gherkin is 1-based
+    const element = elements.nth(index - 1);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`👉 Selected element #${index}`);
+});
+/**
+ * Gets the currently focused element.
+ * Pattern: When I get focused element
+ */
+(0, registry_1.Step)("I get focused element", async (page) => {
+    // Use CSS selector for focused element
+    const element = page.locator("*:focus");
+    (0, state_1.setActiveElement)(page, element);
+    console.log("👉 Selected FOCUSED element");
+});
+// =============================
+// 5. INPUTS & TEXTAREAS SPECIFICS
+// =============================
+/**
+ * Finds input by ID.
+ * Pattern: When I find input by ID "username"
+ */
+(0, registry_1.Step)("I find input by ID {string}", async (page, id) => {
+    const element = page.locator(`input#${id}`);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found input by ID: "${id}"`);
+});
+/**
+ * Finds input by name.
+ * Pattern: When I find input by name "email"
+ */
+(0, registry_1.Step)("I find input by name {string}", async (page, name) => {
+    const element = page.locator(`input[name="${name}"]`);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found input by name: "${name}"`);
+});
+/**
+ * Finds input by placeholder.
+ * Pattern: When I find input by placeholder text "Enter email"
+ */
+(0, registry_1.Step)("I find input by placeholder text {string}", async (page, placeholder) => {
+    const element = page.locator(`input[placeholder="${placeholder}"]`);
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found input by placeholder: "${placeholder}"`);
+});
+/**
+ * Finds input by display value (supports alias).
+ * Pattern: When I find input by display value "John Doe"
+ */
+(0, registry_1.Step)("I find input by display value {string}", async (page, value) => {
+    let searchValue = value;
+    if (value.startsWith("@")) {
+        const alias = value.slice(1);
+        const val = (0, state_1.getVariable)(page, alias);
+        if (!val)
+            throw new Error(`❌ No value found for alias "@${alias}"`);
+        searchValue = val;
+    }
+    const element = page.locator(`input[value="${searchValue}"]`);
+    await (0, test_1.expect)(element).toBeVisible();
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found input with value: "${searchValue}"`);
+});
+/**
+ * Finds textarea by label.
+ * Pattern: When I find textarea by label text "Comments"
+ */
+(0, registry_1.Step)("I find textarea by label text {string}", async (page, label) => {
+    const element = page.getByLabel(label).locator("textarea").first();
+    // Fallback if strict label matching fails, try locator strategy
+    const count = await element.count();
+    if (count === 0) {
+        // Try generic label finding
+        const altElement = page.getByLabel(label);
+        (0, state_1.setActiveElement)(page, altElement);
+    }
+    else {
+        (0, state_1.setActiveElement)(page, element);
+    }
+    console.log(`🔍 Found textarea by label: "${label}"`);
+});
+// =============================
+// 6. UTILITIES (Store Text)
+// =============================
+/**
+ * Stores the text of the current element into a variable.
+ * Pattern: When I store element text as "myVar"
+ */
+(0, registry_1.Step)("I store element text as {string}", async (page, alias) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const text = await element.textContent();
+    const cleanText = text?.trim() || "";
+    (0, state_1.setVariable)(page, alias, cleanText);
+    console.log(`💾 Stored text "${cleanText}" as variable "@${alias}"`);
+});

package/dist/backend/actions/form.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=form.d.ts.map

package/dist/backend/actions/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/form.ts"],"names":[],"mappings":""}