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

package/bin/assets/preload/recorderv3.js

@@ -920,7 +920,7 @@ class BVTRecorder {
     this.contextElement = null;
   }
   getElementProperties(element) {
-    if (!element || !(element instanceof HTMLElement)) {
+    if (!element || !(element instanceof HTMLElement || element instanceof SVGElement)) {
       throw new Error("Please provide a valid HTML element");
     }
 
@@ -955,6 +955,7 @@ class BVTRecorder {
     // 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;
       }
     }
@@ -962,6 +963,7 @@ class BVTRecorder {
     // 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;
       }
     }
@@ -989,7 +991,7 @@ class BVTRecorder {
       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,
@@ -1188,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"],

package/bin/assets/preload/unique_locators.js

@@ -24,7 +24,7 @@ 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);
 };

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

package/bin/assets/scripts/dom_attr.js

@@ -0,0 +1,372 @@
+
+class DOM_Attr {
+    /**
+     * Finds attributes that are unique to the target element
+     * @param {Element} target - Target element
+     * @param {Element[]} similarElements - Array of similar elements to compare against
+     * @returns {Object} - Object with unique attribute names as keys and their values
+     */
+    findUniqueAttributes(target, similarElements) {
+        if (!target || !Array.isArray(similarElements)) return {};
+
+        const targetAttrs = getElementAttributes(target);
+        const uniqueAttrs = {};
+
+        // Check each attribute of the target
+        for (const [attrName, attrValue] of Object.entries(targetAttrs)) {
+            let isUnique = true;
+
+            // Check if any similar element has the same attribute with the same value
+            for (const element of similarElements) {
+                if (element === target) continue; // Skip self
+
+                const elementAttrs = getElementAttributes(element);
+                if (elementAttrs[attrName] === attrValue) {
+                    isUnique = false;
+                    break;
+                }
+            }
+
+            if (isUnique) {
+                uniqueAttrs[attrName] = attrValue;
+            }
+        }
+
+        return uniqueAttrs;
+    }
+
+    /**
+ * Finds attributes that exist on target but not on similar elements
+ * @param {Element} target - Target element
+ * @param {Element[]} similarElements - Array of similar elements to compare against
+ * @returns {Object} - Object with attribute names that only target has
+ */
+    findExclusiveAttributes(target, similarElements) {
+        if (!target || !Array.isArray(similarElements)) return {};
+
+        const targetAttrs = getElementAttributes(target);
+        const exclusiveAttrs = {};
+
+        // Check each attribute of the target
+        for (const [attrName, attrValue] of Object.entries(targetAttrs)) {
+            let hasAttribute = false;
+
+            // Check if any similar element has this attribute (regardless of value)
+            for (const element of similarElements) {
+                if (element === target) continue; // Skip self
+
+                if (element.hasAttribute(attrName)) {
+                    hasAttribute = true;
+                    break;
+                }
+            }
+
+            if (!hasAttribute) {
+                exclusiveAttrs[attrName] = attrValue;
+            }
+        }
+
+        return exclusiveAttrs;
+    }
+    /**
+     * Finds classnames that are unique to the target element
+     * @param {Element} target - Target element
+     * @param {Element[]} similarElements - Array of similar elements to compare against
+     * @returns {Set<string>} - Set of unique classnames
+     */
+    findUniqueClassNames(target, similarElements) {
+        if (!target || !Array.isArray(similarElements)) return new Set();
+
+        const targetClasses = getElementClassNames(target);
+        const uniqueClasses = new Set();
+
+        // Check each class of the target
+        for (const className of targetClasses) {
+            let isUnique = true;
+
+            // Check if any similar element has the same class
+            for (const element of similarElements) {
+                if (element === target) continue; // Skip self
+
+                const elementClasses = getElementClassNames(element);
+                if (elementClasses.has(className)) {
+                    isUnique = false;
+                    break;
+                }
+            }
+
+            if (isUnique) {
+                uniqueClasses.add(className);
+            }
+        }
+
+        return uniqueClasses;
+    }
+
+    /**
+     * Finds attributes with different values between target and similar elements
+     * @param {Element} target - Target element
+     * @param {Element[]} similarElements - Array of similar elements to compare against
+     * @returns {Object} - Object with attribute names as keys and comparison info as values
+     */
+    findDifferentValueAttributes(target, similarElements) {
+        if (!target || !Array.isArray(similarElements)) return {};
+
+        const targetAttrs = getElementAttributes(target);
+        const differentAttrs = {};
+
+        // Get all attributes from all elements
+        const allAttributes = new Set(Object.keys(targetAttrs));
+        similarElements.forEach(element => {
+            if (element !== target) {
+                const attrs = getElementAttributes(element);
+                Object.keys(attrs).forEach(attr => allAttributes.add(attr));
+            }
+        });
+
+        // Check each attribute
+        for (const attrName of allAttributes) {
+            const targetValue = targetAttrs[attrName];
+            const otherValues = [];
+
+            similarElements.forEach(element => {
+                if (element !== target) {
+                    const attrs = getElementAttributes(element);
+                    const value = attrs[attrName];
+                    if (value !== undefined && value !== targetValue) {
+                        otherValues.push(value);
+                    }
+                }
+            });
+
+            if (otherValues.length > 0) {
+                differentAttrs[attrName] = {
+                    targetValue: targetValue || null,
+                    otherValues: [...new Set(otherValues)] // Remove duplicates
+                };
+            }
+        }
+
+        return differentAttrs;
+    }
+
+    /**
+ * Main function: Finds all differentiating attributes and classnames
+ * @param {Element} target - Target element to find differentiators for
+ * @param {Element[]} similarElements - Array of similar elements to compare against
+ * @param {Object} options - Options for the comparison
+ * @param {boolean} options.includeComputedStyles - Whether to include computed style differences
+ * @param {string[]} options.styleProperties - Array of CSS properties to check if includeComputedStyles is true
+ * @param {boolean} options.ignoreDataAttributes - Whether to ignore data-* attributes
+ * @param {boolean} options.ignoreAriaAttributes - Whether to ignore aria-* attributes
+ * @param {string[]} options.ignoreAttributes - Array of attribute names to ignore
+ * @param {boolean} options.caseSensitiveClasses - Whether class comparison should be case sensitive
+ * @returns {Object} - Comprehensive differentiating information
+ */
+    findDifferentiatingAttributes(target, similarElements, options = {}) {
+        const {
+            includeComputedStyles = false,
+            styleProperties = ['color', 'background-color', 'font-size', 'display', 'position'],
+            ignoreDataAttributes = false,
+            ignoreAriaAttributes = false,
+            ignoreAttributes = [],
+            caseSensitiveClasses = true
+        } = options;
+
+        // Validate inputs
+        if (!target) {
+            throw new Error('Target element is required');
+        }
+
+        if (!Array.isArray(similarElements)) {
+            throw new Error('similarElements must be an array');
+        }
+
+        // Filter out the target from similar elements if it exists
+        const filteredSimilarElements = similarElements.filter(el => el !== target);
+
+        if (filteredSimilarElements.length === 0) {
+            return {
+                uniqueAttributes: getElementAttributes(target),
+                exclusiveAttributes: getElementAttributes(target),
+                uniqueClassNames: getElementClassNames(target),
+                differentValueAttributes: {},
+                computedStyleDifferences: {},
+                summary: {
+                    hasUniqueAttributes: Object.keys(getElementAttributes(target)).length > 0,
+                    hasUniqueClasses: getElementClassNames(target).size > 0,
+                    totalDifferences: Object.keys(getElementAttributes(target)).length + getElementClassNames(target).size
+                }
+            };
+        }
+
+        // Helper function to filter attributes based on options
+        const shouldIgnoreAttribute = (attrName) => {
+            if (ignoreAttributes.includes(attrName)) return true;
+            if (ignoreDataAttributes && attrName.startsWith('data-')) return true;
+            if (ignoreAriaAttributes && attrName.startsWith('aria-')) return true;
+            return false;
+        };
+
+        // Filter attributes for target and similar elements
+        const filterAttributes = (attrs) => {
+            const filtered = {};
+            for (const [name, value] of Object.entries(attrs)) {
+                if (!shouldIgnoreAttribute(name)) {
+                    filtered[name] = value;
+                }
+            }
+            return filtered;
+        };
+
+        // Get filtered attributes
+        const targetAttrs = filterAttributes(getElementAttributes(target));
+
+        // Temporarily override attribute getting to use filtered attributes
+        const originalTarget = { ...target };
+        const originalGetElementAttributes = getElementAttributes;
+
+        const getFilteredAttributes = (element) => {
+            return filterAttributes(originalGetElementAttributes(element));
+        };
+
+        // Find unique attributes (same name and value combination is unique)
+        const uniqueAttributes = {};
+        for (const [attrName, attrValue] of Object.entries(targetAttrs)) {
+            let isUnique = true;
+
+            for (const element of filteredSimilarElements) {
+                const elementAttrs = getFilteredAttributes(element);
+                if (elementAttrs[attrName] === attrValue) {
+                    isUnique = false;
+                    break;
+                }
+            }
+
+            if (isUnique) {
+                uniqueAttributes[attrName] = attrValue;
+            }
+        }
+
+        // Find exclusive attributes (target has, others don't)
+        const exclusiveAttributes = {};
+        for (const [attrName, attrValue] of Object.entries(targetAttrs)) {
+            let hasAttribute = false;
+
+            for (const element of filteredSimilarElements) {
+                if (element.hasAttribute(attrName) && !shouldIgnoreAttribute(attrName)) {
+                    hasAttribute = true;
+                    break;
+                }
+            }
+
+            if (!hasAttribute) {
+                exclusiveAttributes[attrName] = attrValue;
+            }
+        }
+
+        // Find unique classnames
+        const targetClasses = getElementClassNames(target);
+        const uniqueClassNames = new Set();
+
+        for (const className of targetClasses) {
+            let isUnique = true;
+
+            for (const element of filteredSimilarElements) {
+                const elementClasses = getElementClassNames(element);
+                const hasClass = caseSensitiveClasses
+                    ? elementClasses.has(className)
+                    : Array.from(elementClasses).some(cls => cls.toLowerCase() === className.toLowerCase());
+
+                if (hasClass) {
+                    isUnique = false;
+                    break;
+                }
+            }
+
+            if (isUnique) {
+                uniqueClassNames.add(className);
+            }
+        }
+
+        // Find different value attributes
+        const differentValueAttributes = {};
+        const allAttributes = new Set(Object.keys(targetAttrs));
+
+        filteredSimilarElements.forEach(element => {
+            const attrs = getFilteredAttributes(element);
+            Object.keys(attrs).forEach(attr => allAttributes.add(attr));
+        });
+
+        for (const attrName of allAttributes) {
+            const targetValue = targetAttrs[attrName];
+            const otherValues = [];
+
+            filteredSimilarElements.forEach(element => {
+                const attrs = getFilteredAttributes(element);
+                const value = attrs[attrName];
+                if (value !== undefined && value !== targetValue) {
+                    otherValues.push(value);
+                }
+            });
+
+            if (otherValues.length > 0) {
+                differentValueAttributes[attrName] = {
+                    targetValue: targetValue || null,
+                    otherValues: [...new Set(otherValues)]
+                };
+            }
+        }
+
+        // Computed style differences
+        let computedStyleDifferences = {};
+        if (includeComputedStyles) {
+            const targetStyles = getComputedStyles(target, styleProperties);
+
+            for (const property of styleProperties) {
+                const targetValue = targetStyles[property];
+                const otherValues = [];
+
+                filteredSimilarElements.forEach(element => {
+                    const elementStyles = getComputedStyles(element, [property]);
+                    const value = elementStyles[property];
+                    if (value && value !== targetValue) {
+                        otherValues.push(value);
+                    }
+                });
+
+                if (otherValues.length > 0) {
+                    computedStyleDifferences[property] = {
+                        targetValue,
+                        otherValues: [...new Set(otherValues)]
+                    };
+                }
+            }
+        }
+
+        // Generate summary
+        const summary = {
+            hasUniqueAttributes: Object.keys(uniqueAttributes).length > 0,
+            hasExclusiveAttributes: Object.keys(exclusiveAttributes).length > 0,
+            hasUniqueClasses: uniqueClassNames.size > 0,
+            hasDifferentValues: Object.keys(differentValueAttributes).length > 0,
+            hasStyleDifferences: Object.keys(computedStyleDifferences).length > 0,
+            totalDifferences: Object.keys(uniqueAttributes).length +
+                uniqueClassNames.size +
+                Object.keys(differentValueAttributes).length +
+                Object.keys(computedStyleDifferences).length,
+            comparedAgainst: filteredSimilarElements.length
+        };
+
+        return {
+            uniqueAttributes,
+            exclusiveAttributes,
+            uniqueClassNames,
+            differentValueAttributes,
+            computedStyleDifferences,
+            summary
+        };
+    }
+}
+
+export default DOM_Attr;