automation_model 1.0.594-dev → 1.0.596-dev

package/lib/stable_browser.js

@@ -7,10 +7,9 @@ import path from "path";
 import reg_parser from "regex-parser";
 import { findDateAlternatives, findNumberAlternatives } from "./analyze_helper.js";
 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, KEYBOARD_EVENTS, maskValue, replaceWithLocalTestData, scrollPageToLoadLazyElements, unEscapeString, } from "./utils.js";
+import { _convertToRegexQuery, _copyContext, _fixLocatorUsingParams, _fixUsingParams, _getServerUrl, extractStepExampleParameters, KEYBOARD_EVENTS, maskValue, replaceWithLocalTestData, scrollPageToLoadLazyElements, unEscapeString, } from "./utils.js";
 import csv from "csv-parser";
 import { Readable } from "node:stream";
 import readline from "readline";
@@ -253,7 +252,7 @@ class StableBrowser {
             highlight: false,
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             await this.page.goto(url, {
                 timeout: 60000,
             });
@@ -827,7 +826,7 @@ class StableBrowser {
             operation: "simpleClick",
             log: "***** click on " + elementDescription + " *****\n",
         };
-        _preCommand(state, this);
+        _preCommand(state, this, world);
         const startTime = Date.now();
         let timeout = 30000;
         if (options && options.timeout) {
@@ -876,7 +875,7 @@ class StableBrowser {
             operation: "simpleClickType",
             log: "***** click type on " + elementDescription + " *****\n",
         };
-        _preCommand(state, this);
+        _preCommand(state, this, world);
         const startTime = Date.now();
         let timeout = 30000;
         if (options && options.timeout) {
@@ -924,7 +923,7 @@ class StableBrowser {
             log: "***** click on " + selectors.element_name + " *****\n",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             // if (state.options && state.options.context) {
             //   state.selectors.locators[0].text = state.options.context;
             // }
@@ -960,14 +959,20 @@ class StableBrowser {
             log: "***** check " + selectors.element_name + " *****\n",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             state.info.checked = checked;
             // let element = await this._locate(selectors, info, _params);
             // ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info));
             try {
-                // await this._highlightElements(element);
+                if (world && world.screenshot && !world.screenshotPath) {
+                    // console.log(`Highlighting while running from recorder`);
+                    await this._highlightElements(element);
+                    await new Promise((resolve) => setTimeout(resolve, 100));
+                    await this._unHighlightElements(element);
+                }
                 await state.element.setChecked(checked);
-                await new Promise((resolve) => setTimeout(resolve, 1000));
+                // await new Promise((resolve) => setTimeout(resolve, 1000));
+                //  await this._unHighlightElements(element);
             }
             catch (e) {
                 if (e.message && e.message.includes("did not change its state")) {
@@ -1003,9 +1008,10 @@ class StableBrowser {
             log: "***** hover " + selectors.element_name + " *****\n",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             try {
                 await state.element.hover();
+                await _screenshot(state, this);
                 await new Promise((resolve) => setTimeout(resolve, 1000));
             }
             catch (e) {
@@ -1013,9 +1019,10 @@ class StableBrowser {
                 state.info.log += "hover failed, will try again" + "\n";
                 state.element = await this._locate(selectors, state.info, _params);
                 await state.element.hover({ timeout: 10000 });
+                await _screenshot(state, this);
                 await new Promise((resolve) => setTimeout(resolve, 1000));
             }
-            await _screenshot(state, this);
+            // await _screenshot(state, this);
             await this.waitForPageLoad();
             return state.info;
         }
@@ -1042,7 +1049,7 @@ class StableBrowser {
             log: "***** select option " + selectors.element_name + " *****\n",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             try {
                 await state.element.selectOption(values);
             }
@@ -1076,7 +1083,7 @@ class StableBrowser {
             log: "",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             const valueSegment = state.value.split("&&");
             for (let i = 0; i < valueSegment.length; i++) {
                 if (i > 0) {
@@ -1119,7 +1126,7 @@ class StableBrowser {
             log: "***** set input value " + selectors.element_name + " *****\n",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             let value = await this._replaceWithLocalData(state.value, this);
             try {
                 await state.element.evaluateHandle((el, value) => {
@@ -1156,7 +1163,7 @@ class StableBrowser {
             throwError: false,
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             try {
                 await state.element.click();
                 await new Promise((resolve) => setTimeout(resolve, 500));
@@ -1230,7 +1237,7 @@ class StableBrowser {
             _value = newValue;
         }
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             state.info.value = _value;
             if (options === null || options === undefined || !options.press) {
                 try {
@@ -1323,7 +1330,7 @@ class StableBrowser {
             log: "***** fill on " + selectors.element_name + " with value " + value + "*****\n",
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             await state.element.fill(value);
             await state.element.dispatchEvent("change");
             if (enter) {
@@ -1369,9 +1376,19 @@ class StableBrowser {
         catch (e) {
             //ignore
         }
-        ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info));
+        ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info, element));
         try {
-            await this._highlightElements(element);
+            if (world && world.screenshot && !world.screenshotPath) {
+                // console.log(`Highlighting for get text while running from recorder`);
+                this._highlightElements(element)
+                    .then(async () => {
+                    await new Promise((resolve) => setTimeout(resolve, 1000));
+                    this._unhighlightElements(element).then(() => { }
+                    // console.log(`Unhighlighting vrtr in recorder is successful`)
+                    );
+                })
+                    .catch(e);
+            }
             const elementText = await element.innerText();
             return {
                 text: elementText,
@@ -1383,7 +1400,7 @@ class StableBrowser {
         }
         catch (e) {
             //await this.closeUnexpectedPopups();
-            this.logger.info("no innerText will use textContent");
+            this.logger.info("no innerText, will use textContent");
             const elementText = await element.textContent();
             return { text: elementText, screenshotId, screenshotPath, value: value };
         }
@@ -1418,13 +1435,13 @@ class StableBrowser {
         }
         let foundObj = null;
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             state.info.pattern = pattern;
             foundObj = await this._getText(selectors, 0, _params, options, state.info, world);
             if (foundObj && foundObj.element) {
                 await this.scrollIfNeeded(foundObj.element, state.info);
             }
-            await _screenshot(state, this);
+            await _screenshot(state, this, foundObj.element);
             let escapedText = text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
             pattern = pattern.replace("{text}", escapedText);
             let regex = new RegExp(pattern, "im");
@@ -1469,12 +1486,12 @@ class StableBrowser {
         }
         let foundObj = null;
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             foundObj = await this._getText(selectors, climb, _params, options, state.info, world);
             if (foundObj && foundObj.element) {
                 await this.scrollIfNeeded(foundObj.element, state.info);
             }
-            await _screenshot(state, this);
+            await _screenshot(state, this, foundObj.element);
             const dateAlternatives = findDateAlternatives(text);
             const numberAlternatives = findNumberAlternatives(text);
             if (dateAlternatives.date) {
@@ -1663,7 +1680,7 @@ class StableBrowser {
         }
         return data;
     }
-    async _screenShot(options = {}, world = null, info = null) {
+    async _screenShot(options = {}, world = null, info = null, focusedElement = null) {
         // collect url/path/title
         if (info) {
             if (!info.title) {
@@ -1692,7 +1709,7 @@ class StableBrowser {
             const uuidStr = "id_" + randomUUID();
             const screenshotPath = path.join(world.screenshotPath, uuidStr + ".png");
             try {
-                await this.takeScreenshot(screenshotPath);
+                await this.takeScreenshot(screenshotPath, focusedElement);
                 // let buffer = await this.page.screenshot({ timeout: 4000 });
                 // // save the buffer to the screenshot path asynchrously
                 // fs.writeFile(screenshotPath, buffer, (err) => {
@@ -1703,7 +1720,7 @@ class StableBrowser {
                 result.screenshotId = uuidStr;
                 result.screenshotPath = screenshotPath;
                 if (info && info.box) {
-                    await drawRectangle(screenshotPath, info.box.x, info.box.y, info.box.width, info.box.height);
+                    // await drawRectangle(screenshotPath, info.box.x, info.box.y, info.box.width, info.box.height);
                 }
             }
             catch (e) {
@@ -1713,7 +1730,7 @@ class StableBrowser {
         else if (options && options.screenshot) {
             result.screenshotPath = options.screenshotPath;
             try {
-                await this.takeScreenshot(options.screenshotPath);
+                await this.takeScreenshot(options.screenshotPath, focusedElement);
                 // let buffer = await this.page.screenshot({ timeout: 4000 });
                 // // save the buffer to the screenshot path asynchrously
                 // fs.writeFile(options.screenshotPath, buffer, (err) => {
@@ -1726,12 +1743,12 @@ class StableBrowser {
                 this.logger.info("unable to take screenshot, ignored");
             }
             if (info && info.box) {
-                await drawRectangle(options.screenshotPath, info.box.x, info.box.y, info.box.width, info.box.height);
+                // await drawRectangle(options.screenshotPath, info.box.x, info.box.y, info.box.width, info.box.height);
             }
         }
         return result;
     }
-    async takeScreenshot(screenshotPath) {
+    async takeScreenshot(screenshotPath, focusedElement = null) {
         const playContext = this.context.playContext;
         // Using CDP to capture the screenshot
         const viewportWidth = Math.max(...(await this.page.evaluate(() => [
@@ -1743,6 +1760,15 @@ class StableBrowser {
             document.documentElement.clientWidth,
         ])));
         let screenshotBuffer = null;
+        // if (focusedElement) {
+        //   // console.log(`Focused element ${JSON.stringify(focusedElement._selector)}`)
+        //   await this._unhighlightElements(focusedElement);
+        //   await new Promise((resolve) => setTimeout(resolve, 100));
+        //   console.log(`Unhighlighted previous element`);
+        // }
+        if (focusedElement) {
+            await this._highlightElements(focusedElement);
+        }
         if (this.context.browserName === "chromium") {
             const client = await playContext.newCDPSession(this.page);
             const { data } = await client.send("Page.captureScreenshot", {
@@ -1764,6 +1790,10 @@ class StableBrowser {
         else {
             screenshotBuffer = await this.page.screenshot();
         }
+        if (focusedElement) {
+            // console.log(`Focused element ${JSON.stringify(focusedElement._selector)}`)
+            await this._unhighlightElements(focusedElement);
+        }
         let image = await Jimp.read(screenshotBuffer);
         // Get the image dimensions
         const { width, height } = image.bitmap;
@@ -1790,7 +1820,7 @@ class StableBrowser {
         };
         await new Promise((resolve) => setTimeout(resolve, 2000));
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             await expect(state.element).toHaveCount(1, { timeout: 10000 });
             return state.info;
         }
@@ -1816,7 +1846,7 @@ class StableBrowser {
         };
         await new Promise((resolve) => setTimeout(resolve, 2000));
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             switch (attribute) {
                 case "inner_text":
                     state.value = await state.element.innerText();
@@ -1834,6 +1864,7 @@ class StableBrowser {
             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) {
@@ -1862,7 +1893,7 @@ class StableBrowser {
         await new Promise((resolve) => setTimeout(resolve, 2000));
         let val;
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             switch (attribute) {
                 case "innerText":
                     val = String(await state.element.innerText());
@@ -1995,27 +2026,33 @@ class StableBrowser {
     async _highlightElements(scope, css) {
         try {
             if (!scope) {
+                // console.log(`Scope is not defined`);
                 return;
             }
             if (!css) {
                 scope
                     .evaluate((node) => {
                     if (node && node.style) {
-                        let originalBorder = node.style.outline;
+                        let originalOutline = node.style.outline;
+                        // console.log(`Original outline was: ${originalOutline}`);
+                        node.__previousOutline = originalOutline;
                         node.style.outline = "2px solid red";
-                        if (window) {
-                            window.addEventListener("beforeunload", function (e) {
-                                node.style.outline = originalBorder;
-                            });
-                        }
-                        setTimeout(function () {
-                            node.style.outline = originalBorder;
-                        }, 2000);
+                        // console.log(`New outline is: ${node.style.outline}`);
+                        // if (window) {
+                        //   window.addEventListener("beforeunload", function (e) {
+                        //     node.style.outline = originalBorder;
+                        //   });
+                        // }
+                        // setTimeout(function () {
+                        //   node.style.outline = originalBorder;
+                        //}, 2000);
                     }
                 })
-                    .then(() => { })
+                    .then(() => {
+                })
                     .catch((e) => {
                     // ignore
+                    // console.error(`Could not highlight node : ${e}`);
                 });
             }
             else {
@@ -2031,24 +2068,27 @@ class StableBrowser {
                         if (!element.style) {
                             return;
                         }
-                        var originalBorder = element.style.outline;
+                        let originalOutline = element.style.outline;
+                        element.__previousOutline = originalOutline;
                         // Set the new border to be red and 2px solid
                         element.style.outline = "2px solid red";
-                        if (window) {
-                            window.addEventListener("beforeunload", function (e) {
-                                element.style.outline = originalBorder;
-                            });
-                        }
+                        // if (window) {
+                        //   window.addEventListener("beforeunload", function (e) {
+                        //     element.style.outline = originalBorder;
+                        //   });
+                        // }
                         // Set a timeout to revert to the original border after 2 seconds
-                        setTimeout(function () {
-                            element.style.outline = originalBorder;
-                        }, 2000);
+                        // setTimeout(function () {
+                        //   element.style.outline = originalBorder;
+                        // }, 2000);
                     }
                     return;
                 }, [css])
-                    .then(() => { })
+                    .then(() => {
+                })
                     .catch((e) => {
                     // ignore
+                    // console.error(`Could not highlight css: ${e}`);
                 });
             }
         }
@@ -2056,6 +2096,60 @@ class StableBrowser {
             console.debug(error);
         }
     }
+    async _unhighlightElements(scope, css) {
+        try {
+            if (!scope) {
+                return;
+            }
+            if (!css) {
+                scope
+                    .evaluate((node) => {
+                    if (node && node.style) {
+                        if (!node.__previousOutline) {
+                            node.style.outline = "";
+                        }
+                        else {
+                            node.style.outline = node.__previousOutline;
+                        }
+                    }
+                })
+                    .then(() => {
+                })
+                    .catch((e) => {
+                    // console.log(`Error while unhighlighting node ${JSON.stringify(scope)}: ${e}`);
+                });
+            }
+            else {
+                scope
+                    .evaluate(([css]) => {
+                    if (!css) {
+                        return;
+                    }
+                    let elements = Array.from(document.querySelectorAll(css));
+                    for (i = 0; i < elements.length; i++) {
+                        let element = elements[i];
+                        if (!element.style) {
+                            return;
+                        }
+                        if (!element.__previousOutline) {
+                            element.style.outline = "";
+                        }
+                        else {
+                            element.style.outline = element.__previousOutline;
+                        }
+                    }
+                })
+                    .then(() => {
+                })
+                    .catch((e) => {
+                    // console.error(`Error while unhighlighting element in css: ${e}`);
+                });
+            }
+        }
+        catch (error) {
+            // console.debug(error);
+        }
+    }
     async verifyPagePath(pathPart, options = {}, world = null) {
         const startTime = Date.now();
         let error = null;
@@ -2170,7 +2264,7 @@ class StableBrowser {
         let dateAlternatives = findDateAlternatives(text);
         let numberAlternatives = findNumberAlternatives(text);
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             state.info.text = text;
             while (true) {
                 const resultWithElementsFound = await this.findTextInAllFrames(dateAlternatives, numberAlternatives, text, state);
@@ -2184,14 +2278,31 @@ class StableBrowser {
                 if (resultWithElementsFound[0].randomToken) {
                     const frame = resultWithElementsFound[0].frame;
                     const dataAttribute = `[data-blinq-id-${resultWithElementsFound[0].randomToken}]`;
-                    await this._highlightElements(frame, dataAttribute);
+                    if (world && world.screenshot && !world.screenshotPath) {
+                        // console.log(`Highlighting for verify text is found while running from recorder`);
+                        this._highlightElements(frame, dataAttribute).then(async () => {
+                            await new Promise((resolve) => setTimeout(resolve, 1000));
+                            this._unhighlightElements(frame, dataAttribute)
+                                .then(async () => {
+                                // console.log(`Unhighlighted frame dataAttribute successfully`);
+                            })
+                                .catch((e) => { }
+                            //  console.error(e)
+                            );
+                        });
+                    }
                     const element = await frame.locator(dataAttribute).first();
+                    // await new Promise((resolve) => setTimeout(resolve, 100));
+                    // await this._unhighlightElements(frame, dataAttribute);
                     if (element) {
                         await this.scrollIfNeeded(element, state.info);
                         await element.dispatchEvent("bvt_verify_page_contains_text");
+                        await _screenshot(state, this, element);
                     }
                 }
-                await _screenshot(state, this);
+                else {
+                    await _screenshot(state, this);
+                }
                 return state.info;
             }
             // await expect(element).toHaveCount(1, { timeout: 10000 });
@@ -2227,7 +2338,7 @@ class StableBrowser {
         let dateAlternatives = findDateAlternatives(text);
         let numberAlternatives = findNumberAlternatives(text);
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             state.info.text = text;
             while (true) {
                 const resultWithElementsFound = await this.findTextInAllFrames(dateAlternatives, numberAlternatives, text, state);
@@ -2279,7 +2390,7 @@ class StableBrowser {
         let numberAlternatives = findNumberAlternatives(textToVerify);
         let foundAncore = false;
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             state.info.text = textToVerify;
             while (true) {
                 const resultWithElementsFound = await this.findTextInAllFrames(dateAlternatives, numberAlternatives, textAnchor, state);
@@ -2309,14 +2420,29 @@ class StableBrowser {
                         if (result.elementCount > 0) {
                             const dataAttribute = "[data-blinq-id-" + result.randomToken + "]";
                             //const cssAnchor = `[data-blinq-id="blinq-id-${token}-anchor"]`;
-                            await this._highlightElements(frame, dataAttribute);
+                            if (world && world.screenshot && !world.screenshotPath) {
+                                // console.log(`Highlighting for vtrt while running from recorder`);
+                                this._highlightElements(frame, dataAttribute)
+                                    .then(async () => {
+                                    await new Promise((resolve) => setTimeout(resolve, 1000));
+                                    this._unhighlightElements(frame, dataAttribute).then(() => { }
+                                    // console.log(`Unhighlighting vrtr in recorder is successful`)
+                                    );
+                                })
+                                    .catch(e);
+                            }
                             //await this._highlightElements(frame, cssAnchor);
                             const element = await frame.locator(dataAttribute).first();
+                            // await new Promise((resolve) => setTimeout(resolve, 100));
+                            // await this._unhighlightElements(frame, dataAttribute);
                             if (element) {
                                 await this.scrollIfNeeded(element, state.info);
                                 await element.dispatchEvent("bvt_verify_page_contains_text");
+                                await _screenshot(state, this, element);
+                            }
+                            else {
+                                await _screenshot(state, this);
                             }
-                            await _screenshot(state, this);
                             return state.info;
                         }
                     }
@@ -2439,14 +2565,14 @@ class StableBrowser {
         info.selectors = selectors;
         try {
             let table = await this._locate(selectors, info, _params);
-            ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info));
+            ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info, table));
             const tableData = await getTableData(this.page, table);
             return tableData;
         }
         catch (e) {
             this.logger.error("getTableData failed " + info.log);
             this.logger.error(e);
-            ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info));
+            ({ screenshotId, screenshotPath } = await this._screenShot(options, world, info, table));
             info.screenshotPath = screenshotPath;
             Object.assign(e, { info: info });
             error = e;
@@ -2727,7 +2853,7 @@ class StableBrowser {
             throwError: false,
         };
         try {
-            await _preCommand(state, this);
+            await _preCommand(state, this, world);
             await this.page.close();
         }
         catch (e) {
@@ -2856,6 +2982,9 @@ class StableBrowser {
         else {
             this.stepName = "step " + this.stepIndex;
         }
+        if (this.context) {
+            this.context.examplesRow = extractStepExampleParameters(step);
+        }
         if (this.context && this.context.browserObject && this.context.browserObject.trace === true) {
             if (this.context.browserObject.context) {
                 await this.context.browserObject.context.tracing.startChunk({ title: this.stepName });
@@ -2878,6 +3007,9 @@ class StableBrowser {
                 });
             }
         }
+        if (this.context) {
+            this.context.examplesRow = null;
+        }
     }
 }
 function createTimedPromise(promise, label) {