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

package/bin/assets/preload/accessibility.js

@@ -2,7 +2,7 @@ function getElementAccessibleDescription(element, includeHidden) {
   let accessibleDescription = null;
 
   // https://w3c.github.io/accname/#mapping_additional_nd_description
-  //  https://www.w3.org/TR/html-aam-1.0/#accdesc-computation
+  // https://www.w3.org/TR/html-aam-1.0/#accdesc-computation
   accessibleDescription = "";
 
   if (element.hasAttribute("aria-describedby")) {

package/bin/assets/preload/find_context.js

@@ -511,7 +511,7 @@ function findContext(element) {
     const textsInnerText = [];
     for (let i = 0; i < texts.length; i++) {
       const text = texts[i];
-      textsInnerText.push(text.textContent);
+      textsInnerText.push(text.parentElement.textContent.trim());
       // set attribute to the text: blinq-text-${key}-${i}
       text.parentElement.setAttribute(`blinq-text-${key}-${i}`, "");
     }

package/bin/assets/preload/generateSelector.js

@@ -196,6 +196,30 @@ function escapeRegExp(s) {
   // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
 }
+function enclosingShadowRootOrDocument(element) {
+  let node = element;
+  while (node.parentNode) node = node.parentNode;
+  if (node.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */ || node.nodeType === 9 /* Node.DOCUMENT_NODE */)
+    return node;
+}
+function getIdRefs(element, ref) {
+  if (!ref) return [];
+  const root = enclosingShadowRootOrDocument(element);
+  if (!root) return [];
+  try {
+    const ids = ref.split(" ").filter((id) => !!id);
+    const set = new Set();
+    for (const id of ids) {
+      // https://www.w3.org/TR/wai-aria-1.2/#mapping_additional_relations_error_processing
+      // "If more than one element has the same ID, the user agent SHOULD use the first element found with the given ID"
+      const firstElement = root.querySelector("#" + CSS.escape(id));
+      if (firstElement) set.add(firstElement);
+    }
+    return [...set];
+  } catch (e) {
+    return [];
+  }
+}
 function getAriaLabelledByElements(element) {
   const ref = element.getAttribute("aria-labelledby");
   if (ref === null) return null;

package/bin/assets/preload/locators.js

@@ -697,6 +697,24 @@ function querySelector_shadow_aware(element, selector) {
 }
 window.querySelector_shadow_aware = querySelector_shadow_aware;
 
+function findElement(css, scope = document) {
+  // return null if no css provided
+  if (!css) return null;
+  const selector = window.__injectedScript.parseSelector(css);
+  try {
+    const elements = window.__injectedScript.querySelectorAll(selector, scope, true);
+    if (!elements) return null;
+    if (elements.length === 1) {
+      return elements[0];
+    } else {
+      return elements;
+    }
+  } catch (error) {
+    return null;
+  }
+}
+window.findElement = findElement;
+
 // export {
 // 	getUniqueLocators,
 // 	getBasicInfo,

package/bin/assets/preload/recorderv3.js

@@ -304,13 +304,16 @@ function findMatchingElements(inputSnapshot, objectSet) {
 
   // For each subtree, check for matches in the object set
   subtrees.forEach((subtree) => {
-    const subtreeText = subtree.join("\n");
+    const subtreeText = subtree.map((t) => t.trim()).join("\n");
 
     // Look for matching snapshots in the object set
     for (const obj of objectSet) {
       // Normalize snapshots for comparison (trim whitespace, etc.)
       const normalizedSubtree = subtreeText.trim();
-      const normalizedSnapshot = obj.snapshot.trim();
+      const normalizedSnapshot = obj.snapshot
+        .split("\n")
+        .map((s) => s.trim())
+        .join("\n");
 
       // Check if the current object's snapshot matches our subtree
       if (normalizedSnapshot === normalizedSubtree) {
@@ -456,7 +459,7 @@ class BVTRecorder {
       getAction: (e) => {
         consumeEvent(e);
       },
-      getInterestedElement: () => {},
+      getInterestedElement: () => { },
       hoverOutlineStyle: "",
     });
 
@@ -471,7 +474,7 @@ class BVTRecorder {
         };
       },
       getAction: () => null,
-      getInterestedElement: () => {},
+      getInterestedElement: () => { },
       hoverOutlineStyle: "",
     });
 
@@ -486,7 +489,7 @@ class BVTRecorder {
         };
       },
       getAction: () => null,
-      getInterestedElement: () => {},
+      getInterestedElement: () => { },
       hoverOutlineStyle: "",
     });
 
@@ -916,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();
@@ -925,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,
@@ -944,13 +1009,16 @@ class BVTRecorder {
         value: el.value,
         tagName: el.tagName,
         text: el.textContent,
-        type: el.getAttribute("type"),
+        type: el.type, // el.getAttribute("type"),
         disabled: el.disabled,
         readOnly: el.readOnly,
         required: el.required,
         checked: el.checked,
         innerText: el.innerText,
       },
+      attributes: result.attributes,
+      properties: result.properties,
+      dataset: result.dataset,
     };
   }
   handleEvent(e) {
@@ -1058,7 +1126,10 @@ class BVTRecorder {
           mode: "IGNORE_DIGIT",
         });
         allStrategyLocators["ignore_digit"].push(locator);
-      } else if (locator.css.includes("text=") || locator.css.includes("[name=") || locator.css.includes("label=")) {
+      } else if (
+        locator.css &&
+        (locator.css.includes("text=") || locator.css.includes("[name=") || locator.css.includes("label="))
+      ) {
         locs.push(locator);
         allStrategyLocators["basic"].push(locator);
       } else {
@@ -1092,6 +1163,7 @@ class BVTRecorder {
         improviseLocators: false,
         mustIncludeCSSChain: true,
         root: commonParent,
+        noCSSId: true,
       });
       locators.forEach((locator) => {
         locator.text = text;
@@ -1118,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"],
@@ -1212,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`,
@@ -1352,7 +1425,8 @@ function countAccurances(css, scope = document) {
 }
 window.countAccurances = countAccurances;
 function findElement(css, scope = document) {
-  // return null if no css provided
+  // Note: If you change anything iin this function
+  // please change it in locators.js
   if (!css) return null;
   const selector = window.__injectedScript.parseSelector(css);
   try {

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