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

package/bin/assets/preload/recorderv3.js

@@ -919,6 +919,65 @@ class BVTRecorder {
     }
     this.contextElement = null;
   }
+  getElementProperties(element) {
+    if (!element || !(element instanceof HTMLElement || element instanceof SVGElement)) {
+      throw new Error("Please provide a valid HTML element");
+    }
+
+    const result = {
+      properties: {},
+      attributes: {},
+      dataset: {},
+    };
+
+    const unsortedProperties = {};
+    const unsortedAttributes = {};
+    const unsortedDataset = {};
+
+    // Get enumerable properties
+    for (const prop in element) {
+      try {
+        const value = element[prop];
+        if (
+          typeof value !== "function" &&
+          typeof value !== "object" &&
+          value !== null &&
+          value !== undefined &&
+          !prop.includes("_")
+        ) {
+          unsortedProperties[prop] = value;
+        }
+      } catch (error) {
+        unsortedProperties[prop] = "[Error accessing property]";
+      }
+    }
+
+    // Get all attributes
+    if (element.attributes) {
+      for (const attr of element.attributes) {
+        if (attr.name === "data-blinq-id" || attr.name === "data-input-id") continue;
+        unsortedAttributes[attr.name] = attr.value;
+      }
+    }
+
+    // Get dataset properties (data-* attributes)
+    if (element.dataset) {
+      for (const [key, value] of Object.entries(element.dataset)) {
+        if (key === "blinqId" || key === "inputId") continue;
+        unsortedDataset[key] = value;
+      }
+    }
+
+    // Sort each object by key
+    const sortByKey = (obj) => Object.fromEntries(Object.entries(obj).sort(([a], [b]) => a.localeCompare(b)));
+
+    result.properties = sortByKey(unsortedProperties);
+    result.attributes = sortByKey(unsortedAttributes);
+    result.dataset = sortByKey(unsortedDataset);
+
+    return result;
+  }
+
   getElementDetails(el, type) {
     if (lastInputId !== el.dataset.inputId || type !== "input") {
       el.dataset.inputId = getNextInputId();
@@ -928,9 +987,12 @@ class BVTRecorder {
       // }
 
       lastInputId = el.dataset.inputId;
+
+      el.__locators = this.getLocatorsObject(el);
     }
     const role = window.getAriaRole(el);
-    const label = window.getElementAccessibleName(el, false) || window.getElementAccessibleName(el, true) || role || "";
+    const label = window.getElementAccessibleName(el, false) || window.getElementAccessibleName(el, true) || "";
+    const result = this.getElementProperties(el);
     return {
       role,
       label,
@@ -954,6 +1016,9 @@ class BVTRecorder {
         checked: el.checked,
         innerText: el.innerText,
       },
+      attributes: result.attributes,
+      properties: result.properties,
+      dataset: result.dataset,
     };
   }
   handleEvent(e) {
@@ -1098,6 +1163,7 @@ class BVTRecorder {
         improviseLocators: false,
         mustIncludeCSSChain: true,
         root: commonParent,
+        noCSSId: true,
       });
       locators.forEach((locator) => {
         locator.text = text;
@@ -1124,7 +1190,7 @@ class BVTRecorder {
         cssLocators.push(origenCss);
       }
       const noClasses = CssSelectorGenerator.getCssSelector(el, {
-        blacklist: [/^(?!.*h\d).*?\d.*/, /\[style/, /\[data-input-id/, /\[blinq-container/],
+        blacklist: [/^(?!.*h\d).*?\d.*/, /\[style/, /\[data-input-id/],
         combineWithinSelector: true,
         combineBetweenSelectors: true,
         selectors: ["id", "attribute", "tag", "nthchild", "nthoftype"],
@@ -1218,7 +1284,8 @@ class BVTRecorder {
             action: action.details,
             element: this.getElementDetails(actionElement, eventName),
             isPopupCloseClick: this.isPopupCloseEvent(e),
-            ...this.getLocatorsObject(actionElement),
+            // ...this.getLocatorsObject(actionElement),
+            ...(actionElement.__locators ?? this.getLocatorsObject(actionElement)),
             frame: this.getFrameDetails(),
             statistics: {
               time: `${performance.measure("command-received", "command-send").duration.toFixed(2)} ms`,

package/bin/assets/preload/unique_locators.js

@@ -24,11 +24,13 @@ const getMatchingElements = (selector, options = {}) => {
   const root = options?.root || window.document;
   const prefix = options?.prefix;
   if (prefix) {
-    selector = `${prefix} >> ${selector}`;
+    selector = `${prefix} >> ${selector} >> visible=true`;
   }
   return window.__injectedScript.querySelectorAll(window.__injectedScript.parseSelector(selector), root);
 };
 
+window.getMatchingElements = getMatchingElements;
+
 const getPWSelectors = (element, options = {}) => {
   const selectors = [];
   const exludeText = options?.excludeText || false;
@@ -147,7 +149,25 @@ const getElementLocators = (element, options) => {
     .map((item) => {
       return item;
     });
-
+  if (result.nonUnique.length === 0) {
+    // find slector with min score
+    let minScore = Infinity;
+    let minSelector = null;
+    for (const locator of pw_locators) {
+      if (locator.score < minScore) {
+        minScore = locator.score;
+        minSelector = locator.selector;
+      }
+    }
+    if (minSelector) {
+      result.nonUnique.push({
+        css: minSelector,
+        priority: 2,
+        elements: getMatchingElements(minSelector, options),
+        score: minScore,
+      });
+    }
+  }
   return result;
 };
 
@@ -337,6 +357,7 @@ function generateUniqueCSSSelector(element, options) {
   const root = options?.root || window.document;
   const separator = options?.separator || " > ";
   const isUnique = options?.isunique || ((selector) => getMatchingElements(selector, options).length === 1);
+  const noCSSId = options?.noCSSId || false;
 
   if (!(element instanceof Element)) return null;
 
@@ -344,7 +365,7 @@ function generateUniqueCSSSelector(element, options) {
 
   let selector = "";
   const id = element.getAttribute("id");
-  if (id && !/\d/.test(id)) {
+  if (id && !/\d/.test(id) && (!noCSSId)) {
     selector = "#" + cssEscape(id);
     if (isUnique(selector)) return selector;
   }

package/bin/assets/scripts/aria_snapshot.js

@@ -0,0 +1,235 @@
+class AriaSnapshotUtils {
+    isLeafNode(node) {
+        if (node.kind === "text") {
+            return true;
+        } else {
+            return !node.children || node.children.length === 0;
+        }
+    }
+
+    deepClone(node) {
+        if (node.kind === "text") {
+            return node.text;
+        } else {
+            const result = {
+                kind: "role",
+                role: node.role,
+            };
+            if ("checked" in node) result.checked = node.checked;
+            if ("disabled" in node) result.disabled = node.disabled;
+            if ("expanded" in node) result.expanded = node.expanded;
+            if ("level" in node) result.level = node.level;
+            if ("pressed" in node) result.pressed = node.pressed;
+            if ("selected" in node) result.selected = node.selected;
+            if (node.name !== undefined) {
+                result.name = node.name;
+            }
+            if (node.props) {
+                result.props = Object.assign({}, node.props);
+            }
+            if (node.containerMode) {
+                result.containerMode = node.containerMode;
+            }
+            if (node.children) {
+                result.children = node.children.map(child => this.deepClone(child));
+            }
+            return result;
+        }
+    }
+
+    yamlEscapeKeyIfNeeded(str) {
+        if (!this.yamlStringNeedsQuotes(str)) return str;
+        return `'` + str.replace(/'/g, `''`) + `'`;
+    }
+
+    yamlEscapeValueIfNeeded(str) {
+        if (!this.yamlStringNeedsQuotes(str)) return str;
+        return (
+            '"' +
+            str.replace(/[\\"\x00-\x1f\x7f-\x9f]/g, (c) => {
+                switch (c) {
+                    case "\\":
+                        return "\\\\";
+                    case '"':
+                        return '\\"';
+                    case "\b":
+                        return "\\b";
+                    case "\f":
+                        return "\\f";
+                    case "\n":
+                        return "\\n";
+                    case "\r":
+                        return "\\r";
+                    case "\t":
+                        return "\\t";
+                    default:
+                        const code = c.charCodeAt(0);
+                        return "\\x" + code.toString(16).padStart(2, "0");
+                }
+            }) +
+            '"'
+        );
+    }
+
+    yamlStringNeedsQuotes(str) {
+        if (!str) return false;
+        if (str.length === 0) return true;
+        if (/^\s|\s$/.test(str)) return true;
+        if (/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/.test(str)) return true;
+        if (/^-/.test(str)) return true;
+        if (/[\n:](\s|$)/.test(str)) return true;
+        if (/\s#/.test(str)) return true;
+        if (/[\n\r]/.test(str)) return true;
+        if (/^[&*\],?!>|@"'#%]/.test(str)) return true;
+        if (/[{}`]/.test(str)) return true;
+        if (/^\[/.test(str)) return true;
+        if (!isNaN(Number(str)) || ["y", "n", "yes", "no", "true", "false", "on", "off", "null"].includes(str.toLowerCase()))
+            return true;
+        return false;
+    }
+
+    filterParentToChildren(parent, targetChildren) {
+        const isDirectMatch = targetChildren.some((child) => JSON.stringify(child) === JSON.stringify(parent));
+        if (isDirectMatch || this.isLeafNode(parent)) {
+            return isDirectMatch ? this.deepClone(parent) : null;
+        }
+        if (parent.kind === "role" && parent.children && parent.children.length > 0) {
+            const filteredChildren = parent.children
+                .map((child) => this.filterParentToChildren(child, targetChildren))
+                .filter((child) => child !== null);
+            if (filteredChildren.length > 0) {
+                const result = this.deepClone(parent);
+                result.children = filteredChildren;
+                return result;
+            }
+        }
+        return null;
+    }
+
+    serializeAriaSnapshot(ariaSnapshot, indent = 0) {
+        const lines = [];
+        const visit = (node, parentNode, indent) => {
+            if (typeof node === "string") {
+                const text = this.yamlEscapeValueIfNeeded(node);
+                if (text) lines.push(indent + "- text: " + text);
+                return;
+            }
+            let key = node.role;
+
+            if (node.name && node.name.length <= 900) {
+                const name = node.name;
+                if (name) {
+                    const stringifiedName = name.startsWith("/") && name.endsWith("/") ? name : JSON.stringify(name);
+                    key += " " + stringifiedName;
+                }
+            }
+            if (node.checked === "mixed") key += ` [checked=mixed]`;
+            if (node.checked === true) key += ` [checked]`;
+            if (node.disabled) key += ` [disabled]`;
+            if (node.expanded) key += ` [expanded]`;
+            if (node.level) key += ` [level=${node.level}]`;
+            if (node.pressed === "mixed") key += ` [pressed=mixed]`;
+            if (node.pressed === true) key += ` [pressed]`;
+            if (node.selected === true) key += ` [selected]`;
+
+            const escapedKey = indent + "- " + this.yamlEscapeKeyIfNeeded(key);
+            if (node.props === undefined) node.props = {};
+            if (node.children === undefined) node.children = [];
+            const hasProps = !!Object.keys(node.props).length;
+            if (!node.children.length && !hasProps) {
+                lines.push(escapedKey);
+            } else if (node.children.length === 1 && typeof node.children[0] === "string" && !hasProps) {
+                const text = node.children[0];
+                if (text) lines.push(escapedKey + ": " + this.yamlEscapeValueIfNeeded(text));
+                else lines.push(escapedKey);
+            } else {
+                lines.push(escapedKey + ":");
+                for (const [name, value] of Object.entries(node.props) || []) {
+                    lines.push(indent + "  - /" + name + ": " + this.yamlEscapeValueIfNeeded(value));
+                }
+                for (const child of node.children || []) {
+                    visit(child, node, indent + "  ");
+                }
+            }
+        };
+
+        const node = ariaSnapshot;
+        if (node.role === "fragment") {
+            for (const child of node.children || []) visit(child, node, "");
+        } else {
+            visit(node, null, "");
+        }
+        return lines.join("\n");
+    }
+
+    isSnapshotAvailable(element, elementSet) {
+        if (elementSet.has(element)) {
+            return element;
+        } else {
+            return undefined;
+        }
+    }
+
+    findMatchingElements(inputSnapshot, objectSet) {
+        const matches = new Map();
+        const lines = inputSnapshot.trim().split("\n");
+        const subtrees = this.extractSubtrees(lines);
+
+        subtrees.forEach((subtree) => {
+            const subtreeText = subtree.map((t) => t.trim()).join("\n");
+            for (const obj of objectSet) {
+                const normalizedSubtree = subtreeText.trim();
+                const normalizedSnapshot = obj.snapshot
+                    .split("\n")
+                    .map((s) => s.trim())
+                    .join("\n");
+                if (normalizedSnapshot === normalizedSubtree) {
+                    matches.set(subtreeText, obj.element);
+                    break;
+                }
+            }
+        });
+
+        return matches;
+    }
+
+    extractSubtrees(lines) {
+        const subtrees = [];
+        const indentSize = this.getIndentSize(lines);
+
+        for (let i = 0; i < lines.length; i++) {
+            const currentLine = lines[i];
+            const currentIndent = this.getIndentLevel(currentLine);
+            const subtree = [currentLine];
+            for (let j = i + 1; j < lines.length; j++) {
+                const nextLine = lines[j];
+                const nextIndent = this.getIndentLevel(nextLine);
+                if (nextIndent > currentIndent) {
+                    subtree.push(nextLine);
+                } else {
+                    break;
+                }
+            }
+            subtrees.push(subtree);
+        }
+        subtrees.sort((a, b) => a.length - b.length);
+        return subtrees;
+    }
+
+    getIndentLevel(line) {
+        const match = line.match(/^(\s*)/);
+        return match ? match[1].length : 0;
+    }
+
+    getIndentSize(lines) {
+        for (let i = 1; i < lines.length; i++) {
+            const indentLevel = this.getIndentLevel(lines[i]);
+            if (indentLevel > 0) {
+                return indentLevel - this.getIndentLevel(lines[i - 1]);
+            }
+        }
+        return 2;
+    }
+}
+
+export default AriaSnapshotUtils