automation_model 1.0.727-dev → 1.0.727-stage

package/lib/stable_browser.js

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { check_performance } from "./check_performance.js";
 import { expect } from "@playwright/test";
 import dayjs from "dayjs";
 import fs from "fs";
@@ -10,7 +11,8 @@ import { getDateTimeValue } from "./date_time.js";
 import drawRectangle from "./drawRect.js";
 //import { closeUnexpectedPopups } from "./popups.js";
 import { getTableCells, getTableData } from "./table_analyze.js";
-import { _convertToRegexQuery, _copyContext, _fixLocatorUsingParams, _fixUsingParams, _getServerUrl, extractStepExampleParameters, KEYBOARD_EVENTS, maskValue, replaceWithLocalTestData, scrollPageToLoadLazyElements, unEscapeString, _getDataFile, testForRegex, performAction, } from "./utils.js";
+import errorStackParser from "error-stack-parser";
+import { _convertToRegexQuery, _copyContext, _fixLocatorUsingParams, _fixUsingParams, _getServerUrl, extractStepExampleParameters, KEYBOARD_EVENTS, maskValue, replaceWithLocalTestData, scrollPageToLoadLazyElements, unEscapeString, _getDataFile, testForRegex, performAction, _getTestData, } from "./utils.js";
 import csv from "csv-parser";
 import { Readable } from "node:stream";
 import readline from "readline";
@@ -19,16 +21,20 @@ import { getTestData } from "./auto_page.js";
 import { locate_element } from "./locate_element.js";
 import { randomUUID } from "crypto";
 import { _commandError, _commandFinally, _preCommand, _validateSelectors, _screenshot, _reportToWorld, } from "./command_common.js";
-import { registerDownloadEvent, registerNetworkEvents } from "./network.js";
+import { networkAfterStep, networkBeforeStep, registerDownloadEvent, registerNetworkEvents } from "./network.js";
 import { LocatorLog } from "./locator_log.js";
 import axios from "axios";
 import { _findCellArea, findElementsInArea } from "./table_helper.js";
-import { snapshotValidation } from "./snapshot_validation.js";
+import { highlightSnapshot, snapshotValidation } from "./snapshot_validation.js";
 import { loadBrunoParams } from "./bruno.js";
+import { registerAfterStepRoutes, registerBeforeStepRoutes } from "./route.js";
+import { existsSync } from "node:fs";
 export const Types = {
     CLICK: "click_element",
     WAIT_ELEMENT: "wait_element",
-    NAVIGATE: "navigate", ///
+    NAVIGATE: "navigate",
+    GO_BACK: "go_back",
+    GO_FORWARD: "go_forward",
     FILL: "fill_element",
     EXECUTE: "execute_page_method", //
     OPEN: "open_environment", //
@@ -41,6 +47,7 @@ export const Types = {
     VERIFY_PAGE_CONTAINS_NO_TEXT: "verify_page_contains_no_text",
     ANALYZE_TABLE: "analyze_table",
     SELECT: "select_combobox", //
+    VERIFY_PROPERTY: "verify_element_property",
     VERIFY_PAGE_PATH: "verify_page_path",
     VERIFY_PAGE_TITLE: "verify_page_title",
     TYPE_PRESS: "type_press",
@@ -49,6 +56,7 @@ export const Types = {
     CHECK: "check_element",
     UNCHECK: "uncheck_element",
     EXTRACT: "extract_attribute",
+    EXTRACT_PROPERTY: "extract_property",
     CLOSE_PAGE: "close_page",
     TABLE_OPERATION: "table_operation",
     SET_DATE_TIME: "set_date_time",
@@ -60,11 +68,13 @@ export const Types = {
     VERIFY_ATTRIBUTE: "verify_element_attribute",
     VERIFY_TEXT_WITH_RELATION: "verify_text_with_relation",
     BRUNO: "bruno",
-    SNAPSHOT_VALIDATION: "snapshot_validation",
     VERIFY_FILE_EXISTS: "verify_file_exists",
     SET_INPUT_FILES: "set_input_files",
+    SNAPSHOT_VALIDATION: "snapshot_validation",
     REPORT_COMMAND: "report_command",
     STEP_COMPLETE: "step_complete",
+    SLEEP: "sleep",
+    CONDITIONAL_WAIT: "conditional_wait",
 };
 export const apps = {};
 const formatElementName = (elementName) => {
@@ -76,6 +86,7 @@ class StableBrowser {
     logger;
     context;
     world;
+    fastMode;
     project_path = null;
     webLogFile = null;
     networkLogger = null;
@@ -84,12 +95,14 @@ class StableBrowser {
     tags = null;
     isRecording = false;
     initSnapshotTaken = false;
-    constructor(browser, page, logger = null, context = null, world = null) {
+    onlyFailuresScreenshot = process.env.SCREENSHOT_ON_FAILURE_ONLY === "true";
+    constructor(browser, page, logger = null, context = null, world = null, fastMode = false) {
         this.browser = browser;
         this.page = page;
         this.logger = logger;
         this.context = context;
         this.world = world;
+        this.fastMode = fastMode;
         if (!this.logger) {
             this.logger = console;
         }
@@ -118,6 +131,19 @@ class StableBrowser {
         context.pages = [this.page];
         const logFolder = path.join(this.project_path, "logs", "web");
         this.world = world;
+        if (this.configuration && this.configuration.fastMode === true) {
+            this.fastMode = true;
+        }
+        if (process.env.FAST_MODE === "true") {
+            // console.log("Fast mode enabled from environment variable");
+            this.fastMode = true;
+        }
+        if (process.env.FAST_MODE === "false") {
+            this.fastMode = false;
+        }
+        if (this.context) {
+            this.context.fastMode = this.fastMode;
+        }
         this.registerEventListeners(this.context);
         registerNetworkEvents(this.world, this, this.context, this.page);
         registerDownloadEvent(this.page, this.world, this.context);
@@ -128,6 +154,9 @@ class StableBrowser {
         if (!context.pageLoading) {
             context.pageLoading = { status: false };
         }
+        if (this.configuration && this.configuration.acceptDialog && this.page) {
+            this.page.on("dialog", (dialog) => dialog.accept());
+        }
         context.playContext.on("page", async function (page) {
             if (this.configuration && this.configuration.closePopups === true) {
                 console.log("close unexpected popups");
@@ -136,11 +165,20 @@ class StableBrowser {
             }
             context.pageLoading.status = true;
             this.page = page;
+            try {
+                if (this.configuration && this.configuration.acceptDialog) {
+                    await page.on("dialog", (dialog) => dialog.accept());
+                }
+            }
+            catch (error) {
+                console.error("Error on dialog accept registration", error);
+            }
             context.page = page;
             context.pages.push(page);
             registerNetworkEvents(this.world, this, context, this.page);
             registerDownloadEvent(this.page, this.world, context);
             page.on("close", async () => {
+                // return if browser context is already closed
                 if (this.context && this.context.pages && this.context.pages.length > 1) {
                     this.context.pages.pop();
                     this.page = this.context.pages[this.context.pages.length - 1];
@@ -150,7 +188,12 @@ class StableBrowser {
                         console.log("Switched to page " + title);
                     }
                     catch (error) {
-                        console.error("Error on page close", error);
+                        if (error?.message?.includes("Target page, context or browser has been closed")) {
+                            // Ignore this error
+                        }
+                        else {
+                            console.error("Error on page close", error);
+                        }
                     }
                 }
             });
@@ -159,7 +202,12 @@ class StableBrowser {
                 console.log("Switch page: " + (await page.title()));
             }
             catch (e) {
-                this.logger.error("error on page load " + e);
+                if (e?.message?.includes("Target page, context or browser has been closed")) {
+                    // Ignore this error
+                }
+                else {
+                    this.logger.error("error on page load " + e);
+                }
             }
             context.pageLoading.status = false;
         }.bind(this));
@@ -187,7 +235,9 @@ class StableBrowser {
         if (newContextCreated) {
             this.registerEventListeners(this.context);
             await this.goto(this.context.environment.baseUrl);
-            await this.waitForPageLoad();
+            if (!this.fastMode) {
+                await this.waitForPageLoad();
+            }
         }
     }
     async switchTab(tabTitleOrIndex) {
@@ -313,6 +363,64 @@ class StableBrowser {
             await _commandFinally(state, this);
         }
     }
+    async goBack(options, world = null) {
+        const state = {
+            value: "",
+            world: world,
+            type: Types.GO_BACK,
+            text: `Browser navigate back`,
+            operation: "goBack",
+            log: "***** navigate back *****\n",
+            info: {},
+            locate: false,
+            scroll: false,
+            screenshot: false,
+            highlight: false,
+        };
+        try {
+            await _preCommand(state, this);
+            await this.page.goBack({
+                waitUntil: "load",
+            });
+            await _screenshot(state, this);
+        }
+        catch (error) {
+            console.error("Error on goBack", error);
+            _commandError(state, error, this);
+        }
+        finally {
+            await _commandFinally(state, this);
+        }
+    }
+    async goForward(options, world = null) {
+        const state = {
+            value: "",
+            world: world,
+            type: Types.GO_FORWARD,
+            text: `Browser navigate forward`,
+            operation: "goForward",
+            log: "***** navigate forward *****\n",
+            info: {},
+            locate: false,
+            scroll: false,
+            screenshot: false,
+            highlight: false,
+        };
+        try {
+            await _preCommand(state, this);
+            await this.page.goForward({
+                waitUntil: "load",
+            });
+            await _screenshot(state, this);
+        }
+        catch (error) {
+            console.error("Error on goForward", error);
+            _commandError(state, error, this);
+        }
+        finally {
+            await _commandFinally(state, this);
+        }
+    }
     async _getLocator(locator, scope, _params) {
         locator = _fixLocatorUsingParams(locator, _params);
         // locator = await this._replaceWithLocalData(locator);
@@ -411,12 +519,6 @@ class StableBrowser {
                 if (!el.setAttribute) {
                     el = el.parentElement;
                 }
-                // remove any attributes start with data-blinq-id
-                // for (let i = 0; i < el.attributes.length; i++) {
-                //   if (el.attributes[i].name.startsWith("data-blinq-id")) {
-                //     el.removeAttribute(el.attributes[i].name);
-                //   }
-                // }
                 el.setAttribute("data-blinq-id-" + randomToken, "");
                 return true;
             }, [tag1, randomToken]))) {
@@ -438,14 +540,13 @@ class StableBrowser {
             info.locatorLog = new LocatorLog(selectorHierarchy);
         }
         let locatorSearch = selectorHierarchy[index];
-        let originalLocatorSearch = "";
         try {
-            originalLocatorSearch = _fixUsingParams(JSON.stringify(locatorSearch), _params);
-            locatorSearch = JSON.parse(originalLocatorSearch);
+            locatorSearch = _fixLocatorUsingParams(locatorSearch, _params);
         }
         catch (e) {
             console.error(e);
         }
+        let originalLocatorSearch = JSON.stringify(locatorSearch);
         //info.log += "searching for locator " + JSON.stringify(locatorSearch) + "\n";
         let locator = null;
         if (locatorSearch.climb && locatorSearch.climb >= 0) {
@@ -587,34 +688,183 @@ class StableBrowser {
         }
         return { rerun: false };
     }
+    getFilePath() {
+        const stackFrames = errorStackParser.parse(new Error());
+        const stackFrame = stackFrames.findLast((frame) => frame.fileName && frame.fileName.endsWith(".mjs"));
+        // return stackFrame?.fileName || null;
+        const filepath = stackFrame?.fileName;
+        if (filepath) {
+            let jsonFilePath = filepath.replace(".mjs", ".json");
+            if (existsSync(jsonFilePath)) {
+                return jsonFilePath;
+            }
+            const config = this.configuration ?? {};
+            if (!config?.locatorsMetadataDir) {
+                config.locatorsMetadataDir = "features/step_definitions/locators";
+            }
+            if (config && config.locatorsMetadataDir) {
+                jsonFilePath = path.join(config.locatorsMetadataDir, path.basename(jsonFilePath));
+            }
+            if (existsSync(jsonFilePath)) {
+                return jsonFilePath;
+            }
+            return null;
+        }
+        return null;
+    }
+    getFullElementLocators(selectors, filePath) {
+        if (!filePath || !existsSync(filePath)) {
+            return null;
+        }
+        const content = fs.readFileSync(filePath, "utf8");
+        try {
+            const allElements = JSON.parse(content);
+            const element_key = selectors?.element_key;
+            if (element_key && allElements[element_key]) {
+                return allElements[element_key];
+            }
+            for (const elementKey in allElements) {
+                const element = allElements[elementKey];
+                let foundStrategy = null;
+                for (const key in element) {
+                    if (key === "strategy") {
+                        continue;
+                    }
+                    const locators = element[key];
+                    if (!locators || !locators.length) {
+                        continue;
+                    }
+                    for (const locator of locators) {
+                        delete locator.score;
+                    }
+                    if (JSON.stringify(locators) === JSON.stringify(selectors.locators)) {
+                        foundStrategy = key;
+                        break;
+                    }
+                }
+                if (foundStrategy) {
+                    return element;
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error parsing locators from file: " + filePath, error);
+        }
+        return null;
+    }
     async _locate(selectors, info, _params, timeout, allowDisabled = false) {
         if (!timeout) {
             timeout = 30000;
         }
+        let element = null;
+        let allStrategyLocators = null;
+        let selectedStrategy = null;
+        if (this.tryAllStrategies) {
+            allStrategyLocators = this.getFullElementLocators(selectors, this.getFilePath());
+            selectedStrategy = allStrategyLocators?.strategy;
+        }
         for (let i = 0; i < 3; i++) {
             info.log += "attempt " + i + ": total locators " + selectors.locators.length + "\n";
             for (let j = 0; j < selectors.locators.length; j++) {
                 let selector = selectors.locators[j];
                 info.log += "searching for locator " + j + ":" + JSON.stringify(selector) + "\n";
             }
-            let element = await this._locate_internal(selectors, info, _params, timeout, allowDisabled);
+            if (this.tryAllStrategies && selectedStrategy) {
+                const strategyLocators = allStrategyLocators[selectedStrategy];
+                let err;
+                if (strategyLocators && strategyLocators.length) {
+                    try {
+                        selectors.locators = strategyLocators;
+                        element = await this._locate_internal(selectors, info, _params, 10_000, allowDisabled);
+                        info.selectedStrategy = selectedStrategy;
+                        info.log += "element found using strategy " + selectedStrategy + "\n";
+                    }
+                    catch (error) {
+                        err = error;
+                    }
+                }
+                if (!element) {
+                    for (const key in allStrategyLocators) {
+                        if (key === "strategy" || key === selectedStrategy) {
+                            continue;
+                        }
+                        const strategyLocators = allStrategyLocators[key];
+                        if (strategyLocators && strategyLocators.length) {
+                            try {
+                                info.log += "using strategy " + key + " with locators " + JSON.stringify(strategyLocators) + "\n";
+                                selectors.locators = strategyLocators;
+                                element = await this._locate_internal(selectors, info, _params, 10_000, allowDisabled);
+                                err = null;
+                                info.selectedStrategy = key;
+                                info.log += "element found using strategy " + key + "\n";
+                                break;
+                            }
+                            catch (error) {
+                                err = error;
+                            }
+                        }
+                    }
+                }
+                if (err) {
+                    throw err;
+                }
+            }
+            else {
+                element = await this._locate_internal(selectors, info, _params, timeout, allowDisabled);
+            }
             if (!element.rerun) {
-                const randomToken = Math.random().toString(36).substring(7);
-                element.evaluate((el, randomToken) => {
-                    el.setAttribute("data-blinq-id-" + randomToken, "");
-                }, randomToken);
-                // if (element._frame) {
-                //   return element;
-                // }
+                let newElementSelector = "";
+                if (this.configuration && this.configuration.stableLocatorStrategy === "csschain") {
+                    const cssSelector = await element.evaluate((el) => {
+                        function getCssSelector(el) {
+                            if (!el || el.nodeType !== 1 || el === document.body)
+                                return el.tagName.toLowerCase();
+                            const parent = el.parentElement;
+                            const tag = el.tagName.toLowerCase();
+                            // Find the index of the element among its siblings of the same tag
+                            let index = 1;
+                            for (let sibling = el.previousElementSibling; sibling; sibling = sibling.previousElementSibling) {
+                                if (sibling.tagName === el.tagName) {
+                                    index++;
+                                }
+                            }
+                            // Use nth-child if necessary (i.e., if there's more than one of the same tag)
+                            const siblings = Array.from(parent.children).filter((child) => child.tagName === el.tagName);
+                            const needsNthChild = siblings.length > 1;
+                            const selector = needsNthChild ? `${tag}:nth-child(${[...parent.children].indexOf(el) + 1})` : tag;
+                            return getCssSelector(parent) + " > " + selector;
+                        }
+                        const cssSelector = getCssSelector(el);
+                        return cssSelector;
+                    });
+                    newElementSelector = cssSelector;
+                }
+                else {
+                    const randomToken = "blinq_" + Math.random().toString(36).substring(7);
+                    const id = await element.evaluate((el, randomToken) => {
+                        // check if the element has id attribute
+                        if (el.id) {
+                            return el.id;
+                        }
+                        el.setAttribute("id", randomToken);
+                        console.log("set id=" + randomToken + " on element", el);
+                        return randomToken;
+                    }, randomToken);
+                    newElementSelector = "#" + id;
+                    // check if the id contains :
+                    if (id.includes(":")) {
+                        // //*[@id="radix-:r0:"]
+                        newElementSelector = `//*[@id="${id}"]`;
+                    }
+                }
                 const scope = element._frame ?? element.page();
-                let newElementSelector = "[data-blinq-id-" + randomToken + "]";
                 let prefixSelector = "";
                 const frameControlSelector = " >> internal:control=enter-frame";
                 const frameSelectorIndex = element._selector.lastIndexOf(frameControlSelector);
                 if (frameSelectorIndex !== -1) {
                     // remove everything after the >> internal:control=enter-frame
                     const frameSelector = element._selector.substring(0, frameSelectorIndex);
-                    prefixSelector = frameSelector + " >> internal:control=enter-frame >>";
+                    prefixSelector = frameSelector + " >> internal:control=enter-frame >> ";
                 }
                 // if (element?._frame?._selector) {
                 //   prefixSelector = element._frame._selector + " >> " + prefixSelector;
@@ -653,7 +903,7 @@ class StableBrowser {
                             break;
                         }
                         catch (error) {
-                            console.error("frame not found " + frameLocator.css);
+                            // console.error("frame not found " + frameLocator.css);
                         }
                     }
                 }
@@ -731,7 +981,6 @@ class StableBrowser {
         let locatorsCount = 0;
         let lazy_scroll = false;
         //let arrayMode = Array.isArray(selectors);
-        let scope = await this._findFrameScope(selectors, timeout, info);
         let selectorsLocators = null;
         selectorsLocators = selectors.locators;
         // group selectors by priority
@@ -759,6 +1008,7 @@ class StableBrowser {
         let highPriorityOnly = true;
         let visibleOnly = true;
         while (true) {
+            let scope = await this._findFrameScope(selectors, timeout, info);
             locatorsCount = 0;
             let result = [];
             let popupResult = await this.closeUnexpectedPopups(info, _params);
@@ -874,9 +1124,13 @@ class StableBrowser {
                 }
             }
             if (foundLocators.length === 1) {
+                let box = null;
+                if (!this.onlyFailuresScreenshot) {
+                    box = await foundLocators[0].boundingBox();
+                }
                 result.foundElements.push({
                     locator: foundLocators[0],
-                    box: await foundLocators[0].boundingBox(),
+                    box: box,
                     unique: true,
                 });
                 result.locatorIndex = i;
@@ -1031,17 +1285,30 @@ class StableBrowser {
             operation: "click",
             log: "***** click on " + selectors.element_name + " *****\n",
         };
+        check_performance("click_all ***", this.context, true);
         try {
+            check_performance("click_preCommand", this.context, true);
             await _preCommand(state, this);
+            check_performance("click_preCommand", this.context, false);
             await performAction("click", state.element, options, this, state, _params);
-            await this.waitForPageLoad();
+            if (!this.fastMode) {
+                check_performance("click_waitForPageLoad", this.context, true);
+                await this.waitForPageLoad({ noSleep: true });
+                check_performance("click_waitForPageLoad", this.context, false);
+            }
             return state.info;
         }
         catch (e) {
             await _commandError(state, e, this);
         }
         finally {
+            check_performance("click_commandFinally", this.context, true);
             await _commandFinally(state, this);
+            check_performance("click_commandFinally", this.context, false);
+            check_performance("click_all ***", this.context, false);
+            if (this.context.profile) {
+                console.log(JSON.stringify(this.context.profile, null, 2));
+            }
         }
     }
     async waitForElement(selectors, _params, options = {}, world = null) {
@@ -1097,7 +1364,7 @@ class StableBrowser {
                 // if (world && world.screenshot && !world.screenshotPath) {
                 // console.log(`Highlighting while running from recorder`);
                 await this._highlightElements(state.element);
-                await state.element.setChecked(checked);
+                await state.element.setChecked(checked, { timeout: 2000 });
                 await new Promise((resolve) => setTimeout(resolve, 1000));
                 // await this._unHighlightElements(element);
                 // }
@@ -1109,14 +1376,31 @@ class StableBrowser {
                     this.logger.info("element did not change its state, ignoring...");
                 }
                 else {
+                    await new Promise((resolve) => setTimeout(resolve, 1000));
                     //await this.closeUnexpectedPopups();
                     state.info.log += "setCheck failed, will try again" + "\n";
-                    state.element = await this._locate(selectors, state.info, _params);
-                    await state.element.setChecked(checked, { timeout: 5000, force: true });
-                    await new Promise((resolve) => setTimeout(resolve, 1000));
+                    state.element_found = false;
+                    try {
+                        state.element = await this._locate(selectors, state.info, _params, 100);
+                        state.element_found = true;
+                        // check the check state
+                    }
+                    catch (error) {
+                        // element dismissed
+                    }
+                    if (state.element_found) {
+                        const isChecked = await state.element.isChecked();
+                        if (isChecked !== checked) {
+                            // perform click
+                            await state.element.click({ timeout: 2000, force: true });
+                        }
+                        else {
+                            this.logger.info(`Element ${selectors.element_name} is already in the desired state (${checked})`);
+                        }
+                    }
                 }
             }
-            await this.waitForPageLoad();
+            //await this.waitForPageLoad();
             return state.info;
         }
         catch (e) {
@@ -1142,7 +1426,7 @@ class StableBrowser {
             await _preCommand(state, this);
             await performAction("hover", state.element, options, this, state, _params);
             await _screenshot(state, this);
-            await this.waitForPageLoad();
+            //await this.waitForPageLoad();
             return state.info;
         }
         catch (e) {
@@ -1178,7 +1462,7 @@ class StableBrowser {
                 state.info.log += "selectOption failed, will try force" + "\n";
                 await state.element.selectOption(values, { timeout: 10000, force: true });
             }
-            await this.waitForPageLoad();
+            //await this.waitForPageLoad();
             return state.info;
         }
         catch (e) {
@@ -1409,7 +1693,9 @@ class StableBrowser {
                     await new Promise((resolve) => setTimeout(resolve, 500));
                 }
             }
+            //if (!this.fastMode) {
             await _screenshot(state, this);
+            //}
             if (enter === true) {
                 await new Promise((resolve) => setTimeout(resolve, 2000));
                 await this.page.keyboard.press("Enter");
@@ -1458,8 +1744,8 @@ class StableBrowser {
             if (enter) {
                 await new Promise((resolve) => setTimeout(resolve, 2000));
                 await this.page.keyboard.press("Enter");
+                await this.waitForPageLoad();
             }
-            await this.waitForPageLoad();
             return state.info;
         }
         catch (e) {
@@ -1751,6 +2037,11 @@ class StableBrowser {
                         throw new Error("Snapshot validation failed at line " + matchResult.errorLineText);
                     }
                     // highlight and screenshot
+                    try {
+                        await await highlightSnapshot(newValue, scope);
+                        await _screenshot(state, this);
+                    }
+                    catch (e) { }
                     return state.info;
                 }
                 catch (e) {
@@ -1909,12 +2200,7 @@ class StableBrowser {
         }
     }
     getTestData(world = null) {
-        const dataFile = _getDataFile(world, this.context, this);
-        let data = {};
-        if (fs.existsSync(dataFile)) {
-            data = JSON.parse(fs.readFileSync(dataFile, "utf8"));
-        }
-        return data;
+        return _getTestData(world, this.context, this);
     }
     async _screenShot(options = {}, world = null, info = null) {
         // collect url/path/title
@@ -2134,6 +2420,77 @@ class StableBrowser {
             await _commandFinally(state, this);
         }
     }
+    async extractProperty(selectors, property, variable, _params = null, options = {}, world = null) {
+        const state = {
+            selectors,
+            _params,
+            property,
+            variable,
+            options,
+            world,
+            type: Types.EXTRACT_PROPERTY,
+            text: `Extract property from element`,
+            _text: `Extract property ${property} from ${selectors.element_name}`,
+            operation: "extractProperty",
+            log: "***** extract property " + property + " from " + selectors.element_name + " *****\n",
+            allowDisabled: true,
+        };
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        try {
+            await _preCommand(state, this);
+            switch (property) {
+                case "inner_text":
+                    state.value = await state.element.innerText();
+                    break;
+                case "href":
+                    state.value = await state.element.getAttribute("href");
+                    break;
+                case "value":
+                    state.value = await state.element.inputValue();
+                    break;
+                case "text":
+                    state.value = await state.element.textContent();
+                    break;
+                default:
+                    if (property.startsWith("dataset.")) {
+                        const dataAttribute = property.substring(8);
+                        state.value = String(await state.element.getAttribute(`data-${dataAttribute}`)) || "";
+                    }
+                    else {
+                        state.value = String(await state.element.evaluate((element, prop) => element[prop], property));
+                    }
+            }
+            if (options !== null) {
+                if (options.regex && options.regex !== "") {
+                    // Construct a regex pattern from the provided string
+                    const regex = options.regex.slice(1, -1);
+                    const regexPattern = new RegExp(regex, "g");
+                    const matches = state.value.match(regexPattern);
+                    if (matches) {
+                        let newValue = "";
+                        for (const match of matches) {
+                            newValue += match;
+                        }
+                        state.value = newValue;
+                    }
+                }
+                if (options.trimSpaces && options.trimSpaces === true) {
+                    state.value = state.value.trim();
+                }
+            }
+            state.info.value = state.value;
+            this.setTestData({ [variable]: state.value }, world);
+            this.logger.info("set test data: " + variable + "=" + state.value);
+            // await new Promise((resolve) => setTimeout(resolve, 500));
+            return state.info;
+        }
+        catch (e) {
+            await _commandError(state, e, this);
+        }
+        finally {
+            await _commandFinally(state, this);
+        }
+    }
     async verifyAttribute(selectors, attribute, value, _params = null, options = {}, world = null) {
         const state = {
             selectors,
@@ -2232,6 +2589,260 @@ class StableBrowser {
             await _commandFinally(state, this);
         }
     }
+    async verifyProperty(selectors, property, value, _params = null, options = {}, world = null) {
+        const state = {
+            selectors,
+            _params,
+            property,
+            value,
+            options,
+            world,
+            type: Types.VERIFY_PROPERTY,
+            highlight: true,
+            screenshot: true,
+            text: `Verify element property`,
+            _text: `Verify property ${property} from ${selectors.element_name} is ${value}`,
+            operation: "verifyProperty",
+            log: "***** verify property " + property + " from " + selectors.element_name + " *****\n",
+            allowDisabled: true,
+        };
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        let val;
+        let expectedValue;
+        try {
+            await _preCommand(state, this);
+            expectedValue = await replaceWithLocalTestData(state.value, world);
+            state.info.expectedValue = expectedValue;
+            switch (property) {
+                case "innerText":
+                    val = String(await state.element.innerText());
+                    break;
+                case "text":
+                    val = String(await state.element.textContent());
+                    break;
+                case "value":
+                    val = String(await state.element.inputValue());
+                    break;
+                case "checked":
+                    val = String(await state.element.isChecked());
+                    break;
+                case "disabled":
+                    val = String(await state.element.isDisabled());
+                    break;
+                case "readOnly":
+                    const isEditable = await state.element.isEditable();
+                    val = String(!isEditable);
+                    break;
+                case "innerHTML":
+                    val = String(await state.element.innerHTML());
+                    break;
+                case "outerHTML":
+                    val = String(await state.element.evaluate((element) => element.outerHTML));
+                    break;
+                default:
+                    if (property.startsWith("dataset.")) {
+                        const dataAttribute = property.substring(8);
+                        val = String(await state.element.getAttribute(`data-${dataAttribute}`)) || "";
+                    }
+                    else {
+                        val = String(await state.element.evaluate((element, prop) => element[prop], property));
+                    }
+            }
+            // Helper function to remove all style="" attributes
+            const removeStyleAttributes = (htmlString) => {
+                return htmlString.replace(/\s*style\s*=\s*"[^"]*"/gi, "");
+            };
+            // Remove style attributes for innerHTML and outerHTML properties
+            if (property === "innerHTML" || property === "outerHTML") {
+                val = removeStyleAttributes(val);
+                expectedValue = removeStyleAttributes(expectedValue);
+            }
+            state.info.value = val;
+            let regex;
+            state.info.value = val;
+            const isRegex = expectedValue.startsWith("regex:");
+            const isContains = expectedValue.startsWith("contains:");
+            const isExact = expectedValue.startsWith("exact:");
+            let matchPassed = false;
+            if (isRegex) {
+                const rawPattern = expectedValue.slice(6); // remove "regex:"
+                const lastSlashIndex = rawPattern.lastIndexOf("/");
+                if (rawPattern.startsWith("/") && lastSlashIndex > 0) {
+                    const patternBody = rawPattern.slice(1, lastSlashIndex).replace(/\n/g, ".*");
+                    const flags = rawPattern.slice(lastSlashIndex + 1) || "gs";
+                    const regex = new RegExp(patternBody, flags);
+                    state.info.regex = true;
+                    matchPassed = regex.test(val);
+                }
+                else {
+                    // Fallback: treat as literal
+                    const escapedPattern = rawPattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+                    const regex = new RegExp(escapedPattern, "g");
+                    matchPassed = regex.test(val);
+                }
+            }
+            else if (isContains) {
+                const containsValue = expectedValue.slice(9); // remove "contains:"
+                matchPassed = val.includes(containsValue);
+            }
+            else if (isExact) {
+                const exactValue = expectedValue.slice(6); // remove "exact:"
+                matchPassed = val === exactValue;
+            }
+            else if (property === "innerText") {
+                // Default innerText logic
+                const normalizedExpectedValue = expectedValue.replace(/\\n/g, "\n");
+                const valLines = val.split("\n");
+                const expectedLines = normalizedExpectedValue.split("\n");
+                matchPassed = expectedLines.every((expectedLine) => valLines.some((valLine) => valLine.trim() === expectedLine.trim()));
+            }
+            else {
+                // Fallback exact or loose match
+                const escapedPattern = expectedValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+                const regex = new RegExp(escapedPattern, "g");
+                matchPassed = regex.test(val);
+            }
+            if (!matchPassed) {
+                let errorMessage = `The ${property} property has a value of "${val}", but the expected value is "${expectedValue}"`;
+                state.info.failCause.assertionFailed = true;
+                state.info.failCause.lastError = errorMessage;
+                throw new Error(errorMessage);
+            }
+            return state.info;
+        }
+        catch (e) {
+            await _commandError(state, e, this);
+        }
+        finally {
+            await _commandFinally(state, this);
+        }
+    }
+    async conditionalWait(selectors, condition, timeout = 1000, _params = null, options = {}, world = null) {
+        // Convert timeout from seconds to milliseconds
+        const timeoutMs = timeout * 1000;
+        const state = {
+            selectors,
+            _params,
+            condition,
+            timeout: timeoutMs, // Store as milliseconds for internal use
+            options,
+            world,
+            type: Types.CONDITIONAL_WAIT,
+            highlight: true,
+            screenshot: true,
+            text: `Conditional wait for element`,
+            _text: `Wait for ${selectors.element_name} to be ${condition} (timeout: ${timeout}s)`, // Display original seconds
+            operation: "conditionalWait",
+            log: `***** conditional wait for ${condition} on ${selectors.element_name} *****\n`,
+            allowDisabled: true,
+            info: {},
+        };
+        // Initialize startTime outside try block to ensure it's always accessible
+        const startTime = Date.now();
+        let conditionMet = false;
+        let currentValue = null;
+        let lastError = null;
+        // Main retry loop - continues until timeout or condition is met
+        while (Date.now() - startTime < timeoutMs) {
+            const elapsedTime = Date.now() - startTime;
+            const remainingTime = timeoutMs - elapsedTime;
+            try {
+                // Try to execute _preCommand (element location)
+                await _preCommand(state, this);
+                // If _preCommand succeeds, start condition checking
+                const checkCondition = async () => {
+                    try {
+                        switch (condition.toLowerCase()) {
+                            case "checked":
+                                currentValue = await state.element.isChecked();
+                                return currentValue === true;
+                            case "unchecked":
+                                currentValue = await state.element.isChecked();
+                                return currentValue === false;
+                            case "visible":
+                                currentValue = await state.element.isVisible();
+                                return currentValue === true;
+                            case "hidden":
+                                currentValue = await state.element.isVisible();
+                                return currentValue === false;
+                            case "enabled":
+                                currentValue = await state.element.isDisabled();
+                                return currentValue === false;
+                            case "disabled":
+                                currentValue = await state.element.isDisabled();
+                                return currentValue === true;
+                            case "editable":
+                                // currentValue = await String(await state.element.evaluate((element, prop) => element[prop], "isContentEditable"));
+                                currentValue = await state.element.isContentEditable();
+                                return currentValue === true;
+                            default:
+                                state.info.message = `Unsupported condition: '${condition}'. Supported conditions are: checked, unchecked, visible, hidden, enabled, disabled, editable.`;
+                                state.info.success = false;
+                                return false;
+                        }
+                    }
+                    catch (error) {
+                        // Don't throw here, just return false to continue retrying
+                        return false;
+                    }
+                };
+                // Inner loop for condition checking (once element is located)
+                while (Date.now() - startTime < timeoutMs) {
+                    const currentElapsedTime = Date.now() - startTime;
+                    conditionMet = await checkCondition();
+                    if (conditionMet) {
+                        break;
+                    }
+                    // Check if we still have time for another attempt
+                    if (Date.now() - startTime + 50 < timeoutMs) {
+                        await new Promise((res) => setTimeout(res, 50));
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // If we got here and condition is met, break out of main loop
+                if (conditionMet) {
+                    break;
+                }
+                // If condition not met but no exception, we've timed out
+                break;
+            }
+            catch (e) {
+                lastError = e;
+                const currentElapsedTime = Date.now() - startTime;
+                const timeLeft = timeoutMs - currentElapsedTime;
+                // Check if we have enough time left to retry
+                if (timeLeft > 100) {
+                    await new Promise((resolve) => setTimeout(resolve, 50));
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        const actualWaitTime = Date.now() - startTime;
+        state.info = {
+            success: conditionMet,
+            conditionMet,
+            actualWaitTime,
+            currentValue,
+            lastError: lastError?.message || null,
+            message: conditionMet
+                ? `Condition '${condition}' met after ${(actualWaitTime / 1000).toFixed(2)}s`
+                : `Condition '${condition}' not met within ${timeout}s timeout`,
+        };
+        if (lastError) {
+            state.log += `Last error: ${lastError.message}\n`;
+        }
+        try {
+            await _commandFinally(state, this);
+        }
+        catch (finallyError) {
+            state.log += `Error in _commandFinally: ${finallyError.message}\n`;
+        }
+        return state.info;
+    }
     async extractEmailData(emailAddress, options, world) {
         if (!emailAddress) {
             throw new Error("email address is null");
@@ -2828,6 +3439,8 @@ class StableBrowser {
             operation: "verify_text_with_relation",
             log: "***** search for " + textAnchor + " climb " + climb + " and verify " + textToVerify + " found *****\n",
         };
+        const cmdStartTime = Date.now();
+        let cmdEndTime = null;
         const timeout = this._getFindElementTimeout(options);
         await new Promise((resolve) => setTimeout(resolve, 2000));
         let newValue = await this._replaceWithLocalData(textAnchor, world);
@@ -2863,6 +3476,17 @@ class StableBrowser {
                     await new Promise((resolve) => setTimeout(resolve, 1000));
                     continue;
                 }
+                else {
+                    cmdEndTime = Date.now();
+                    if (cmdEndTime - cmdStartTime > 55000) {
+                        if (foundAncore) {
+                            throw new Error(`Text ${textToVerify} not found in page`);
+                        }
+                        else {
+                            throw new Error(`Text ${textAnchor} not found in page`);
+                        }
+                    }
+                }
                 try {
                     for (let i = 0; i < resultWithElementsFound.length; i++) {
                         foundAncore = true;
@@ -3262,6 +3886,43 @@ class StableBrowser {
             });
         }
     }
+    /**
+     * Explicit wait/sleep function that pauses execution for a specified duration
+     * @param duration - Duration to sleep in milliseconds (default: 1000ms)
+     * @param options - Optional configuration object
+     * @param world - Optional world context
+     * @returns Promise that resolves after the specified duration
+     */
+    async sleep(duration = 1000, options = {}, world = null) {
+        const state = {
+            duration,
+            options,
+            world,
+            locate: false,
+            scroll: false,
+            screenshot: false,
+            highlight: false,
+            type: Types.SLEEP,
+            text: `Sleep for ${duration} ms`,
+            _text: `Sleep for ${duration} ms`,
+            operation: "sleep",
+            log: `***** Sleep for ${duration} ms *****\n`,
+        };
+        try {
+            await _preCommand(state, this);
+            if (duration < 0) {
+                throw new Error("Sleep duration cannot be negative");
+            }
+            await new Promise((resolve) => setTimeout(resolve, duration));
+            return state.info;
+        }
+        catch (e) {
+            await _commandError(state, e, this);
+        }
+        finally {
+            await _commandFinally(state, this);
+        }
+    }
     async _replaceWithLocalData(value, world, _decrypt = true, totpWait = true) {
         try {
             return await replaceWithLocalTestData(value, world, _decrypt, totpWait, this.context, this);
@@ -3313,6 +3974,22 @@ class StableBrowser {
         }
     }
     async waitForPageLoad(options = {}, world = null) {
+        // try {
+        //   let currentPagePath = null;
+        //   currentPagePath = new URL(this.page.url()).pathname;
+        //   if (this.latestPagePath) {
+        //     // get the currect page path and compare with the latest page path
+        //     if (this.latestPagePath === currentPagePath) {
+        //       // if the page path is the same, do not wait for page load
+        //       console.log("No page change: " + currentPagePath);
+        //       return;
+        //     }
+        //   }
+        //   this.latestPagePath = currentPagePath;
+        // } catch (e) {
+        //   console.debug("Error getting current page path: ", e);
+        // }
+        //console.log("Waiting for page load");
         let timeout = this._getLoadTimeout(options);
         const promiseArray = [];
         // let waitForNetworkIdle = true;
@@ -3345,10 +4022,12 @@ class StableBrowser {
             else if (e.label === "domcontentloaded") {
                 console.log("waited for the domcontent loaded timeout");
             }
-            console.log(".");
         }
         finally {
-            await new Promise((resolve) => setTimeout(resolve, 2000));
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            if (options && !options.noSleep) {
+                await new Promise((resolve) => setTimeout(resolve, 1500));
+            }
             ({ screenshotId, screenshotPath } = await this._screenShot(options, world));
             const endTime = Date.now();
             _reportToWorld(world, {
@@ -3389,7 +4068,6 @@ class StableBrowser {
             await this.page.close();
         }
         catch (e) {
-            console.log(".");
             await _commandError(state, e, this);
         }
         finally {
@@ -3403,7 +4081,7 @@ class StableBrowser {
         }
         operation = options.operation;
         // validate operation is one of the supported operations
-        if (operation != "click" && operation != "hover+click") {
+        if (operation != "click" && operation != "hover+click" && operation != "hover") {
             throw new Error("operation is not supported");
         }
         const state = {
@@ -3472,6 +4150,17 @@ class StableBrowser {
                     state.element = results[0];
                     await performAction("hover+click", state.element, options, this, state, _params);
                     break;
+                case "hover":
+                    if (!options.css) {
+                        throw new Error("css is not defined");
+                    }
+                    const result1 = await findElementsInArea(options.css, cellArea, this, options);
+                    if (result1.length === 0) {
+                        throw new Error(`Element not found in cell area`);
+                    }
+                    state.element = result1[0];
+                    await performAction("hover", state.element, options, this, state, _params);
+                    break;
                 default:
                     throw new Error("operation is not supported");
             }
@@ -3504,7 +4193,6 @@ class StableBrowser {
             await this.page.setViewportSize({ width: width, height: hight });
         }
         catch (e) {
-            console.log(".");
             await _commandError({ text: "setViewportSize", operation: "setViewportSize", width, hight, info }, e, this);
         }
         finally {
@@ -3542,7 +4230,6 @@ class StableBrowser {
             await this.page.reload();
         }
         catch (e) {
-            console.log(".");
             await _commandError({ text: "reloadPage", operation: "reloadPage", info }, e, this);
         }
         finally {
@@ -3586,6 +4273,10 @@ class StableBrowser {
         }
     }
     async beforeScenario(world, scenario) {
+        if (world && world.attach) {
+            world.attach(this.context.reportFolder, { mediaType: "text/plain" });
+        }
+        this.context.loadedRoutes = null;
         this.beforeScenarioCalled = true;
         if (scenario && scenario.pickle && scenario.pickle.name) {
             this.scenarioName = scenario.pickle.name;
@@ -3609,7 +4300,7 @@ class StableBrowser {
             envName = this.context.environment.name;
         }
         if (!process.env.TEMP_RUN) {
-            await getTestData(envName, world, undefined, this.featureName, this.scenarioName);
+            await getTestData(envName, world, undefined, this.featureName, this.scenarioName, this.context);
         }
         await loadBrunoParams(this.context, this.context.environment.name);
     }
@@ -3617,6 +4308,7 @@ class StableBrowser {
     async beforeStep(world, step) {
         if (!this.beforeScenarioCalled) {
             this.beforeScenario(world, step);
+            this.context.loadedRoutes = null;
         }
         if (this.stepIndex === undefined) {
             this.stepIndex = 0;
@@ -3626,7 +4318,12 @@ class StableBrowser {
         }
         if (step && step.pickleStep && step.pickleStep.text) {
             this.stepName = step.pickleStep.text;
-            this.logger.info("step: " + this.stepName);
+            let printableStepName = this.stepName;
+            // take the printableStepName and replace quated value with \x1b[33m and \x1b[0m
+            printableStepName = printableStepName.replace(/"([^"]*)"/g, (match, p1) => {
+                return `\x1b[33m"${p1}"\x1b[0m`;
+            });
+            this.logger.info("\x1b[38;5;208mstep:\x1b[0m " + printableStepName);
         }
         else if (step && step.text) {
             this.stepName = step.text;
@@ -3641,13 +4338,16 @@ class StableBrowser {
         }
         if (this.initSnapshotTaken === false) {
             this.initSnapshotTaken = true;
-            if (world && world.attach && !process.env.DISABLE_SNAPSHOT) {
+            if (world && world.attach && !process.env.DISABLE_SNAPSHOT && !this.fastMode) {
                 const snapshot = await this.getAriaSnapshot();
                 if (snapshot) {
                     await world.attach(JSON.stringify(snapshot), "application/json+snapshot-before");
                 }
             }
         }
+        this.context.routeResults = null;
+        await registerBeforeStepRoutes(this.context, this.stepName);
+        networkBeforeStep(this.stepName);
     }
     async getAriaSnapshot() {
         try {
@@ -3667,12 +4367,18 @@ class StableBrowser {
                 try {
                     // Ensure frame is attached and has body
                     const body = frame.locator("body");
-                    await body.waitFor({ timeout: 200 }); // wait explicitly
+                    //await body.waitFor({ timeout: 2000 }); // wait explicitly
                     const snapshot = await body.ariaSnapshot({ timeout });
+                    if (!snapshot) {
+                        continue;
+                    }
                     content.push(`- frame: ${i}`);
                     content.push(snapshot);
                 }
-                catch (innerErr) { }
+                catch (innerErr) {
+                    console.warn(`Frame ${i} snapshot failed:`, innerErr);
+                    content.push(`- frame: ${i} - error: ${innerErr.message}`);
+                }
             }
             return content.join("\n");
         }
@@ -3744,34 +4450,43 @@ class StableBrowser {
         if (this.context) {
             this.context.examplesRow = null;
         }
-        if (world && world.attach && !process.env.DISABLE_SNAPSHOT) {
+        if (world && world.attach && !process.env.DISABLE_SNAPSHOT && !this.fastMode) {
             const snapshot = await this.getAriaSnapshot();
             if (snapshot) {
                 const obj = {};
                 await world.attach(JSON.stringify(snapshot), "application/json+snapshot-after");
             }
         }
-        const state = {
-            world,
-            locate: false,
-            scroll: false,
-            screenshot: true,
-            highlight: true,
-            type: Types.STEP_COMPLETE,
-            text: "end of scenario",
-            _text: "end of scenario",
-            operation: "step_complete",
-            log: "***** " + "end of scenario" + " *****\n",
-        };
-        try {
-            await _preCommand(state, this);
-        }
-        catch (e) {
-            await _commandError(state, e, this);
+        this.context.routeResults = await registerAfterStepRoutes(this.context, world);
+        if (this.context.routeResults) {
+            if (world && world.attach) {
+                await world.attach(JSON.stringify(this.context.routeResults), "application/json+intercept-results");
+            }
         }
-        finally {
-            await _commandFinally(state, this);
+        if (!process.env.TEMP_RUN) {
+            const state = {
+                world,
+                locate: false,
+                scroll: false,
+                screenshot: true,
+                highlight: true,
+                type: Types.STEP_COMPLETE,
+                text: "end of scenario",
+                _text: "end of scenario",
+                operation: "step_complete",
+                log: "***** " + "end of scenario" + " *****\n",
+            };
+            try {
+                await _preCommand(state, this);
+            }
+            catch (e) {
+                await _commandError(state, e, this);
+            }
+            finally {
+                await _commandFinally(state, this);
+            }
         }
+        networkAfterStep(this.stepName);
     }
 }
 function createTimedPromise(promise, label) {