playwright-cucumber-ts-steps 1.1.6 → 1.1.8

package/dist/backend/actions/form.js

@@ -0,0 +1,185 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const test_1 = require("@playwright/test");
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+/**
+ * Helper to convert raw runner table into Objects (ActionRow[])
+ * Handles whitespace in headers (e.g., "| Target |" -> "Target")
+ */
+function parseDataTable(table) {
+    // Debug Log: See exactly what the runner is passing
+    // console.log("DEBUG: Raw Table Input:", JSON.stringify(table, null, 2));
+    // 1. If it's a Cucumber object (Legacy)
+    if (table && typeof table.hashes === "function") {
+        return table.hashes();
+    }
+    // 2. If it's a raw Array of Arrays (Custom Runner)
+    if (Array.isArray(table) && Array.isArray(table[0])) {
+        // Trim headers to ensure " Target " becomes "Target"
+        const headers = table[0].map((h) => h.trim());
+        const rows = table.slice(1);
+        return rows.map((row) => {
+            const obj = {};
+            headers.forEach((header, index) => {
+                // Map header to row value (and trim the value too for safety)
+                obj[header] = row[index] ? row[index].trim() : "";
+            });
+            return obj;
+        });
+    }
+    return [];
+}
+function resolveValue(page, rawValue) {
+    if (!rawValue)
+        return "";
+    const trimmed = rawValue.trim();
+    // Handle Alias (e.g. @adminPassword)
+    if (trimmed.startsWith("@")) {
+        const alias = trimmed.slice(1);
+        const stored = (0, state_1.getVariable)(page, alias);
+        if (stored === undefined) {
+            console.warn(`⚠️ Warning: Alias @${alias} not found. Using literal value.`);
+            return trimmed;
+        }
+        return typeof stored === "object" ? JSON.stringify(stored) : String(stored);
+    }
+    return trimmed;
+}
+(0, registry_1.Step)("I fill the following {string} form data", async (page, formName, table) => {
+    console.log(`📝 Processing Form: "${formName}"`);
+    // Parse the table
+    const rows = parseDataTable(table);
+    if (rows.length === 0) {
+        console.warn("⚠️ Form data table appears empty or invalid.");
+        return;
+    }
+    for (const row of rows) {
+        // Guard clause: If Target is missing/undefined, skip or throw useful error
+        if (!row.Target) {
+            console.error("❌ Invalid Row Detected (Missing Target):", JSON.stringify(row));
+            continue;
+        }
+        const target = row.Target; // Already trimmed in parser
+        const rawValue = row.Value || "";
+        const resolvedValue = resolveValue(page, rawValue);
+        // ============================================
+        // 1. SPECIAL ACTIONS
+        // ============================================
+        if (target.startsWith("request:")) {
+            const parts = target.replace("request:", "").split(":");
+            const method = parts[0].toUpperCase();
+            const url = parts.slice(1).join(":");
+            const payloadFile = rawValue;
+            const payloadDir = row.PayloadDir || "payload";
+            const filePath = path.resolve(process.cwd(), payloadDir, payloadFile);
+            if (!fs.existsSync(filePath)) {
+                throw new Error(`❌ Payload file not found: ${filePath}`);
+            }
+            const payload = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+            console.log(`📞 API ${method} -> ${url}`);
+            const response = await page.request.fetch(url, {
+                method: method,
+                data: payload,
+            });
+            const responseBody = await response.json();
+            (0, state_1.setVariable)(page, "lastApiResponse", responseBody);
+            (0, state_1.setVariable)(page, "lastStatusCode", response.status());
+            console.log(`✅ Status: ${response.status()}`);
+            if (row.SaveAs) {
+                (0, state_1.setVariable)(page, row.SaveAs, responseBody);
+            }
+            continue;
+        }
+        if (target.startsWith("set:localStorage:")) {
+            const key = target.split(":")[2];
+            await page.evaluate(({ k, v }) => localStorage.setItem(k, v), {
+                k: key,
+                v: resolvedValue,
+            });
+            console.log(`📦 localStorage: Set "${key}"`);
+            continue;
+        }
+        if (target === "wait") {
+            const time = parseInt(rawValue.replace("wait:", ""), 10);
+            if (!isNaN(time)) {
+                console.log(`⏳ Waiting ${time}ms`);
+                await page.waitForTimeout(time);
+            }
+            continue;
+        }
+        // ============================================
+        // 2. UI ELEMENT ACTIONS
+        // ============================================
+        const locator = page.locator(target);
+        // ✅ Assertions
+        if (rawValue.startsWith("assert:")) {
+            const parts = rawValue.split(":");
+            const type = parts[1];
+            const expected = parts.slice(2).join(":");
+            if (type === "visible") {
+                await (0, test_1.expect)(locator).toBeVisible();
+                console.log(`🔎 Asserted visible: ${target}`);
+            }
+            else if (type === "text") {
+                await (0, test_1.expect)(locator).toHaveText(expected || "");
+                console.log(`🔎 Asserted text: ${target}`);
+            }
+            continue;
+        }
+        // ✅ Interactions
+        if (rawValue === "click") {
+            await locator.click();
+            console.log(`👆 Clicked: ${target}`);
+            continue;
+        }
+        if (rawValue === "check") {
+            await locator.check();
+            console.log(`☑️ Checked: ${target}`);
+            continue;
+        }
+        if (rawValue === "select") {
+            await locator.selectOption({ index: 0 });
+            console.log(`🔽 Selected index 0: ${target}`);
+            continue;
+        }
+        // ✅ Default: Fill
+        await locator.fill(resolvedValue);
+        console.log(`✍️ Filled ${target} with "${resolvedValue}"`);
+    }
+});

package/dist/backend/actions/formTable.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const registry_1 = require("../../core/registry");
 const test_1 = require("@playwright/test");
 // CHANGE: Removed the ':' at the end of the string below
-(0, registry_1.Step)("I fill the following {string} form data", async (page, formName, tableData) => {
+(0, registry_1.Step)("I fill the following {string} test form data", async (page, formName, tableData) => {
     console.log(`📝 Processing Form: ${formName}`);
     // The runner passes the table data as the last argument
     // tableData = [ ['#username', 'tomsmith'], ['#password', '...'] ]

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

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

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

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

package/dist/backend/actions/frames.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+// =============================
+// IFRAME HANDLING
+// =============================
+/**
+ * Switches context to a specific iframe by its selector.
+ * Subsequent "I find element" steps will search INSIDE this frame.
+ * Pattern: When I switch to frame "#payment-frame"
+ */
+(0, registry_1.Step)("I switch to frame {string}", async (page, selector) => {
+    const frameElement = page.locator(selector);
+    const frame = frameElement.contentFrame();
+    // We can't actually "switch" the global 'page' object easily in this architecture,
+    // BUT we can store the frame as the "Active Scope" if we extended our state management.
+    //
+    // SIMPLER APPROACH: We just store the frame locator as the "Active Element"
+    // and update our `find` steps to look inside it if it's a frame.
+    // However, for strict BDD, it's often easier to just interact with the frame directly here:
+    if (!frame)
+        throw new Error(`❌ Iframe "${selector}" not found or has no content.`);
+    // Set the frame as the active context for future actions?
+    // This requires updating `src/backend/utils/state.ts` to support `scope`.
+    //
+    // For now, let's just Log it. Frame handling usually requires a dedicated `find inside frame` step.
+    console.log(`⚠️ Switching Frames requires a Scope manager. For now, use 'I find element ... in frame ...'`);
+});
+/**
+ * A specialized finder that looks INSIDE a frame.
+ * Pattern: When I find element "#card-number" in frame "#stripe-iframe"
+ */
+(0, registry_1.Step)("I find element {string} in frame {string}", async (page, elementSelector, frameSelector) => {
+    const frame = page.frameLocator(frameSelector);
+    const element = frame.locator(elementSelector).first();
+    await element.waitFor();
+    (0, state_1.setActiveElement)(page, element);
+    console.log(`🔍 Found element "${elementSelector}" inside frame "${frameSelector}"`);
+});
+// =============================
+// TAB / WINDOW HANDLING
+// =============================
+/**
+ * Waits for a new tab (popup) to open and brings it to front.
+ * Use this after clicking a link with target="_blank".
+ * Pattern: When I switch to new tab
+ */
+(0, registry_1.Step)("I switch to new tab", async (page) => {
+    // This is tricky: Playwright 'page' object passed to steps is usually fixed.
+    // To support multi-tab, we'd need to update the Runner to allow swapping the 'page' reference.
+    //
+    // For a library like this, checking the popup existence is usually enough:
+    console.log("⚠️ Multi-tab support requires Runner updates. Verifying popup event only.");
+    const popup = await page.waitForEvent("popup");
+    await popup.waitForLoadState();
+    console.log(`📑 New tab opened: ${await popup.title()}`);
+    // Note: We cannot easily "swap" the 'page' variable for subsequent steps
+    // without a more complex Global State object.
+});

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

@@ -1,4 +1,14 @@
 import "./navigation";
 import "./interactions";
 import "./formTable";
+import "./click";
+import "./find";
+import "./inputs";
+import "./form";
+import "./mouse";
+import "./misc";
+import "./mobile";
+import "./waits";
+import "./frames";
+import "./keyboard";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,UAAU,CAAC;AAClB,OAAO,QAAQ,CAAC;AAChB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,UAAU,CAAC;AAClB,OAAO,SAAS,CAAC;AACjB,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC"}

package/dist/backend/actions/index.js

@@ -3,3 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./navigation");
 require("./interactions");
 require("./formTable");
+require("./click");
+require("./find");
+require("./inputs");
+require("./form");
+require("./mouse");
+require("./misc");
+require("./mobile");
+require("./waits");
+require("./frames");
+require("./keyboard");

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

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

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

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

package/dist/backend/actions/inputs.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+// =============================
+// 1. TYPING & FILLING
+// =============================
+/**
+ * Types text into the currently stored element.
+ * Supports aliases (e.g. "@password")
+ * Pattern: When I type "hello"
+ */
+(0, registry_1.Step)("I type {string}", async (page, textOrAlias, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table); // Reusing generic options parser
+    let text = textOrAlias;
+    // Handle Alias
+    if (textOrAlias.startsWith("@")) {
+        const alias = textOrAlias.slice(1);
+        const val = (0, state_1.getVariable)(page, alias);
+        if (!val)
+            throw new Error(`❌ Alias @${alias} not found.`);
+        text = val;
+    }
+    await element.fill(text, options);
+    console.log(`⌨️ Filled element with: "${text}"`);
+});
+/**
+ * Types the value stored in a variable (Explicit version).
+ * Pattern: When I type stored "userEmail"
+ */
+(0, registry_1.Step)("I type stored {string}", async (page, alias, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    const val = (0, state_1.getVariable)(page, alias);
+    if (!val)
+        throw new Error(`❌ Alias "${alias}" not found.`);
+    await element.fill(val, options);
+    console.log(`⌨️ Typed stored value from "${alias}"`);
+});
+/**
+ * Slowly types text (mimics real keystrokes).
+ * Pattern: When I slowly type "hello"
+ */
+(0, registry_1.Step)("I slowly type {string}", async (page, text) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.pressSequentially(text, { delay: 100 });
+    console.log(`⌨️ Slowly typed: "${text}"`);
+});
+/**
+ * Sets the value directly (Alias for Type, but semantically "Paste").
+ * Pattern: When I set value "hello"
+ */
+(0, registry_1.Step)("I set value {string}", async (page, value, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    await element.fill(value, options);
+    console.log(`📝 Set value to: "${value}"`);
+});
+/**
+ * Clears the input field.
+ * Pattern: When I clear input
+ */
+(0, registry_1.Step)("I clear", async (page) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.fill("");
+    console.log("🧹 Cleared input");
+});
+/**
+ * Press a keyboard key.
+ * Pattern: When I press "Enter"
+ */
+(0, registry_1.Step)("I press {string}", async (page, key) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.press(key);
+    console.log(`🎹 Pressed key: "${key}"`);
+});
+// =============================
+// 2. CHECKBOXES & RADIOS
+// =============================
+/**
+ * Checks the stored checkbox or radio button.
+ * Pattern: When I check
+ */
+(0, registry_1.Step)("I check", async (page, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    await element.check(options);
+    console.log("✅ Checked element");
+});
+/**
+ * Unchecks the stored checkbox.
+ * Pattern: When I uncheck
+ */
+(0, registry_1.Step)("I uncheck", async (page, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    await element.uncheck(options);
+    console.log("⬜ Unchecked element");
+});
+/**
+ * Legacy Alias: When I check input
+ */
+(0, registry_1.Step)("I check input", async (page, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    await element.check(options);
+    console.log("✅ Checked input");
+});
+/**
+ * Legacy Alias: When I uncheck input
+ */
+(0, registry_1.Step)("I uncheck input", async (page, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    await element.uncheck(options);
+    console.log("⬜ Unchecked input");
+});
+// =============================
+// 3. DROPDOWNS & SELECTS
+// =============================
+/**
+ * Selects an option by visible text/label.
+ * Pattern: When I select option "United States"
+ */
+(0, registry_1.Step)("I select option {string}", async (page, option, table) => {
+    const element = (0, state_1.getActiveElement)(page);
+    const options = (0, state_1.parseClickOptions)(table);
+    // Playwright selects by value or label automatically
+    await element.selectOption({ label: option }, options);
+    console.log(`🔽 Selected option: "${option}"`);
+});
+// =============================
+// 4. FORMS & FILES
+// =============================
+/**
+ * Submits the form containing the current element.
+ * If no element is stored, tries to find the first form on page.
+ * Pattern: When I submit
+ */
+(0, registry_1.Step)("I submit", async (page) => {
+    let formLocator;
+    try {
+        const element = (0, state_1.getActiveElement)(page);
+        // Try to find the parent form of the stored element
+        formLocator = element.locator("xpath=ancestor-or-self::form");
+    }
+    catch (e) {
+        // If no element stored, find first form on page
+        formLocator = page.locator("form").first();
+    }
+    const count = await formLocator.count();
+    if (count === 0) {
+        throw new Error("❌ No form found to submit.");
+    }
+    // Native HTML submit (bypasses some validation, extremely reliable)
+    await formLocator.evaluate((f) => f.submit());
+    console.log("📨 Submitted form");
+});
+/**
+ * Uploads a file to a file input.
+ * Pattern: When I upload file "docs/resume.pdf"
+ */
+(0, registry_1.Step)("I select file {string}", async (page, filePath) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.setInputFiles(filePath);
+    console.log(`📂 Selected file: "${filePath}"`);
+});
+/**
+ * Alias for upload.
+ * Pattern: When I upload file "..."
+ */
+(0, registry_1.Step)("I upload file {string}", async (page, filePath) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.setInputFiles(filePath);
+    console.log(`📂 Uploaded file: "${filePath}"`);
+});

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

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

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

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

package/dist/backend/actions/keyboard.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+// ==================================================
+// KEYBOARD INTERACTIONS
+// ==================================================
+/**
+ * Presses a specific key globally (on the page).
+ * Useful for global shortcuts like closing modals (Escape) or scrolling (PageDown).
+ * Pattern: When I press key "Enter"
+ */
+(0, registry_1.Step)("I press key {string}", async (page, key) => {
+    await page.keyboard.press(key);
+    console.log(`⌨️ Pressed key: "${key}"`);
+});
+/**
+ * Presses a key on the currently stored/active element.
+ * Useful for input fields or buttons.
+ * Pattern: When I press key "Enter" on element
+ */
+(0, registry_1.Step)("I press key {string} on element", async (page, key) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.press(key);
+    console.log(`⌨️ Pressed key "${key}" on stored element`);
+});
+/**
+ * Types text directly using the keyboard (global typing).
+ * Unlike 'I type', this sends keystrokes one by one to the page,
+ * regardless of which element is focused.
+ * Pattern: When I press keys "Hello World"
+ */
+(0, registry_1.Step)("I press keys {string}", async (page, text) => {
+    await page.keyboard.type(text);
+    console.log(`⌨️ Typed keys: "${text}"`);
+});
+/**
+ * Performs a keyboard shortcut (e.g., Ctrl+C, Meta+S).
+ * Pattern: When I press shortcut "Control+C"
+ */
+(0, registry_1.Step)("I press shortcut {string}", async (page, shortcut) => {
+    // Playwright's keyboard.press supports combinations like "Control+KeyC"
+    await page.keyboard.press(shortcut);
+    console.log(`⌨️ Performed shortcut: "${shortcut}"`);
+});
+/**
+ * Holds down a specific key (e.g., Shift) for subsequent actions.
+ * Make sure to release it later!
+ * Pattern: When I hold down key "Shift"
+ */
+(0, registry_1.Step)("I hold down key {string}", async (page, key) => {
+    await page.keyboard.down(key);
+    console.log(`⬇️ Holding down key: "${key}"`);
+});
+/**
+ * Releases a specific key.
+ * Pattern: When I release key "Shift"
+ */
+(0, registry_1.Step)("I release key {string}", async (page, key) => {
+    await page.keyboard.up(key);
+    console.log(`⬆️ Released key: "${key}"`);
+});

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

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

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

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