playwright-cucumber-ts-steps 1.1.7 → 1.1.9

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

@@ -1,2 +1,26 @@
-export {};
+/**
+ * Iterates through a provided Data Table to fill inputs, click elements, or perform assertions.
+ * This step is designed for bulk form interaction without writing repetitive "When I..." steps.
+ *
+ * ```gherkin
+ * When I fill the following "Login" test form data
+ * | #username | tomsmith |
+ * | #password | SuperSecretPassword! |
+ * | #login    | click |
+ * ```
+ *
+ * @param formName - A descriptive name for the form being filled (used for logging only).
+ * @param tableData - A 2D array representing the data table rows (automatically passed by the runner).
+ *
+ * @remarks
+ * **Supported Values in Column 2:**
+ * - `Any String`: Fills the input found by the selector in Column 1.
+ * - `"click"`: Clicks the element.
+ * - `"check"`: Checks a checkbox or radio button.
+ * - `"assert:visible"`: Asserts that the element is visible.
+ * - `"assert:text:EXPECTED"`: Asserts that the element contains the specific text.
+ *
+ * @throws {Error} If the Data Table is missing or invalid.
+ */
+export declare const FillTestFormData: void;
 //# sourceMappingURL=formTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"formTable.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/formTable.ts"],"names":[],"mappings":""}
+{"version":3,"file":"formTable.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/formTable.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,gBAAgB,MA8B5B,CAAC"}

package/dist/backend/actions/formTable.js

@@ -1,12 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const registry_1 = require("../../core/registry");
+exports.FillTestFormData = void 0;
 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) => {
+const registry_1 = require("../../core/registry");
+/**
+ * Iterates through a provided Data Table to fill inputs, click elements, or perform assertions.
+ * This step is designed for bulk form interaction without writing repetitive "When I..." steps.
+ *
+ * ```gherkin
+ * When I fill the following "Login" test form data
+ * | #username | tomsmith |
+ * | #password | SuperSecretPassword! |
+ * | #login    | click |
+ * ```
+ *
+ * @param formName - A descriptive name for the form being filled (used for logging only).
+ * @param tableData - A 2D array representing the data table rows (automatically passed by the runner).
+ *
+ * @remarks
+ * **Supported Values in Column 2:**
+ * - `Any String`: Fills the input found by the selector in Column 1.
+ * - `"click"`: Clicks the element.
+ * - `"check"`: Checks a checkbox or radio button.
+ * - `"assert:visible"`: Asserts that the element is visible.
+ * - `"assert:text:EXPECTED"`: Asserts that the element contains the specific text.
+ *
+ * @throws {Error} If the Data Table is missing or invalid.
+ */
+exports.FillTestFormData = (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', '...'] ]
     // Guard clause: Ensure tableData exists to prevent crashes if user forgets the table
     if (!tableData || !Array.isArray(tableData)) {
         throw new Error(`❌ The step "I fill the following '${formName}' form data" requires a Data Table below it.`);

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

@@ -0,0 +1,54 @@
+/**
+ * Attempts to switch the logical context to a specific iframe.
+ *
+ * ```gherkin
+ * When I switch to frame "#payment-iframe"
+ * ```
+ *
+ * @param selector - The CSS selector of the iframe element.
+ * @remarks
+ * **Limitation:** In the current architecture, "switching" the global page context permanently
+ * is complex. This step currently verifies the frame exists but logs a warning
+ * that subsequent steps might not automatically target this frame unless you use
+ * the specific `I find element ... in frame ...` step.
+ *
+ * @example
+ * When I switch to frame "iframe[name='payment']"
+ */
+export declare const SwitchToFrame: void;
+/**
+ * Finds an element inside a specific iframe and sets it as the active element.
+ * This is the robust way to interact with iframe content (e.g., Stripe forms, embedded videos).
+ *
+ * ```gherkin
+ * When I find element {string} in frame {string}
+ * ```
+ *
+ * @param elementSelector - The selector of the element INSIDE the iframe.
+ * @param frameSelector - The selector of the iframe element itself.
+ *
+ * @example
+ * When I find element "#card-number" in frame "#stripe-element"
+ * Then I type "4242 4242..."
+ */
+export declare const FindElementInFrame: void;
+/**
+ * Waits for a new browser tab (popup) to open.
+ * Useful for validating `target="_blank"` links.
+ *
+ * ```gherkin
+ * When I switch to new tab
+ * ```
+ *
+ * @remarks
+ * **Limitation:** This step verifies that a new tab was opened (e.g., after a click),
+ * but it does **not** swap the global `page` variable for subsequent steps due to runner limitations.
+ * It is primarily used for verification (ensuring a popup appeared).
+ *
+ * @example
+ * When I click on link "Open Dashboard"
+ * And I switch to new tab
+ * # (Implicitly validates the tab opened successfully)
+ */
+export declare const SwitchToNewTab: void;
+//# 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":"AAOA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,MAoBxB,CAAC;AAEH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,MAU9B,CAAC;AAMF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc,MAazB,CAAC"}

package/dist/backend/actions/frames.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchToNewTab = exports.FindElementInFrame = exports.SwitchToFrame = void 0;
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+// =============================
+// IFRAME HANDLING
+// =============================
+/**
+ * Attempts to switch the logical context to a specific iframe.
+ *
+ * ```gherkin
+ * When I switch to frame "#payment-iframe"
+ * ```
+ *
+ * @param selector - The CSS selector of the iframe element.
+ * @remarks
+ * **Limitation:** In the current architecture, "switching" the global page context permanently
+ * is complex. This step currently verifies the frame exists but logs a warning
+ * that subsequent steps might not automatically target this frame unless you use
+ * the specific `I find element ... in frame ...` step.
+ *
+ * @example
+ * When I switch to frame "iframe[name='payment']"
+ */
+exports.SwitchToFrame = (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 ...'`);
+});
+/**
+ * Finds an element inside a specific iframe and sets it as the active element.
+ * This is the robust way to interact with iframe content (e.g., Stripe forms, embedded videos).
+ *
+ * ```gherkin
+ * When I find element {string} in frame {string}
+ * ```
+ *
+ * @param elementSelector - The selector of the element INSIDE the iframe.
+ * @param frameSelector - The selector of the iframe element itself.
+ *
+ * @example
+ * When I find element "#card-number" in frame "#stripe-element"
+ * Then I type "4242 4242..."
+ */
+exports.FindElementInFrame = (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 browser tab (popup) to open.
+ * Useful for validating `target="_blank"` links.
+ *
+ * ```gherkin
+ * When I switch to new tab
+ * ```
+ *
+ * @remarks
+ * **Limitation:** This step verifies that a new tab was opened (e.g., after a click),
+ * but it does **not** swap the global `page` variable for subsequent steps due to runner limitations.
+ * It is primarily used for verification (ensuring a popup appeared).
+ *
+ * @example
+ * When I click on link "Open Dashboard"
+ * And I switch to new tab
+ * # (Implicitly validates the tab opened successfully)
+ */
+exports.SwitchToNewTab = (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,140 @@
+/**
+ * Fills the currently stored (active) input element with specific text.
+ * Supports variable aliases using the "@" prefix.
+ *
+ * ```gherkin
+ * When I type "hello world"
+ * When I type "@storedPassword"
+ * ```
+ *
+ * @param textOrAlias - The text to type OR a variable key prefixed with "@".
+ * @param table - Optional data table for options (e.g., force: true).
+ */
+export declare const TypeText: void;
+/**
+ * Fills the active input with a value explicitly retrieved from the variable store.
+ * Unlike `I type`, this does not require the "@" prefix in the step text.
+ *
+ * ```gherkin
+ * When I type stored "userEmail"
+ * ```
+ *
+ * @param alias - The key of the stored variable.
+ */
+export declare const TypeStoredText: void;
+/**
+ * Types text character-by-character with a 100ms delay.
+ * Useful for testing auto-complete fields or search bars that listen for keystrokes.
+ *
+ * ```gherkin
+ * When I slowly type "Playwright"
+ * ```
+ *
+ * @param text - The text to type sequentially.
+ */
+export declare const TypeSlowly: void;
+/**
+ * Sets the value of an input directly (alias for filling).
+ *
+ * ```gherkin
+ * When I set value "12345"
+ * ```
+ *
+ * @param value - The value to set.
+ */
+export declare const SetInputValue: void;
+/**
+ * Clears the text content of the active input field.
+ *
+ * ```gherkin
+ * When I clear
+ * ```
+ */
+export declare const ClearInput: void;
+/**
+ * Simulates pressing a specific keyboard key on the active element.
+ * Useful for "Enter" to submit, or "ArrowDown" for dropdowns.
+ *
+ * ```gherkin
+ * When I press "Enter"
+ * When I press "Tab"
+ * ```
+ *
+ * @param key - The key name (e.g., "Enter", "Escape", "ArrowDown").
+ */
+export declare const PressKeyOnInput: void;
+/**
+ * Checks the currently active checkbox or radio button.
+ *
+ * ```gherkin
+ * When I check
+ * ```
+ */
+export declare const CheckElement: void;
+/**
+ * Unchecks the currently active checkbox.
+ *
+ * ```gherkin
+ * When I uncheck
+ * ```
+ */
+export declare const UncheckElement: void;
+/**
+ * Legacy alias for `I check`.
+ *
+ * ```gherkin
+ * When I check input
+ * ```
+ */
+export declare const CheckInputAlias: void;
+/**
+ * Legacy alias for `I uncheck`.
+ *
+ * ```gherkin
+ * When I uncheck input
+ * ```
+ */
+export declare const UncheckInputAlias: void;
+/**
+ * Selects an option in a `<select>` dropdown by its visible label.
+ *
+ * ```gherkin
+ * When I select option "California"
+ * ```
+ *
+ * @param option - The visible text label of the option to select.
+ */
+export declare const SelectOption: void;
+/**
+ * Submits the form related to the active element.
+ *
+ * **Logic:**
+ * 1. Tries to find the parent `<form>` of the currently stored element.
+ * 2. If no parent form is found (or no element is active), it finds the *first* form on the page.
+ *
+ * ```gherkin
+ * When I submit
+ * ```
+ */
+export declare const SubmitForm: void;
+/**
+ * Uploads a file to the active file input element.
+ *
+ * ```gherkin
+ * When I select file "data/invoice.pdf"
+ * ```
+ *
+ * @param filePath - The path to the file (relative to the project root).
+ */
+export declare const SelectFile: void;
+/**
+ * Alias for `I select file`.
+ *
+ * ```gherkin
+ * When I upload file "images/logo.png"
+ * ```
+ *
+ * @param filePath - The path to the file.
+ */
+export declare const UploadFileAlias: void;
+//# 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":"AAOA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,MAgBnB,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,MASzB,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,MAIrB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,MAKxB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,MAIrB,CAAC;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,MAI1B,CAAC;AAMH;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,MAKvB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,MAKzB,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,MAK1B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,MAK5B,CAAC;AAMH;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,MAOvB,CAAC;AAMH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,MAoBrB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,MAIrB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,MAI1B,CAAC"}

package/dist/backend/actions/inputs.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadFileAlias = exports.SelectFile = exports.SubmitForm = exports.SelectOption = exports.UncheckInputAlias = exports.CheckInputAlias = exports.UncheckElement = exports.CheckElement = exports.PressKeyOnInput = exports.ClearInput = exports.SetInputValue = exports.TypeSlowly = exports.TypeStoredText = exports.TypeText = void 0;
+const registry_1 = require("../../core/registry");
+const state_1 = require("../utils/state");
+// =============================
+// 1. TYPING & FILLING
+// =============================
+/**
+ * Fills the currently stored (active) input element with specific text.
+ * Supports variable aliases using the "@" prefix.
+ *
+ * ```gherkin
+ * When I type "hello world"
+ * When I type "@storedPassword"
+ * ```
+ *
+ * @param textOrAlias - The text to type OR a variable key prefixed with "@".
+ * @param table - Optional data table for options (e.g., force: true).
+ */
+exports.TypeText = (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}"`);
+});
+/**
+ * Fills the active input with a value explicitly retrieved from the variable store.
+ * Unlike `I type`, this does not require the "@" prefix in the step text.
+ *
+ * ```gherkin
+ * When I type stored "userEmail"
+ * ```
+ *
+ * @param alias - The key of the stored variable.
+ */
+exports.TypeStoredText = (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}"`);
+});
+/**
+ * Types text character-by-character with a 100ms delay.
+ * Useful for testing auto-complete fields or search bars that listen for keystrokes.
+ *
+ * ```gherkin
+ * When I slowly type "Playwright"
+ * ```
+ *
+ * @param text - The text to type sequentially.
+ */
+exports.TypeSlowly = (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 of an input directly (alias for filling).
+ *
+ * ```gherkin
+ * When I set value "12345"
+ * ```
+ *
+ * @param value - The value to set.
+ */
+exports.SetInputValue = (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 text content of the active input field.
+ *
+ * ```gherkin
+ * When I clear
+ * ```
+ */
+exports.ClearInput = (0, registry_1.Step)("I clear", async (page) => {
+    const element = (0, state_1.getActiveElement)(page);
+    await element.fill("");
+    console.log("🧹 Cleared input");
+});
+/**
+ * Simulates pressing a specific keyboard key on the active element.
+ * Useful for "Enter" to submit, or "ArrowDown" for dropdowns.
+ *
+ * ```gherkin
+ * When I press "Enter"
+ * When I press "Tab"
+ * ```
+ *
+ * @param key - The key name (e.g., "Enter", "Escape", "ArrowDown").
+ */
+exports.PressKeyOnInput = (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 currently active checkbox or radio button.
+ *
+ * ```gherkin
+ * When I check
+ * ```
+ */
+exports.CheckElement = (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 currently active checkbox.
+ *
+ * ```gherkin
+ * When I uncheck
+ * ```
+ */
+exports.UncheckElement = (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 for `I check`.
+ *
+ * ```gherkin
+ * When I check input
+ * ```
+ */
+exports.CheckInputAlias = (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 for `I uncheck`.
+ *
+ * ```gherkin
+ * When I uncheck input
+ * ```
+ */
+exports.UncheckInputAlias = (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 in a `<select>` dropdown by its visible label.
+ *
+ * ```gherkin
+ * When I select option "California"
+ * ```
+ *
+ * @param option - The visible text label of the option to select.
+ */
+exports.SelectOption = (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 related to the active element.
+ *
+ * **Logic:**
+ * 1. Tries to find the parent `<form>` of the currently stored element.
+ * 2. If no parent form is found (or no element is active), it finds the *first* form on the page.
+ *
+ * ```gherkin
+ * When I submit
+ * ```
+ */
+exports.SubmitForm = (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 the active file input element.
+ *
+ * ```gherkin
+ * When I select file "data/invoice.pdf"
+ * ```
+ *
+ * @param filePath - The path to the file (relative to the project root).
+ */
+exports.SelectFile = (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 `I select file`.
+ *
+ * ```gherkin
+ * When I upload file "images/logo.png"
+ * ```
+ *
+ * @param filePath - The path to the file.
+ */
+exports.UploadFileAlias = (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}"`);
+});