@dev-blinq/cucumber_client 1.0.1325-dev → 1.0.1325-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: "",
     });
 
@@ -790,19 +790,7 @@ class BVTRecorder {
 
   getLocatorsObject(el) {
     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;
-      });
+      const result = this.locatorGenerator.toContextLocators(el, this.contextElement);
       return result;
     }
     const isRecordingText = this.#mode === "recordingText";
@@ -894,7 +882,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

@@ -1,155 +1,162 @@
 class SnapshotCapturer {
-    constructor(options = {}) {
-        const {
-            inlineImages = true,
-            inlineStyles = true,
-            excludeSelectors = []
-        } = options;
-        // this.options = {
-        //     inlineImages,
-        //     inlineStyles,
-        //     excludeSelectors
-        // };
-        this.inlineImages = inlineImages;
-        this.inlineStyles = inlineStyles;
-        this.excludeSelectors = excludeSelectors;
+  constructor(options = {}) {
+    const { inlineImages = true, inlineStyles = true, excludeSelectors = [] } = options;
+    // this.options = {
+    //     inlineImages,
+    //     inlineStyles,
+    //     excludeSelectors
+    // };
+    this.inlineImages = inlineImages;
+    this.inlineStyles = inlineStyles;
+    this.excludeSelectors = excludeSelectors;
+  }
+  imageToDataURL(img, document) {
+    try {
+      // Create canvas to draw the image
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth || img.width;
+      canvas.height = img.naturalHeight || img.height;
+      const ctx = canvas.getContext("2d");
+
+      // Draw image to canvas and convert to data URL
+      ctx.drawImage(img, 0, 0);
+      return canvas.toDataURL("image/png");
+    } catch (error) {
+      console.warn(`Failed to inline image: ${img.src}`, error);
+      return img.src; // Fall back to original source
     }
-    imageToDataURL(img, document) {
-        try {
-            // Create canvas to draw the image
-            const canvas = document.createElement('canvas');
-            canvas.width = img.naturalWidth || img.width;
-            canvas.height = img.naturalHeight || img.height;
-            const ctx = canvas.getContext('2d');
-
-            // Draw image to canvas and convert to data URL
-            ctx.drawImage(img, 0, 0);
-            return canvas.toDataURL('image/png');
-        } catch (error) {
-            console.warn(`Failed to inline image: ${img.src}`, error);
-            return img.src; // Fall back to original source
+  }
+  processStyles(document) {
+    if (!this.inlineStyles) return;
+
+    const stylesheets = Array.from(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";
+          }
         }
-    }
-    processStyles(document) {
-        if (!this.inlineStyles) return;
-
-        const stylesheets = Array.from(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
-                    document.head.appendChild(styleEl);
-                }
-
-            } catch (error) {
-                console.warn(`Error processing stylesheet: ${sheet.href}`, error);
-            }
+        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
+          document.head.appendChild(styleEl);
         }
+      } catch (error) {
+        console.warn(`Error processing stylesheet: ${sheet.href}`, error);
+      }
     }
-    processImages(document) {
-        if (!this.inlineImages) return;
-
-        const images = document.querySelectorAll('img');
-        images.forEach(img => {
-            // Skip SVGs and already data URLs
-            if (img.src.startsWith('data:') || img.src.endsWith('.svg')) return;
-
-            // Skip if the image is excluded
-            if (this.excludeSelectors.some(selector => img.matches(selector))) return;
-
-            // Only inline complete images
-            if (img.complete && img.naturalWidth !== 0) {
-                try {
-                    img.setAttribute('src', this.imageToDataURL(img, document));
-                } catch (e) {
-                    console.warn(`Failed to process image: ${img.src}`, e);
-                }
-            }
-        });
-    }
-    removeExcludedElements(document) {
-        this.excludeSelectors.forEach(selector => {
-            const elements = document.querySelectorAll(selector);
-            elements.forEach(el => {
-                el.parentNode?.removeChild(el);
-            });
-        });
-    }
-    processComputedStyles(document) {
-        const elements = document.querySelectorAll('*');
-
-        elements.forEach(el => {
-            // Skip excluded elements
-            if (this.excludeSelectors.some(selector => el.matches(selector))) return;
-
-            // Get computed style
-            const style = window.getComputedStyle(el);
-
-            // Copy important styles to inline style
-            const importantStyles = [
-                'display', 'position', 'width', 'height', 'margin', 'padding',
-                'color', 'background-color', 'font-family', 'font-size',
-                'text-align', 'line-height', 'border', 'box-shadow', 'opacity'
-                // Add more styles as needed
-            ];
-
-            const inlineStyles = [];
-
-            importantStyles.forEach(prop => {
-                const value = style.getPropertyValue(prop);
-                if (value) {
-                    inlineStyles.push(`${prop}: ${value}`);
-                }
-            });
-
-            // Set inline style
-            if (inlineStyles.length > 0) {
-                const currentStyle = el.getAttribute('style') || '';
-                el.setAttribute('style', currentStyle + inlineStyles.join('; ') + ';');
-            }
-        });
-
-    }
-    createSnapshot() {
-        // Clone the document to avoid modifying the original
-        const docClone = window.document.cloneNode(true);
-
-        // Store the original document
-        const originalDoc = window.document;
+  }
+  processImages(document) {
+    if (!this.inlineImages) return;
 
-        // Temporarily "swap" the document for processing
-        // (We're just using this as a convention - it doesn't actually replace the global document)
-        const doc = docClone;
+    const images = document.querySelectorAll("img");
+    images.forEach((img) => {
+      // Skip SVGs and already data URLs
+      if (img.src.startsWith("data:") || img.src.endsWith(".svg")) return;
 
-        // Process the clone
-        this.processStyles(doc);
-        this.processImages(doc);
-        this.removeExcludedElements(doc);
-        this.processComputedStyles(doc);
+      // Skip if the image is excluded
+      if (this.excludeSelectors.some((selector) => img.matches(selector))) return;
 
-        // Generate HTML with doctype
-        const doctype = originalDoc.doctype ?
-            new XMLSerializer().serializeToString(originalDoc.doctype) : '<!DOCTYPE html>';
-
-        // Get the HTML content
-        const htmlContent = doc.documentElement.outerHTML;
-
-        // Combine doctype and HTML content
-        return `${doctype}${htmlContent}`;
-    }
+      // Only inline complete images
+      if (img.complete && img.naturalWidth !== 0) {
+        try {
+          img.setAttribute("src", this.imageToDataURL(img, document));
+        } catch (e) {
+          console.warn(`Failed to process image: ${img.src}`, e);
+        }
+      }
+    });
+  }
+  removeExcludedElements(document) {
+    this.excludeSelectors.forEach((selector) => {
+      const elements = document.querySelectorAll(selector);
+      elements.forEach((el) => {
+        el.parentNode?.removeChild(el);
+      });
+    });
+  }
+  processComputedStyles(document) {
+    const elements = document.querySelectorAll("*");
+
+    elements.forEach((el) => {
+      // Skip excluded elements
+      if (this.excludeSelectors.some((selector) => el.matches(selector))) return;
+
+      // Get computed style
+      const style = window.getComputedStyle(el);
+
+      // Copy important styles to inline style
+      const importantStyles = [
+        "display",
+        "position",
+        "width",
+        "height",
+        "margin",
+        "padding",
+        "color",
+        "background-color",
+        "font-family",
+        "font-size",
+        "text-align",
+        "line-height",
+        "border",
+        "box-shadow",
+        "opacity",
+        // Add more styles as needed
+      ];
+
+      const inlineStyles = [];
+
+      importantStyles.forEach((prop) => {
+        const value = style.getPropertyValue(prop);
+        if (value) {
+          inlineStyles.push(`${prop}: ${value}`);
+        }
+      });
+
+      // Set inline style
+      if (inlineStyles.length > 0) {
+        const currentStyle = el.getAttribute("style") || "";
+        el.setAttribute("style", currentStyle + inlineStyles.join("; ") + ";");
+      }
+    });
+  }
+  createSnapshot() {
+    // Clone the document to avoid modifying the original
+    const docClone = window.document.cloneNode(true);
+
+    // Store the original document
+    const originalDoc = window.document;
+
+    // Temporarily "swap" the document for processing
+    // (We're just using this as a convention - it doesn't actually replace the global document)
+    const doc = docClone;
+
+    // Process the clone
+    this.processStyles(doc);
+    this.processImages(doc);
+    this.removeExcludedElements(doc);
+    this.processComputedStyles(doc);
+
+    // Generate HTML with doctype
+    const doctype = originalDoc.doctype
+      ? new XMLSerializer().serializeToString(originalDoc.doctype)
+      : "<!DOCTYPE html>";
+
+    // Get the HTML content
+    const htmlContent = doc.documentElement.outerHTML;
+
+    // Combine doctype and HTML content
+    return `${doctype}${htmlContent}`;
+  }
 }
-export default SnapshotCapturer;
+export default SnapshotCapturer;

package/bin/assets/scripts/unique_locators.js

@@ -150,6 +150,7 @@ class LocatorGenerator {
   }
   getTextLocators(element, options) {
     const injectedScript = this.injectedScript;
+    const { textToIgnore = null } = options;
     const selectorPartLists = this.PW.selectorGenerator.buildTextCandidates(injectedScript, element, options);
     const result = [];
     for (const selectorPartList of selectorPartLists) {
@@ -157,6 +158,9 @@ class LocatorGenerator {
       const tSelectorList = [];
       for (const selectorPart of selectorPartList) {
         const { engine, selector } = selectorPart;
+        if (textToIgnore && selector.includes(textToIgnore)) {
+          continue;
+        }
         if (engine === "css") {
           tSelectorList.push(selector);
         } else {
@@ -213,6 +217,52 @@ class LocatorGenerator {
     }
     return result;
   }
+  toContextLocators(element, contextElement) {
+    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,
+    });
+
+    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");
@@ -283,7 +333,7 @@ class LocatorGenerator {
             }
             const textElement = elements[0];
             // const text = this.PW.selectorUtils.elementText(textElement);
-            const text = this.injectedScript.utils.elementText(new Map(), textElement).full;
+            const text = this.injectedScript.utils.elementText(new Map(), textElement).full.trim();
 
             const fullSelector = `${textLocator} >> xpath=${xpath} >> ${restOfSelector}`;
             const fullElements = this.getMatchingElements(fullSelector, {});
@@ -361,7 +411,7 @@ class LocatorGenerator {
           hasDigitsInText = digitsRegex.test(text);
 
           let pattern = this.PW.stringUtils.escapeRegExp(text.substring(1, text.length - 2));
-          const re = new RegExp("^" + pattern + "$");
+          const re = new RegExp(pattern);
 
           finalSelector += `internal:text=${escapeRegexForSelector(re).replace(digitsRegex, "\\d+")} >> `;
         }
@@ -439,6 +489,10 @@ class LocatorGenerator {
     const nonUnique = [];
     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;
+        }
         const elements = this.getMatchingElements(locator.css, options);
         if (elements.length === 0) {
           console.warn(`No elements found for locator: ${locator.css}`);
@@ -617,7 +671,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 [];
@@ -637,13 +691,7 @@ class LocatorGenerator {
             },
           ];
         } else {
-          return [
-            {
-              css: ":root",
-              score: 1,
-              priority: 1,
-            },
-          ];
+          return [];
         }
       }
 
@@ -670,12 +718,15 @@ 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);
+        const _locators = locatorGenerator(ancestor, { ...options, textToIgnore });
         if (!_locators || !Array.isArray(_locators) || _locators.length === 0) {
           continue;
         }
@@ -686,11 +737,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;
@@ -699,6 +754,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}`;
@@ -739,10 +815,32 @@ class LocatorGenerator {
   }
   getElementLocators(element, options = {}) {
     try {
-      const { excludeText = false } = options;
-
-      const allStrategyLocators = {};
-      if (this.options?.customAttributes) {
+      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]: [],
+        [this.locatorStrategies.context]: [],
+        [this.locatorStrategies.text]: [],
+        [this.locatorStrategies.text_with_index]: [],
+        [this.locatorStrategies.digitIgnore]: [],
+        [this.locatorStrategies.no_text]: [],
+      };
+      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) {
@@ -751,43 +849,53 @@ 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 {
+          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) {