@dev-blinq/cucumber_client 1.0.1478-dev → 1.0.1478-stage

package/bin/assets/scripts/recorder.js

@@ -144,7 +144,7 @@ class BVTRecorder {
       getAction: (e) => {
         this.eventUtils.consumeEvent(e);
       },
-      getInterestedElement: () => {},
+      getInterestedElement: () => { },
       hoverOutlineStyle: "",
     });
 
@@ -159,7 +159,7 @@ class BVTRecorder {
         };
       },
       getAction: () => null,
-      getInterestedElement: () => {},
+      getInterestedElement: () => { },
       hoverOutlineStyle: "",
     });
 
@@ -174,7 +174,7 @@ class BVTRecorder {
         };
       },
       getAction: () => null,
-      getInterestedElement: () => {},
+      getInterestedElement: () => { },
       hoverOutlineStyle: "",
     });
 
@@ -390,6 +390,7 @@ class BVTRecorder {
           }
           case "input": {
             const target = this.eventUtils.getNearestInteractiveElement(this.eventUtils.deepEventTarget(event));
+
             if (target.nodeName === "INPUT" && target.type.toLowerCase() === "file") {
               return {
                 details: {
@@ -434,6 +435,36 @@ class BVTRecorder {
             return;
           }
           case "keydown": {
+            // override event.preventDefault to capture the value
+
+            const oldPreventDefault = event.preventDefault.bind(event);
+            event.preventDefault = () => {
+              if (event.key.length >= 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                const target = this.eventUtils.getNearestInteractiveElement(this.eventUtils.deepEventTarget(event));
+                setTimeout(() => {
+                  if (event.__bvt_recorded !== undefined) return;
+                  const valueBefore = target.value;
+                  let newValue = valueBefore;
+
+                  this.recordEvent(
+                    {
+                      details: {
+                        name: "fill",
+                        text: newValue,
+                      },
+                      element: target,
+                    },
+                    target,
+                    "input",
+                    event
+                  );
+
+                  event.__bvt_recorded = true;
+                }, 20);
+              }
+              oldPreventDefault();
+            };
+
             if (!this.eventUtils.shouldGenerateKeyPressFor(event)) return;
             // if (this._actionInProgress(event)) {
             //   this._expectProgrammaticKeyUp = true;
@@ -676,7 +707,8 @@ class BVTRecorder {
 
       lastInputId = el.dataset.inputId;
 
-      el.__locators = this.getLocatorsObject(el);
+      el.__locators = this.getLocatorsObject(el, { maxLocators: 1 });
+
     }
     const role = this.PW.roleUtils.getAriaRole(el);
     const label =
@@ -684,13 +716,15 @@ class BVTRecorder {
       this.PW.roleUtils.getElementAccessibleName(el, true) ||
       "";
     const result = this.getElementProperties(el);
+    const elText = this.PW.selectorUtils.elementText(new Map(), el);
     return {
       role,
       label,
       inputID: el.dataset.inputId,
       tagName: el.tagName,
       type: el.type,
-      text: this.PW.selectorUtils.elementText(new Map(), el).full.trim(),
+      text: elText.full.trim(),
+      textNormalized: elText.normalized.trim(),
       parent: `tagname: ${el.parentElement?.tagName}\ninnerText: ${el.parentElement?.innerText}`,
       attrs: {
         placeholder: el.getAttribute("placeholder"),
@@ -787,15 +821,31 @@ class BVTRecorder {
       return el.matches(closeBtnSelector);
     });
   }
-
-  getLocatorsObject(el) {
+  docHasShadowDOM() {
+    for (const el of document.all) {
+      if (el.tagName.includes("-")) {
+        if (["x-bvt-toolbar", "x-bvt-tool"].includes(el.tagName.toLowerCase())) continue;
+        if (el.shadowRoot) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  getLocatorsObject(el, options = {}) {
+    if (!this.docHasShadowDOM()) {
+      console.log("No custom elements detected, skipping locator generation");
+      return;
+    }
+    console.log("Custom elements detected locator generation");
     if (this.contextElement) {
-      const result = this.locatorGenerator.toContextLocators(el, this.contextElement);
+      const result = this.locatorGenerator.toContextLocators(el, this.contextElement, options);
       return result;
     }
     const isRecordingText = this.#mode === "recordingText";
     return this.locatorGenerator.getElementLocators(el, {
       excludeText: isRecordingText,
+      ...options,
     });
   }
   addListeners() {
@@ -832,31 +882,7 @@ class BVTRecorder {
           }
 
           performance.mark("command-send");
-          const cmd = {
-            mode: this.#mode,
-            action: action.details,
-            element: this.getElementDetails(actionElement, eventName),
-            isPopupCloseClick: this.isPopupCloseEvent(e),
-            // ...this.getLocatorsObject(actionElement),
-            ...(actionElement.__locators ?? this.getLocatorsObject(actionElement)),
-            frame: this.getFrameDetails(),
-            statistics: {
-              time: `${performance.measure("command-received", "command-send").duration.toFixed(2)} ms`,
-            },
-          };
-          const snapshotDetails = {
-            id: actionElement.getAttribute("data-blinq-id"),
-            contextId: this.contextElement?.getAttribute("data-blinq-context-id"),
-            doc: this.snapshotCapturer.createSnapshot({
-              excludeSelectors: ["x-bvt-toolbar", "script", "style", "link[rel=stylesheet]"],
-            }),
-          };
-          cmd.snapshotDetails = snapshotDetails;
-          // eventQueue.enqueue(async () => {
-          // await bvtRecorderBindings.validateLocators(snapshotDetails);
-          // });
-          // console.log(cmd);
-          await bvtRecorderBindings.recordCommand(cmd);
+          this.recordEvent(action, actionElement, eventName, e);
           this.handleStateTransition(action.element);
         },
         { capture: true }
@@ -864,6 +890,33 @@ class BVTRecorder {
     });
   }
 
+  recordEvent(action, actionElement, eventName, e) {
+    const cmd = {
+      mode: this.#mode,
+      action: action.details,
+      element: this.getElementDetails(actionElement, eventName),
+      isPopupCloseClick: this.isPopupCloseEvent(e),
+      ...(actionElement.__locators ?? this.getLocatorsObject(actionElement, { maxLocators: 1 })),
+      frame: this.getFrameDetails(),
+      statistics: {
+        time: `${performance.measure("command-received", "command-send").duration.toFixed(2)} ms`,
+      },
+    };
+    const snapshotDetails = {
+      id: actionElement.getAttribute("data-blinq-id"),
+      contextId: this.contextElement?.getAttribute("data-blinq-context-id"),
+      doc: this.snapshotCapturer.createSnapshot({
+        excludeSelectors: ["x-bvt-toolbar", "script", "style", "link[rel=stylesheet]"],
+      }),
+    };
+    cmd.snapshotDetails = snapshotDetails;
+    // eventQueue.enqueue(async () => {
+    // await bvtRecorderBindings.validateLocators(snapshotDetails);
+    // });
+    // console.log(cmd);
+    bvtRecorderBindings.recordCommand(cmd);
+  }
+
   // TODO: implement the corresponding logic for the below methods
   setPopupHandlers(_popopHandlers) {
     this.popupHandlers = _popopHandlers;
@@ -882,7 +935,7 @@ class BVTRecorder {
     this.interestedElements.clear();
   }
   processAriaSnapshot(snapshot) {
-    const matchedElements = this.findMatchingElements(snapshot, this.snapshotElements);
+    const matchedElements = this.snapshotUtils.findMatchingElements(snapshot, this.snapshotElements);
     for (const el of matchedElements.values()) {
       const element = el;
       if (element) {

package/bin/assets/scripts/snapshot_capturer.js

@@ -29,25 +29,18 @@ class SnapshotCapturer {
   processStyles(document) {
     if (!this.inlineStyles) return;
 
-    const stylesheets = Array.from(document.styleSheets);
+    const stylesheets = Array.from(window.document.styleSheets);
     for (const sheet of stylesheets) {
       try {
-        if (!sheet.href) continue; // Skip inline styles
-        const styleEl = document.createElement("style");
-        let text = "";
-        const cssRules = Array.from(sheet.cssRules || []);
-        for (const rule of cssRules) {
-          if (rule.cssText) {
-            text += rule.cssText + "\n";
-          }
-        }
-        styleEl.textContent = text;
-
-        // Replace the link with our new style element
-        if (sheet.ownerNode && sheet.ownerNode.parentNode) {
-          sheet.ownerNode.parentNode.replaceChild(styleEl, sheet.ownerNode);
-        } else if (sheet.ownerNode) {
-          // If the owner node is not in the document, just append it
+        const el = sheet.ownerNode.cloneNode(true);
+        if (!el.href) {
+          document.head.appendChild(el);
+        } else {
+          const rules = Array.from(sheet.cssRules)
+            .map((rule) => rule.cssText)
+            .join("\n");
+          const styleEl = document.createElement("style");
+          styleEl.textContent = rules;
           document.head.appendChild(styleEl);
         }
       } catch (error) {

package/bin/assets/scripts/unique_locators.js

@@ -217,7 +217,13 @@ class LocatorGenerator {
     }
     return result;
   }
-  toContextLocators(element, contextElement) {
+  getMixedLocators(element, options) {
+    const noTextLocators = this.getNoTextLocators(element, options);
+    const textLocators = this.getTextLocators(element, options);
+    const customLocators = this.getCustomLocators(element, options);
+    return [...customLocators, ...textLocators, ...noTextLocators];
+  }
+  toContextLocators(element, contextElement, options = {}) {
     const commonParent = this.dom_Parent.findLowestCommonAncestor([contextElement, element]);
     const climb = this.dom_Parent.getClimbCountToParent(contextElement, commonParent);
     const text = contextElement.innerText.trim();
@@ -231,6 +237,7 @@ class LocatorGenerator {
         [this.locatorStrategies.no_text]: true,
       },
       prefix,
+      ...options,
     });
 
     const attachContextToLocators = (locs) => {
@@ -239,6 +246,7 @@ class LocatorGenerator {
         loc.text = text;
       });
     };
+
     const allStrategyLocators = result.allStrategyLocators;
     const locators = result.locators;
     if (allStrategyLocators) {
@@ -486,12 +494,16 @@ class LocatorGenerator {
   categorizeLocators(element, locators, options) {
     const unique = [];
     const nonUnique = [];
+    const visible = options?.visible ?? true;
     try {
       for (const locator of locators) {
         if (!locator || !locator.css || typeof locator.css !== "string") {
           console.error("Locator must have a valid css selector found: ", locator);
           continue;
         }
+        if (visible === false) {
+          locator.visible = false;
+        }
         const elements = this.getMatchingElements(locator.css, options);
         if (elements.length === 0) {
           console.warn(`No elements found for locator: ${locator.css}`);
@@ -616,7 +628,7 @@ class LocatorGenerator {
                 result.push(_locator);
               } else {
                 const index = _elements.indexOf(element);
-                if (index !== -1 && index < 5) {
+                if (index !== -1 && index < 10) {
                   // _locator.selector = fullSelector;
                   _locator.css = fullSelector;
                   _locator.index = index;
@@ -628,7 +640,7 @@ class LocatorGenerator {
             }
           } else {
             const index = elements.indexOf(element);
-            if (index !== -1 && index < 5) {
+            if (index !== -1 && index < 10) {
               locator.index = index;
               locator.priority = 2; // non-unique locators have lower priority
               result.push(locator);
@@ -636,7 +648,7 @@ class LocatorGenerator {
           }
         } else {
           const index = elements.indexOf(element);
-          if (index !== -1 && index < 5) {
+          if (index !== -1 && index < 10) {
             locator.index = index;
             locator.priority = 2; // non-unique locators have lower priority
             result.push(locator);
@@ -789,7 +801,7 @@ class LocatorGenerator {
             result.push(newLocator);
           } else {
             const index = elements.indexOf(element);
-            if (index !== -1 && index < 5) {
+            if (index !== -1 && index < 10) {
               const effectiveScore = (unique_locator.score + locator.score) / 2;
               const newLocator = {
                 ...unique_locator,
@@ -812,7 +824,20 @@ class LocatorGenerator {
       return [];
     }
   }
+  isElementVisible(element) {
+    if (!(element instanceof Element)) return false;
+    const style = window.getComputedStyle(element);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return false;
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    return true;
+  }
   getElementLocators(element, options = {}) {
+    const isVisible = this.PW.domUtils.isElementVisible(element);
+    if (isVisible === false) {
+      console.warn("Element is not visible: ", element);
+      options.visible = isVisible;
+    }
     try {
       const {
         excludeText = false,
@@ -883,14 +908,21 @@ class LocatorGenerator {
         if (noTextLocators.length > 0) {
           allStrategyLocators[this.locatorStrategies.no_text] = noTextLocators;
         } else {
-          const _locators = [];
-          _locators.push({
-            css: this.generateUniqueCSSSelector(element, options),
-            score: 500,
-            priority: 3,
-          });
-          if (_locators.length > 0) {
-            allStrategyLocators[this.locatorStrategies.no_text] = _locators;
+
+          // try mixed locator strategy as last resort
+          const mixedLocators = this.getUniqueLocators(element, this.getMixedLocators.bind(this), options);
+          if (mixedLocators.length > 0) {
+            allStrategyLocators[this.locatorStrategies.no_text] = mixedLocators;
+          } else {
+            const _locators = [];
+            _locators.push({
+              css: this.generateUniqueCSSSelector(element, options),
+              score: 500,
+              priority: 3,
+            });
+            if (_locators.length > 0) {
+              allStrategyLocators[this.locatorStrategies.no_text] = _locators;
+            }
           }
         }
         console.groupEnd();

package/bin/assets/templates/_hooks_template.txt

@@ -1,3 +1,7 @@
+import dotenv from "dotenv";
+// Load .env into process.env
+dotenv.config();
+
 import {
   After,
   setDefaultTimeout,
@@ -30,8 +34,8 @@ BeforeStep(async function (step) {
   }
 });
 
-AfterStep(async function (step) {
+AfterStep(async function ({ result, pickleStep }) {
   if (context) {
-    await context.web.afterStep(this, step);
+    await context.web.afterStep(this, pickleStep, result);
   }
 });

package/bin/assets/templates/utils_template.txt

@@ -12,7 +12,7 @@ import path from "path";
  * @param {string} text the text to verify exists in page
  * @protect
  */
-async function verifyTextExistsInPage(text) {
+export async function verifyTextExistsInPage(text) {
   await context.web.verifyTextExistInPage(text, null, this);
 }
 Then("Verify the text {string} can be found in the page", verifyTextExistsInPage);
@@ -22,7 +22,7 @@ Then("Verify the text {string} can be found in the page", verifyTextExistsInPage
  * @param {string} elementDescription element description
  * @protect
  */
-async function clickOnElement(elementDescription) {
+export async function clickOnElement(elementDescription) {
   await context.web.simpleClick(elementDescription, null, null, this);
 }
 When("click on {string}", clickOnElement);
@@ -36,7 +36,7 @@ When("Click {string}", clickOnElement);
  * @param {string} value value to fill the element with
  * @protect
  */
-async function fillElement(elementDescription, value) {
+export async function fillElement(elementDescription, value) {
   await context.web.simpleClickType(elementDescription, value, null, null, this);
 }
 When("fill {string} with {string}", fillElement);
@@ -47,7 +47,7 @@ When("Fill {string} with {string}", fillElement);
  * @param {string} text the text to verify does not exist in page
  * @protect
  */
-async function verifyTextNotExistsInPage(text) {
+export async function verifyTextNotExistsInPage(text) {
   await context.web.waitForTextToDisappear(text, null, this);
 }
 Then("Verify the text {string} cannot be found in the page", verifyTextNotExistsInPage);
@@ -57,7 +57,7 @@ Then("Verify the text {string} cannot be found in the page", verifyTextNotExists
  * @param {string} url URL to navigate
  * @protect
  */
-async function navigateTo(url) {
+export async function navigateTo(url) {
   await context.web.goto(url, this);
 }
 When("Navigate to {string}", navigateTo);
@@ -66,7 +66,7 @@ When("Navigate to {string}", navigateTo);
  * Navigate to the current page
  * @protect
  */
-async function browserNavigateBack() {
+export async function browserNavigateBack() {
   await context.web.goBack({}, this);
 }
 Then("Browser navigate back", browserNavigateBack);
@@ -75,7 +75,7 @@ Then("Browser navigate back", browserNavigateBack);
  * Navigate forward in browser history
  * @protect
  */
-async function browserNavigateForward() {
+export async function browserNavigateForward() {
   await context.web.goForward({}, this);
 }
 Then("Browser navigate forward", browserNavigateForward);
@@ -85,7 +85,7 @@ Then("Browser navigate forward", browserNavigateForward);
  * @param {string} filePath the file path or empty to store in the test data file
  * @protect
  */
-async function storeBrowserSession(filePath) {
+export async function storeBrowserSession(filePath) {
   await context.web.saveStoreState(filePath, this);
 }
 When("Store browser session {string}", storeBrowserSession);
@@ -95,7 +95,7 @@ When("Store browser session {string}", storeBrowserSession);
  * @param {string} filePath the file path or empty
  * @protect
  */
-async function resetBrowserSession(filePath) {
+export async function resetBrowserSession(filePath) {
   await context.web.restoreSaveState(filePath, this);
 }
 When("Reset browser session {string}", resetBrowserSession);
@@ -107,7 +107,7 @@ When("Reset browser session {string}", resetBrowserSession);
  * @param {string} textToVerify the target text to verify
  * @protect
  */
-async function verifyTextRelatedToText(textAnchor, climb, textToVerify) {
+export async function verifyTextRelatedToText(textAnchor, climb, textToVerify) {
   await context.web.verifyTextRelatedToText(textAnchor, climb, textToVerify, null, this);
 }
 Then(
@@ -120,7 +120,7 @@ Then(
  * @requestName the name of the bruno request file
  * @protect
  */
-async function runBrunoRequest(requestName) {
+export async function runBrunoRequest(requestName) {
   await executeBrunoRequest(requestName, {}, context, this);
 }
 When("Bruno - {string}", runBrunoRequest);
@@ -131,7 +131,7 @@ When("bruno - {string}", runBrunoRequest);
  * @param {string} fileName the downloaded file to verify
  * @protect
  */
-async function verify_the_downloaded_file_exists(fileName) {
+export async function verify_the_downloaded_file_exists(fileName) {
   const downloadFolder = path.join(context.reportFolder, "downloads");
   const downloadFile = path.join(downloadFolder, fileName);
   await verifyFileExists(downloadFile, {}, context, this);
@@ -148,7 +148,7 @@ When("Noop", async function () {});
  * @param {string} url URL to be verified against current URL
  * @protect
  */
-async function verify_page_url(url) {
+export async function verify_page_url(url) {
   await context.web.verifyPagePath(url, {}, this);
 }
 Then("Verify the page url is {string}", verify_page_url);
@@ -158,7 +158,7 @@ Then("Verify the page url is {string}", verify_page_url);
  * @param {string} title Title to be verified against current Title
  * @protect
  */
-async function verify_page_title(title) {
+export async function verify_page_title(title) {
   await context.web.verifyPageTitle(title, {}, this);
 }
 Then("Verify the page title is {string}", verify_page_title);
@@ -170,7 +170,7 @@ Then("Verify the page title is {string}", verify_page_title);
  * @param {world} - Optional world context
  * @returns Promise that resolves after the specified duration
  */
-async function sleep(duration) {
-  await context.web.sleep(duration, {}, null);
+export async function sleep(duration) {
+  await context.web.sleep(duration, {}, this);
 }
 Then("Sleep for {string} ms", { timeout: -1 }, sleep);