@dev-blinq/cucumber_client 1.0.1472-dev → 1.0.1472-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,30 +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 text = this.contextElement.innerText; // TODO: handle case where contextElement is not in dom/ children removed
-      const contextEl = this.contextElement;
-      // const { climb, commonParent } = window.getCommonParent(contextEl, el);
-      const commonParent = this.locatorGenerator.dom_Parent.findLowestCommonAncestor([contextEl, el]);
-      const climb = this.locatorGenerator.dom_Parent.getClimbCountToParent(contextEl, commonParent);
-      const result = this.locatorGenerator.getElementLocators(el, {
-        excludeText: true,
-        root: commonParent,
-      });
-      result.locators.forEach((locator) => {
-        locator.text = text;
-        locator.climb = climb;
-      });
-      result.allStrategyLocators.context = result.locators;
-      result.allStrategyLocators.strategy = "context";
-      result.allStrategyLocators.no_text = [];
+      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() {
@@ -847,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 }
@@ -879,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;
@@ -897,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,6 +217,59 @@ class LocatorGenerator {
     }
     return result;
   }
+  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();
+
+    const prefix = `internal:text="${text}" >> ${this.getXPathSelector(climb)}`;
+    const result = this.getElementLocators(element, {
+      root: commonParent,
+      strategies: {
+        [this.locatorStrategies.custom]: true,
+        [this.locatorStrategies.text]: true,
+        [this.locatorStrategies.no_text]: true,
+      },
+      prefix,
+      ...options,
+    });
+
+    const attachContextToLocators = (locs) => {
+      locs.forEach((loc) => {
+        loc.climb = climb;
+        loc.text = text;
+      });
+    };
+
+    const allStrategyLocators = result.allStrategyLocators;
+    const locators = result.locators;
+    if (allStrategyLocators) {
+      const allLocators = [];
+      for (const strategy in allStrategyLocators) {
+        if (strategy === "strategy") continue;
+        const locators = allStrategyLocators[strategy];
+        if (locators.length === 0) continue;
+        allLocators.push(...locators);
+        allStrategyLocators[strategy] = [];
+      }
+      attachContextToLocators(allLocators);
+      allStrategyLocators[this.locatorStrategies.context] = allLocators;
+      allStrategyLocators.strategy = this.locatorStrategies.context;
+      result.locators = allLocators;
+      return result;
+    }
+    if (locators) {
+      attachContextToLocators(locators);
+      return result;
+    }
+    return result;
+  }
   getContextLocators(element, locators) {
     if (!locators || !Array.isArray(locators)) {
       console.error("Locators must be an array");
@@ -441,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}`);
@@ -571,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;
@@ -583,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);
@@ -591,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);
@@ -625,7 +682,7 @@ class LocatorGenerator {
 
   getUniqueLocators2(element, locatorGenerator = this.getNoTextLocators, options = {}) {
     try {
-      const { maxLocators = 5, root = window.document.body } = options;
+      const { maxLocators = 5, root = window.document.body, prefix } = options;
 
       if (!element) {
         return [];
@@ -672,12 +729,13 @@ class LocatorGenerator {
 
       const elementsCache = new Map();
 
-      const allAncestors = this.dom_Parent.getFullAncestorChainToRoot(element, root);
+      const allAncestors = prefix ? [element] : this.dom_Parent.getFullAncestorChainToRoot(element, root);
       allAncestors.shift(); // remove the element itself from the ancestors
 
       const cache = new Map();
       const textToIgnore = this.PW.selectorUtils.elementText(cache, element).full.trim();
       const ancestorLocators = [];
+      let uniqueAncestor = null;
       for (const ancestor of allAncestors) {
         const _locators = locatorGenerator(ancestor, { ...options, textToIgnore });
         if (!_locators || !Array.isArray(_locators) || _locators.length === 0) {
@@ -690,11 +748,15 @@ class LocatorGenerator {
         });
         elementsCache.set(ancestor, _categorized);
         if (_categorized.unique.length > 0) {
+          uniqueAncestor = {
+            element: ancestor,
+            locators: _categorized,
+          };
           break;
         }
       }
 
-      const uniqueAncestor = ancestorLocators[ancestorLocators.length - 1];
+      // const uniqueAncestor = ancestorLocators[ancestorLocators.length - 1];
 
       for (const locator of nonUnique) {
         const selector = locator.css ?? locator.selector;
@@ -703,6 +765,27 @@ class LocatorGenerator {
           console.warn(`No elements found for locator: ${selector}`);
           continue;
         }
+        if (!uniqueAncestor) {
+          const elements = this.getMatchingElements(selector, options);
+          if (elements.length === 1 && elements[0] === element) {
+            result.push({
+              css: selector,
+              score: locator.score,
+              priority: 1,
+            });
+          } else {
+            const index = elements.indexOf(element);
+            if (index !== -1) {
+              result.push({
+                css: selector,
+                index,
+                score: locator.score + 200,
+                priority: 2,
+              });
+            }
+          }
+          continue;
+        }
 
         for (const unique_locator of uniqueAncestor.locators.unique) {
           const fullSelector = `${unique_locator.css} >> ${selector}`;
@@ -718,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,
@@ -741,9 +824,32 @@ 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 } = options;
+      const {
+        excludeText = false,
+        strategies = {
+          [this.locatorStrategies.custom]: true,
+          [this.locatorStrategies.context]: true,
+          [this.locatorStrategies.text]: true,
+          [this.locatorStrategies.text_with_index]: true,
+          [this.locatorStrategies.digitIgnore]: true,
+          [this.locatorStrategies.no_text]: true,
+        },
+      } = options;
 
       const allStrategyLocators = {
         [this.locatorStrategies.custom]: [],
@@ -753,7 +859,12 @@ class LocatorGenerator {
         [this.locatorStrategies.digitIgnore]: [],
         [this.locatorStrategies.no_text]: [],
       };
-      if (this.options?.customAttributes) {
+      if (
+        strategies[this.locatorStrategies.custom] &&
+        this.options?.customAttributes &&
+        Array.isArray(this.options.customAttributes) &&
+        this.options.customAttributes.length > 0
+      ) {
         console.groupCollapsed("Generating Custom locators for element:", element);
         const customLocators = this.getUniqueLocators(element, this.getCustomLocators.bind(this), options);
         if (customLocators.length > 0) {
@@ -762,43 +873,60 @@ class LocatorGenerator {
       }
       console.groupEnd();
       if (!excludeText) {
-        console.groupCollapsed("Generating Text locators for element:", element);
-        const basicLocators = this.getUniqueLocators(element, this.getTextLocators.bind(this), options);
-        console.groupEnd();
-        if (basicLocators.length > 0) {
-          allStrategyLocators[this.locatorStrategies.text] = basicLocators;
-        }
+        if (strategies[this.locatorStrategies.text]) {
+          console.groupCollapsed("Generating Text locators for element:", element);
 
-        const textWithIndexLocators = this.getTextwithIndexLocators(basicLocators);
-        if (textWithIndexLocators.length > 0) {
-          allStrategyLocators[this.locatorStrategies.text_with_index] = textWithIndexLocators;
-        }
-        const digitIgnoreLocators = this.getDigitIgnoreLocators(element, basicLocators);
-        if (digitIgnoreLocators.length > 0) {
-          allStrategyLocators[this.locatorStrategies.digitIgnore] = digitIgnoreLocators;
-        }
-        const contextLocators = this.getContextLocators(element, basicLocators);
-        if (contextLocators.length > 0) {
-          allStrategyLocators[this.locatorStrategies.context] = contextLocators;
+          const basicLocators = this.getUniqueLocators(element, this.getTextLocators.bind(this), options);
+          console.groupEnd();
+          if (basicLocators.length > 0) {
+            allStrategyLocators[this.locatorStrategies.text] = basicLocators;
+          }
+          if (strategies[this.locatorStrategies.text_with_index]) {
+            const textWithIndexLocators = this.getTextwithIndexLocators(basicLocators);
+            if (textWithIndexLocators.length > 0) {
+              allStrategyLocators[this.locatorStrategies.text_with_index] = textWithIndexLocators;
+            }
+          }
+          if (strategies[this.locatorStrategies.digitIgnore]) {
+            const digitIgnoreLocators = this.getDigitIgnoreLocators(element, basicLocators);
+            if (digitIgnoreLocators.length > 0) {
+              allStrategyLocators[this.locatorStrategies.digitIgnore] = digitIgnoreLocators;
+            }
+          }
+          if (strategies[this.locatorStrategies.context]) {
+            const contextLocators = this.getContextLocators(element, basicLocators);
+            if (contextLocators.length > 0) {
+              allStrategyLocators[this.locatorStrategies.context] = contextLocators;
+            }
+          }
         }
       }
-      console.groupCollapsed("Generating No Text locators for element:", element);
-      const noTextLocators = this.getUniqueLocators(element, this.getNoTextLocators.bind(this), options);
+      if (strategies[this.locatorStrategies.no_text]) {
+        console.groupCollapsed("Generating No Text locators for element:", element);
+        const noTextLocators = this.getUniqueLocators(element, this.getNoTextLocators.bind(this), options);
 
-      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;
+        if (noTextLocators.length > 0) {
+          allStrategyLocators[this.locatorStrategies.no_text] = noTextLocators;
+        } else {
+
+          // 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();
       }
-      console.groupEnd();
 
       let bestStrategy = this.getBestStrategy(allStrategyLocators);
       if (!bestStrategy) {

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);
   }
 });