playwright-cucumber-ts-steps 1.3.0 → 1.3.2

package/dist/backend/actions/inputs.js

@@ -183,21 +183,21 @@ async function uploadFile(page, filePath) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I type {string}", typeText, "When");
-(0, registry_1.Step)("I fill {string}", typeText, "When");
-(0, registry_1.Step)("I type stored {string}", typeStoredText, "When");
-(0, registry_1.Step)("I fill stored {string}", typeStoredText, "When");
-(0, registry_1.Step)("I slowly type {string}", typeSlowly, "When");
-(0, registry_1.Step)("I slowly fill {string}", typeSlowly, "When");
-(0, registry_1.Step)("I set value {string}", setInputValue, "When");
-(0, registry_1.Step)("I clear", clearInput, "When");
-(0, registry_1.Step)("I press {string}", pressKeyOnInput, "When");
-(0, registry_1.Step)("I check", checkElement, "When");
-(0, registry_1.Step)("I uncheck", uncheckElement, "When");
-(0, registry_1.Step)("I check input", checkElement, "When");
-(0, registry_1.Step)("I uncheck input", uncheckElement, "When");
-(0, registry_1.Step)("I {string} {int}(?:st|nd|rd|th) selector {string}", checkNthElementBySelector, "When");
-(0, registry_1.Step)("I select option {string}", selectOption, "When");
-(0, registry_1.Step)("I submit", submitForm, "When");
-(0, registry_1.Step)("I select file {string}", selectFile, "When");
-(0, registry_1.Step)("I upload file {string}", uploadFile, "When");
+(0, registry_1.Step)("I pw type {string}", typeText, "When");
+(0, registry_1.Step)("I pw fill {string}", typeText, "When");
+(0, registry_1.Step)("I pw type stored {string}", typeStoredText, "When");
+(0, registry_1.Step)("I pw fill stored {string}", typeStoredText, "When");
+(0, registry_1.Step)("I pw slowly type {string}", typeSlowly, "When");
+(0, registry_1.Step)("I pw slowly fill {string}", typeSlowly, "When");
+(0, registry_1.Step)("I pw set value {string}", setInputValue, "When");
+(0, registry_1.Step)("I pw clear", clearInput, "When");
+(0, registry_1.Step)("I pw press {string}", pressKeyOnInput, "When");
+(0, registry_1.Step)("I pw check", checkElement, "When");
+(0, registry_1.Step)("I pw uncheck", uncheckElement, "When");
+(0, registry_1.Step)("I pw check input", checkElement, "When");
+(0, registry_1.Step)("I pw uncheck input", uncheckElement, "When");
+(0, registry_1.Step)("I pw {string} {int}(?:st|nd|rd|th) selector {string}", checkNthElementBySelector, "When");
+(0, registry_1.Step)("I pw select option {string}", selectOption, "When");
+(0, registry_1.Step)("I pw submit", submitForm, "When");
+(0, registry_1.Step)("I pw select file {string}", selectFile, "When");
+(0, registry_1.Step)("I pw upload file {string}", uploadFile, "When");

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

@@ -30,10 +30,19 @@ export declare function fillElement(page: any, selectorKey: string, value: strin
  */
 export declare function pressKeyGlobal(page: any, key: string): Promise<void>;
 /**
- * Pauses the test execution for a fixed amount of time.
- * Avoid using this unless absolutely necessary; prefer dynamic waits instead.
- * @example When I wait for 5000 milliseconds
- * @param ms - The duration to wait in milliseconds.
+ * Drags one element and drops it onto another.
+ * Supports fixtures for reusable selectors.
+ * @example When I drag "droppable.draggable" to "droppable.dropZone"
+ * @param sourceKey - The selector of the element to drag.
+ * @param targetKey - The selector of the drop target element.
+ */
+export declare function dragElementTo(page: any, sourceKey: string, targetKey: string): Promise<void>;
+/**
+ * Continues a drag operation from a previously selected element to a target.
+ * This is meant to be used after selecting an element to drag.
+ * Supports fixtures for reusable selectors.
+ * @example And I drag to "droppable.dropZone"
+ * @param targetKey - The selector of the drop target element.
  */
-export declare function hardWait(page: any, ms: number): Promise<void>;
+export declare function dragToTarget(page: any, targetKey: string): Promise<void>;
 //# sourceMappingURL=interactions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/interactions.ts"],"names":[],"mappings":"AAWA;;;;;GAKG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMhF;AAED;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMrF;AAED;;;;;;GAMG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAM9F;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAG1E;AAED;;;;;GAKG;AACH,wBAAsB,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAGnE"}
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/interactions.ts"],"names":[],"mappings":"AAWA;;;;;GAKG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMhF;AAED;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMrF;AAED;;;;;;GAMG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAM9F;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAG1E;AAED;;;;;;GAMG;AACH,wBAAsB,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAOlG;AAED;;;;;;GAMG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAW9E"}

package/dist/backend/actions/interactions.js

@@ -1,10 +1,44 @@
 "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 });
 exports.clickElement = clickElement;
 exports.forceClickElement = forceClickElement;
 exports.fillElement = fillElement;
 exports.pressKeyGlobal = pressKeyGlobal;
-exports.hardWait = hardWait;
+exports.dragElementTo = dragElementTo;
+exports.dragToTarget = dragToTarget;
 //src/backend/actions/interactions.ts
 const registry_1 = require("../../core/registry");
 const fixtures_1 = require("../utils/fixtures");
@@ -61,20 +95,42 @@ async function pressKeyGlobal(page, key) {
     console.log(`🎹 Pressed global key: "${key}"`);
 }
 /**
- * Pauses the test execution for a fixed amount of time.
- * Avoid using this unless absolutely necessary; prefer dynamic waits instead.
- * @example When I wait for 5000 milliseconds
- * @param ms - The duration to wait in milliseconds.
+ * Drags one element and drops it onto another.
+ * Supports fixtures for reusable selectors.
+ * @example When I drag "droppable.draggable" to "droppable.dropZone"
+ * @param sourceKey - The selector of the element to drag.
+ * @param targetKey - The selector of the drop target element.
  */
-async function hardWait(page, ms) {
-    console.warn(`⚠️ Hard wait detected (${ms}ms). Consider replacing with dynamic waits.`);
-    await page.waitForTimeout(ms);
+async function dragElementTo(page, sourceKey, targetKey) {
+    const selectors = (0, fixtures_1.loadFixture)("selectors.json");
+    const source = (0, fixtures_1.getFixtureValue)(selectors, sourceKey);
+    const target = (0, fixtures_1.getFixtureValue)(selectors, targetKey);
+    await page.locator(source).dragTo(page.locator(target));
+    console.log(`🔀 Dragged "${source}" to "${target}"`);
+}
+/**
+ * Continues a drag operation from a previously selected element to a target.
+ * This is meant to be used after selecting an element to drag.
+ * Supports fixtures for reusable selectors.
+ * @example And I drag to "droppable.dropZone"
+ * @param targetKey - The selector of the drop target element.
+ */
+async function dragToTarget(page, targetKey) {
+    const selectors = (0, fixtures_1.loadFixture)("selectors.json");
+    const target = (0, fixtures_1.getFixtureValue)(selectors, targetKey);
+    // Get the active element that was selected in a previous step
+    const { getActiveElement } = await Promise.resolve().then(() => __importStar(require("../utils/state")));
+    const sourceElement = getActiveElement(page);
+    // Perform the drag operation from the active element to the target
+    await sourceElement.dragTo(page.locator(target));
+    console.log(`🔀 Dragged active element to "${target}"`);
 }
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I click {string}", clickElement, "When");
-(0, registry_1.Step)("I force click {string}", forceClickElement, "When");
-(0, registry_1.Step)("I fill {string} with {string}", fillElement, "When");
-(0, registry_1.Step)("I press {string}", pressKeyGlobal, "When");
-(0, registry_1.Step)("I wait for {int} milliseconds", hardWait, "When");
+(0, registry_1.Step)("I pw click {string}", clickElement, "When");
+(0, registry_1.Step)("I pw force click {string}", forceClickElement, "When");
+(0, registry_1.Step)("I pw fill {string} with {string}", fillElement, "When");
+(0, registry_1.Step)("I pw press {string}", pressKeyGlobal, "When");
+(0, registry_1.Step)("I pw drag {string} to {string}", dragElementTo, "When");
+(0, registry_1.Step)("I pw drag to {string}", dragToTarget, "And");

package/dist/backend/actions/keyboard.js

@@ -66,9 +66,9 @@ async function releaseKey(page, key) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I press key {string}", pressKey, "When");
-(0, registry_1.Step)("I press key {string} on element", pressKeyOnElement, "When");
-(0, registry_1.Step)("I press keys {string}", typeKeysGlobal, "When");
-(0, registry_1.Step)("I press shortcut {string}", pressShortcut, "When");
-(0, registry_1.Step)("I hold down key {string}", holdDownKey, "When");
-(0, registry_1.Step)("I release key {string}", releaseKey, "When");
+(0, registry_1.Step)("I pw press key {string}", pressKey, "When");
+(0, registry_1.Step)("I pw press key {string} on element", pressKeyOnElement, "When");
+(0, registry_1.Step)("I pw press keys {string}", typeKeysGlobal, "When");
+(0, registry_1.Step)("I pw press shortcut {string}", pressShortcut, "When");
+(0, registry_1.Step)("I pw hold down key {string}", holdDownKey, "When");
+(0, registry_1.Step)("I pw release key {string}", releaseKey, "When");

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

@@ -1,11 +1,11 @@
 /**
  * Pauses execution for a specified number of milliseconds.
- * @example When I wait for 1000 milliseconds
+ * @example When I wait 1000 milliseconds
  */
 export declare function waitMilliseconds(page: any, ms: number): Promise<void>;
 /**
  * Pauses execution for a specified number of seconds.
- * @example When I wait for 5 seconds
+ * @example When I wait 5 seconds
  */
 export declare function waitSeconds(page: any, seconds: number): Promise<void>;
 /**
@@ -68,4 +68,10 @@ export declare function setSessionStorageItem(page: any, key: string, value: str
  * @example When I clear session storage
  */
 export declare function clearSessionStorage(page: any): Promise<void>;
+/**
+ * Stores the text content of the currently active element in a variable.
+ * This should be used after a step that selects an element (e.g., "I find element by text").
+ * @example When I store text as "extractedCode"
+ */
+export declare function storeActiveElementText(page: any, alias: string): Promise<void>;
 //# sourceMappingURL=misc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/misc.ts"],"names":[],"mappings":"AAUA;;;GAGG;AACH,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAI3E;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAK3E;AAED;;;GAGG;AACH,wBAAsB,cAAc,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAG7D;AAED;;;GAGG;AACH,wBAAsB,cAAc,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAG7D;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAE1E;AAED;;;GAGG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAI3D;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAM1D;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAKrF;AAED;;;GAGG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAI9D;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAM9F;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAG/E;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAGhE;AAED;;;GAGG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMhG;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAGlE"}
+{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/misc.ts"],"names":[],"mappings":"AAUA;;;GAGG;AACH,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAI3E;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAK3E;AAED;;;GAGG;AACH,wBAAsB,cAAc,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAG7D;AAED;;;GAGG;AACH,wBAAsB,cAAc,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAG7D;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAE1E;AAED;;;GAGG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAI3D;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAM1D;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAKrF;AAED;;;GAGG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAI9D;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAM9F;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAG/E;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAGhE;AAED;;;GAGG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMhG;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAGlE;AAED;;;;GAIG;AACH,wBAAsB,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAQpF"}

package/dist/backend/actions/misc.js

@@ -1,4 +1,37 @@
 "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 });
 exports.waitMilliseconds = waitMilliseconds;
 exports.waitSeconds = waitSeconds;
@@ -14,6 +47,7 @@ exports.getLocalStorageItem = getLocalStorageItem;
 exports.clearLocalStorage = clearLocalStorage;
 exports.setSessionStorageItem = setSessionStorageItem;
 exports.clearSessionStorage = clearSessionStorage;
+exports.storeActiveElementText = storeActiveElementText;
 //src/backend/actions/misc.ts
 const registry_1 = require("../../core/registry");
 const state_1 = require("../utils/state");
@@ -22,7 +56,7 @@ const state_1 = require("../utils/state");
 // ==================================================
 /**
  * Pauses execution for a specified number of milliseconds.
- * @example When I wait for 1000 milliseconds
+ * @example When I wait 1000 milliseconds
  */
 async function waitMilliseconds(page, ms) {
     console.warn(`⚠️ Hard wait detected (${ms}ms). Consider replacing with dynamic waits.`);
@@ -31,7 +65,7 @@ async function waitMilliseconds(page, ms) {
 }
 /**
  * Pauses execution for a specified number of seconds.
- * @example When I wait for 5 seconds
+ * @example When I wait 5 seconds
  */
 async function waitSeconds(page, seconds) {
     const ms = seconds * 1000;
@@ -148,20 +182,34 @@ async function clearSessionStorage(page) {
     await page.evaluate(() => sessionStorage.clear());
     console.log("📦 Cleared session storage");
 }
+/**
+ * Stores the text content of the currently active element in a variable.
+ * This should be used after a step that selects an element (e.g., "I find element by text").
+ * @example When I store text as "extractedCode"
+ */
+async function storeActiveElementText(page, alias) {
+    const { getActiveElement, setVariable } = await Promise.resolve().then(() => __importStar(require("../utils/state")));
+    const element = getActiveElement(page);
+    const text = await element.textContent();
+    const cleanText = text?.trim() || "";
+    setVariable(page, alias, cleanText);
+    console.log(`💾 Stored text "${cleanText}" as variable "@${alias}"`);
+}
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I wait for {int} milliseconds", waitMilliseconds, "When");
-(0, registry_1.Step)("I wait for {int} seconds", waitSeconds, "When");
-(0, registry_1.Step)("I pause", pauseExecution, "When");
-(0, registry_1.Step)("I debug", debugExecution, "When");
-(0, registry_1.Step)("I log {string}", logMessage, "When");
-(0, registry_1.Step)("I focus", focusElement, "When");
-(0, registry_1.Step)("I blur", blurElement, "When");
-(0, registry_1.Step)("I set cookie {string} to {string}", setCookie, "When");
-(0, registry_1.Step)("I clear all cookies", clearAllCookies, "When");
-(0, registry_1.Step)("I set local storage item {string} to {string}", setLocalStorageItem, "When");
-(0, registry_1.Step)("I get local storage item {string}", getLocalStorageItem, "When");
-(0, registry_1.Step)("I clear local storage", clearLocalStorage, "When");
-(0, registry_1.Step)("I set session storage item {string} to {string}", setSessionStorageItem, "When");
-(0, registry_1.Step)("I clear session storage", clearSessionStorage, "When");
+(0, registry_1.Step)("I pw wait {int} milliseconds", waitMilliseconds, "When");
+(0, registry_1.Step)("I pw wait {int} seconds", waitSeconds, "When");
+(0, registry_1.Step)("I pw pause", pauseExecution, "When");
+(0, registry_1.Step)("I pw debug", debugExecution, "When");
+(0, registry_1.Step)("I pw log {string}", logMessage, "When");
+(0, registry_1.Step)("I pw focus", focusElement, "When");
+(0, registry_1.Step)("I pw blur", blurElement, "When");
+(0, registry_1.Step)("I pw set cookie {string} to {string}", setCookie, "When");
+(0, registry_1.Step)("I pw clear all cookies", clearAllCookies, "When");
+(0, registry_1.Step)("I pw set local storage item {string} to {string}", setLocalStorageItem, "When");
+(0, registry_1.Step)("I pw get local storage item {string}", getLocalStorageItem, "When");
+(0, registry_1.Step)("I pw clear local storage", clearLocalStorage, "When");
+(0, registry_1.Step)("I pw set session storage item {string} to {string}", setSessionStorageItem, "When");
+(0, registry_1.Step)("I pw clear session storage", clearSessionStorage, "When");
+(0, registry_1.Step)("I pw store text as {string}", storeActiveElementText, "When");

package/dist/backend/actions/mobile.js

@@ -114,10 +114,10 @@ async function grantPermission(page, permission) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I tap", tapStoredElement, "When");
-(0, registry_1.Step)("I tap element {string}", tapElementBySelector, "When");
-(0, registry_1.Step)("I tap coordinates x:{int} y:{int}", tapCoordinates, "When");
-(0, registry_1.Step)("I resize window to width {int} and height {int}", resizeWindow, "When");
-(0, registry_1.Step)("I simulate device {string}", simulateDevice, "When");
-(0, registry_1.Step)("I set geolocation to lat: {float} long: {float}", setGeolocation, "When");
-(0, registry_1.Step)("I grant permission {string}", grantPermission, "When");
+(0, registry_1.Step)("I pw tap", tapStoredElement, "When");
+(0, registry_1.Step)("I pw tap element {string}", tapElementBySelector, "When");
+(0, registry_1.Step)("I pw tap coordinates x:{int} y:{int}", tapCoordinates, "When");
+(0, registry_1.Step)("I pw resize window to width {int} and height {int}", resizeWindow, "When");
+(0, registry_1.Step)("I pw simulate device {string}", simulateDevice, "When");
+(0, registry_1.Step)("I pw set geolocation to lat: {float} long: {float}", setGeolocation, "When");
+(0, registry_1.Step)("I pw grant permission {string}", grantPermission, "When");

package/dist/backend/actions/mouse.js

@@ -154,12 +154,12 @@ async function hoverNthElementBySelector(page, indexStr, selectorKey, table) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I scroll {string} into view", scrollIntoView, "When");
-(0, registry_1.Step)("I scroll {string} to position x:{int} y:{int}", scrollElementToPosition, "When");
-(0, registry_1.Step)("I scroll to coordinates x:{int} y:{int}", scrollWindowToCoordinates, "When");
-(0, registry_1.Step)("I scroll mouse window to position top:{int} left:{int}", scrollWindowSmoothly, "When");
-(0, registry_1.Step)("I scroll to {string}", scrollToDirection, "When");
-(0, registry_1.Step)("I hover over the element {string}", hoverElement, "When");
-(0, registry_1.Step)("I move mouse to coordinates {int}, {int}", moveMouseToCoordinates, "When");
-(0, registry_1.Step)("I hover on {int}(?:st|nd|rd|th) element {string}", hoverNthElementByText, "When");
-(0, registry_1.Step)("I hover on {int}(?:st|nd|rd|th) selector {string}", hoverNthElementBySelector, "When");
+(0, registry_1.Step)("I pw scroll {string} into view", scrollIntoView, "When");
+(0, registry_1.Step)("I pw scroll {string} to position x:{int} y:{int}", scrollElementToPosition, "When");
+(0, registry_1.Step)("I pw scroll to coordinates x:{int} y:{int}", scrollWindowToCoordinates, "When");
+(0, registry_1.Step)("I pw scroll mouse window to position top:{int} left:{int}", scrollWindowSmoothly, "When");
+(0, registry_1.Step)("I pw scroll to {string}", scrollToDirection, "When");
+(0, registry_1.Step)("I pw hover over the element {string}", hoverElement, "When");
+(0, registry_1.Step)("I pw move mouse to coordinates {int}, {int}", moveMouseToCoordinates, "When");
+(0, registry_1.Step)("I pw hover on {int}(?:st|nd|rd|th) element {string}", hoverNthElementByText, "When");
+(0, registry_1.Step)("I pw hover on {int}(?:st|nd|rd|th) selector {string}", hoverNthElementBySelector, "When");

package/dist/backend/actions/navigation.js

@@ -64,8 +64,8 @@ async function navigateToPath(page, path) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I visit {string}", visitUrl, "Given");
-(0, registry_1.Step)("I reload the page", reloadPage, "When");
-(0, registry_1.Step)("I go back", goBack, "When");
-(0, registry_1.Step)("I go forward", goForward, "When");
-(0, registry_1.Step)("I navigate to {string}", navigateToPath, "When");
+(0, registry_1.Step)("I pw visit {string}", visitUrl, "Given");
+(0, registry_1.Step)("I pw reload the page", reloadPage, "When");
+(0, registry_1.Step)("I pw go back", goBack, "When");
+(0, registry_1.Step)("I pw go forward", goForward, "When");
+(0, registry_1.Step)("I pw navigate to {string}", navigateToPath, "When");

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

@@ -0,0 +1,47 @@
+/**
+ * Takes a screenshot of the entire page.
+ * @param page - The Playwright page object
+ * @param filename - The filename to save the screenshot as
+ * @example When I take a screenshot of the page "dashboard-view.png"
+ */
+export declare function takePageScreenshot(page: any, filename: string): Promise<void>;
+/**
+ * Takes a screenshot of a specific element.
+ * @param page - The Playwright page object
+ * @param selectorKey - The selector key (can be a fixture key or raw CSS selector)
+ * @param filename - The filename to save the screenshot as
+ * @example When I take a screenshot of element "header.navbar" as "navbar.png"
+ */
+export declare function takeElementScreenshot(page: any, selectorKey: string, filename: string): Promise<void>;
+/**
+ * Takes a screenshot of the viewport area.
+ * @param page - The Playwright page object
+ * @param filename - The filename to save the screenshot as
+ * @example When I take a viewport screenshot "login-area.png"
+ */
+export declare function takeViewportScreenshot(page: any, filename: string): Promise<void>;
+/**
+ * Compares the current page with a reference image using pixel match.
+ * @param page - The Playwright page object
+ * @param currentFilename - The filename of the current page screenshot
+ * @param referenceFilename - The filename of the reference screenshot to compare with
+ * @example Then I expect page "current-view.png" to closely match "reference-view.png"
+ */
+export declare function expectPageToCloselyMatch(page: any, currentFilename: string, referenceFilename: string): Promise<void>;
+/**
+ * Compares a specific element with a reference image.
+ * @param page - The Playwright page object
+ * @param selectorKey - The selector key (can be a fixture key or raw CSS selector)
+ * @param currentFilename - The filename of the current element screenshot
+ * @param referenceFilename - The filename of the reference screenshot to compare with
+ * @example Then I expect element "div.content" screenshot "content-current.png" to closely match "content-reference.png"
+ */
+export declare function expectElementToCloselyMatch(page: any, selectorKey: string, currentFilename: string, referenceFilename: string): Promise<void>;
+/**
+ * Takes a screenshot and attaches it to the test report.
+ * @param page - The Playwright page object
+ * @param name - The name to identify the screenshot in the report
+ * @example When I capture screenshot "error-state" for the report
+ */
+export declare function captureScreenshotForReport(page: any, name: string): Promise<void>;
+//# sourceMappingURL=visual.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"visual.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/visual.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAGnF;AAED;;;;;;GAMG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAO3G;AAED;;;;;GAKG;AACH,wBAAsB,sBAAsB,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAGvF;AAED;;;;;;GAMG;AACH,wBAAsB,wBAAwB,CAAC,IAAI,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAK3H;AAED;;;;;;;GAOG;AACH,wBAAsB,2BAA2B,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAOnJ;AAED;;;;;GAKG;AACH,wBAAsB,0BAA0B,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIvF"}

package/dist/backend/actions/visual.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.takePageScreenshot = takePageScreenshot;
+exports.takeElementScreenshot = takeElementScreenshot;
+exports.takeViewportScreenshot = takeViewportScreenshot;
+exports.expectPageToCloselyMatch = expectPageToCloselyMatch;
+exports.expectElementToCloselyMatch = expectElementToCloselyMatch;
+exports.captureScreenshotForReport = captureScreenshotForReport;
+//src/backend/actions/visual.ts
+const test_1 = require("@playwright/test");
+const registry_1 = require("../../core/registry");
+const fixtures_1 = require("../utils/fixtures");
+// ==================================================
+// CORE FUNCTIONS
+// ==================================================
+/**
+ * Takes a screenshot of the entire page.
+ * @param page - The Playwright page object
+ * @param filename - The filename to save the screenshot as
+ * @example When I take a screenshot of the page "dashboard-view.png"
+ */
+async function takePageScreenshot(page, filename) {
+    await page.screenshot({ path: `screenshots/${filename}`, fullPage: true });
+    console.log(`📷 Saved page screenshot: screenshots/${filename}`);
+}
+/**
+ * Takes a screenshot of a specific element.
+ * @param page - The Playwright page object
+ * @param selectorKey - The selector key (can be a fixture key or raw CSS selector)
+ * @param filename - The filename to save the screenshot as
+ * @example When I take a screenshot of element "header.navbar" as "navbar.png"
+ */
+async function takeElementScreenshot(page, selectorKey, filename) {
+    const selectors = (0, fixtures_1.loadFixture)("selectors.json");
+    const selector = (0, fixtures_1.getFixtureValue)(selectors, selectorKey);
+    const element = page.locator(selector);
+    await element.screenshot({ path: `screenshots/${filename}` });
+    console.log(`📷 Saved element "${selector}" screenshot: screenshots/${filename}`);
+}
+/**
+ * Takes a screenshot of the viewport area.
+ * @param page - The Playwright page object
+ * @param filename - The filename to save the screenshot as
+ * @example When I take a viewport screenshot "login-area.png"
+ */
+async function takeViewportScreenshot(page, filename) {
+    await page.screenshot({ path: `screenshots/${filename}` });
+    console.log(`📷 Saved viewport screenshot: screenshots/${filename}`);
+}
+/**
+ * Compares the current page with a reference image using pixel match.
+ * @param page - The Playwright page object
+ * @param currentFilename - The filename of the current page screenshot
+ * @param referenceFilename - The filename of the reference screenshot to compare with
+ * @example Then I expect page "current-view.png" to closely match "reference-view.png"
+ */
+async function expectPageToCloselyMatch(page, currentFilename, referenceFilename) {
+    // Playwright's screenshot comparison is already pixel-perfect by default
+    // This function provides semantic meaning for close matching
+    await (0, test_1.expect)(page).toHaveScreenshot(currentFilename);
+    console.log(`🔍 Page "${currentFilename}" compared with reference "${referenceFilename}"`);
+}
+/**
+ * Compares a specific element with a reference image.
+ * @param page - The Playwright page object
+ * @param selectorKey - The selector key (can be a fixture key or raw CSS selector)
+ * @param currentFilename - The filename of the current element screenshot
+ * @param referenceFilename - The filename of the reference screenshot to compare with
+ * @example Then I expect element "div.content" screenshot "content-current.png" to closely match "content-reference.png"
+ */
+async function expectElementToCloselyMatch(page, selectorKey, currentFilename, referenceFilename) {
+    const selectors = (0, fixtures_1.loadFixture)("selectors.json");
+    const selector = (0, fixtures_1.getFixtureValue)(selectors, selectorKey);
+    const element = page.locator(selector);
+    await (0, test_1.expect)(element).toHaveScreenshot(currentFilename);
+    console.log(`🔍 Element "${selector}" screenshot "${currentFilename}" compared with reference "${referenceFilename}"`);
+}
+/**
+ * Takes a screenshot and attaches it to the test report.
+ * @param page - The Playwright page object
+ * @param name - The name to identify the screenshot in the report
+ * @example When I capture screenshot "error-state" for the report
+ */
+async function captureScreenshotForReport(page, name) {
+    await page.screenshot();
+    // This would typically be attached to the test report
+    console.log(`📎 Captured screenshot "${name}" for test report`);
+}
+// ==================================================
+// GLUE STEPS
+// ==================================================
+(0, registry_1.Step)("I pw take a screenshot of the page {string}", takePageScreenshot, "When");
+(0, registry_1.Step)("I pw take a screenshot of element {string} as {string}", takeElementScreenshot, "When");
+(0, registry_1.Step)("I pw take a viewport screenshot {string}", takeViewportScreenshot, "When");
+(0, registry_1.Step)("I pw expect page {string} to closely match {string}", expectPageToCloselyMatch, "Then");
+(0, registry_1.Step)("I pw expect element {string} screenshot {string} to closely match {string}", expectElementToCloselyMatch, "Then");
+(0, registry_1.Step)("I pw capture screenshot {string} for the report", captureScreenshotForReport, "When");

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

@@ -15,6 +15,12 @@ export declare function waitForLoadState(page: any, state: string): Promise<void
  * @example When I wait for element to be visible
  */
 export declare function waitForElementVisible(page: any): Promise<void>;
+/**
+ * Explicitly waits for a specific element to become visible.
+ * Useful for ensuring animations complete or modals appear before proceeding.
+ * @example When I wait for "#modal" to be visible
+ */
+export declare function waitForElementVisibleBySelector(page: any, selectorKey: string): Promise<void>;
 /**
  * Explicitly waits for the currently stored (active) element to become hidden or detached from the DOM.
  * Useful for verifying that loading spinners have disappeared.

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

@@ -1 +1 @@
-{"version":3,"file":"waits.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/waits.ts"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAGjE;AAED;;;GAGG;AACH,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAS9E;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpE;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAInE;AAED;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMpF"}
+{"version":3,"file":"waits.d.ts","sourceRoot":"","sources":["../../../src/backend/actions/waits.ts"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAGjE;AAED;;;GAGG;AACH,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAS9E;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpE;AAED;;;;GAIG;AACH,wBAAsB,+BAA+B,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMnG;AAED;;;;GAIG;AACH,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAInE;AAED;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAMpF"}

package/dist/backend/actions/waits.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForNetworkIdle = waitForNetworkIdle;
 exports.waitForLoadState = waitForLoadState;
 exports.waitForElementVisible = waitForElementVisible;
+exports.waitForElementVisibleBySelector = waitForElementVisibleBySelector;
 exports.waitForElementHidden = waitForElementHidden;
 exports.waitForUrlContain = waitForUrlContain;
 const registry_1 = require("../../core/registry");
@@ -42,6 +43,17 @@ async function waitForElementVisible(page) {
     await element.waitFor({ state: "visible" });
     console.log("⏳ Element is now visible");
 }
+/**
+ * Explicitly waits for a specific element to become visible.
+ * Useful for ensuring animations complete or modals appear before proceeding.
+ * @example When I wait for "#modal" to be visible
+ */
+async function waitForElementVisibleBySelector(page, selectorKey) {
+    const selectors = (0, fixtures_1.loadFixture)("selectors.json");
+    const selector = (0, fixtures_1.getFixtureValue)(selectors, selectorKey);
+    await page.locator(selector).waitFor({ state: "visible" });
+    console.log(`⏳ Element "${selector}" is now visible`);
+}
 /**
  * Explicitly waits for the currently stored (active) element to become hidden or detached from the DOM.
  * Useful for verifying that loading spinners have disappeared.
@@ -66,8 +78,9 @@ async function waitForUrlContain(page, urlPartKey) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I wait for network idle", waitForNetworkIdle, "When");
-(0, registry_1.Step)("I wait for load state {string}", waitForLoadState, "When");
-(0, registry_1.Step)("I wait for element to be visible", waitForElementVisible, "When");
-(0, registry_1.Step)("I wait for element to be hidden", waitForElementHidden, "When");
-(0, registry_1.Step)("I wait for URL to contain {string}", waitForUrlContain, "When");
+(0, registry_1.Step)("I pw wait for network idle", waitForNetworkIdle, "When");
+(0, registry_1.Step)("I pw wait for load state {string}", waitForLoadState, "When");
+(0, registry_1.Step)("I pw wait for element to be visible", waitForElementVisible, "When");
+(0, registry_1.Step)("I pw wait for {string} to be visible", waitForElementVisibleBySelector, "When");
+(0, registry_1.Step)("I pw wait for element to be hidden", waitForElementHidden, "When");
+(0, registry_1.Step)("I pw wait for URL to contain {string}", waitForUrlContain, "When");

package/dist/backend/api/assertions.js

@@ -58,6 +58,6 @@ async function expectResponseProperty(page, jsonPathKey, valueKey) {
 // ==================================================
 // GLUE STEPS
 // ==================================================
-(0, registry_1.Step)("I expect the response status to be {int}", expectResponseStatus, "Then");
-(0, registry_1.Step)("I expect the response body to contain {string}", expectResponseBodyContain, "Then");
-(0, registry_1.Step)("I expect the response property {string} to be {string}", expectResponseProperty, "Then");
+(0, registry_1.Step)("I pw expect the response status to be {int}", expectResponseStatus, "Then");
+(0, registry_1.Step)("I pw expect the response body to contain {string}", expectResponseBodyContain, "Then");
+(0, registry_1.Step)("I pw expect the response property {string} to be {string}", expectResponseProperty, "Then");