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

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;

package/bin/assets/scripts/dom_parent.js

@@ -0,0 +1,185 @@
+class DOM_Parent {
+
+    getActualParent(element) {
+        if (!element || !(element instanceof Element)) {
+            throw new Error('Invalid element provided');
+        }
+
+        // TODO: account for slotted elements 
+
+        if (element.assignedSlot) {
+            return element.assignedSlot
+        }
+        // Get the actual parent element, skipping shadow DOM if necessary
+        let parent = element.parentElement;
+        if (parent) {
+            return parent;
+        }
+        const parentNode = element.parentNode;
+        if (parentNode && parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            // If the parent is a shadow root, return its host
+            return parentNode.host || null;
+        }
+        return null;
+
+    }
+
+    getFullAncestorChain(element) {
+        if (!element || !(element instanceof Element)) {
+            throw new Error('Invalid element provided');
+        }
+
+        const ancestors = [];
+        let currentElement = element;
+
+        while (currentElement) {
+            ancestors.push(currentElement);
+            currentElement = this.getActualParent(currentElement);
+        }
+
+        return ancestors;
+    }
+    getFullAncestorChainToRoot(element, root) {
+        if (!element || !(element instanceof Element)) {
+            throw new Error('Invalid element provided');
+        }
+        if (!root || !(root instanceof Element)) {
+            throw new Error('Invalid root provided');
+        }
+        if (!this.containsElementCrossShadow(root, element)) {
+            throw new Error('Root does not contain the element');
+        }
+        const ancestors = [];
+        let currentElement = element;
+        while (currentElement && currentElement !== root && this.containsElementCrossShadow(root, currentElement)) {
+            ancestors.push(currentElement);
+            currentElement = this.getActualParent(currentElement);
+
+        }
+        if (currentElement === root) {
+            ancestors.push(currentElement);
+        }
+        return ancestors;
+    }
+    getClimbCountToParent(element, targetParent) {
+        if (!element || !(element instanceof Element)) {
+            throw new Error('Invalid element provided');
+        }
+        if (!targetParent || !(targetParent instanceof Element)) {
+            throw new Error('Invalid target parent provided');
+        }
+
+        let count = 0;
+        let currentElement = element;
+
+        while (currentElement && currentElement !== targetParent) {
+            currentElement = this.getActualParent(currentElement);
+            count++;
+        }
+
+        return currentElement === targetParent ? count : -1; // Return -1 if target parent is not found
+    }
+
+    containsElementCrossShadow(element, target) {
+        if (!element || !(element instanceof Element)) {
+            throw new Error('Invalid element provided');
+        }
+        if (!target || !(target instanceof Element)) {
+            throw new Error('Invalid target provided');
+        }
+
+        // Check if the element contains the target, accounting for shadow DOM
+        let currentElement = target;
+
+        while (currentElement) {
+            if (currentElement === element) {
+                return true;
+            }
+            currentElement = this.getActualParent(currentElement);
+        }
+
+        return false;
+    }
+
+    findLowestCommonAncestor(elements) {
+        if (!Array.isArray(elements) || elements.length === 0) {
+            throw new Error('Invalid elements array provided');
+        }
+
+        // Ensure all elements are valid
+        for (const el of elements) {
+            if (!(el instanceof Element)) {
+                throw new Error('All items in the array must be DOM Elements');
+            }
+        }
+
+        // Start with the first element's ancestors
+        let commonAncestors = this.getFullAncestorChain(elements[0]);
+
+        commonAncestors.reverse(); // Reverse to start from the closest ancestor
+
+        // Iterate through the rest of the elements
+        for (let i = 1; i < elements.length; i++) {
+            const currentAncestors = this.getFullAncestorChain(elements[i]);
+            currentAncestors.reverse(); // Reverse to start from the closest ancestor
+            commonAncestors = commonAncestors.filter(ancestor =>
+                currentAncestors.includes(ancestor)
+            );
+        }
+
+        // Return the lowest common ancestor, or null if none found
+        return commonAncestors.length > 0 ? commonAncestors[commonAncestors.length - 1] : null;
+    }
+
+    /**
+ *  Finds the branching parent for a target element within an array of elements
+ * The branching parent is the direct child of the common ancestor that contains the target
+ * @param {Element[]} elements - Array of elements (target must be included)
+ * @param {Element} target - Target element to find branching parent for
+
+ * @returns {Element|null} - The branching parent element, or null if not found
+ */
+    findBranchingParent(elements, target) {
+        if (!Array.isArray(elements) || elements.length === 0) {
+            throw new Error('Invalid elements array provided');
+        }
+        if (!(target instanceof Element)) {
+            throw new Error('Target must be a DOM Element');
+        }
+
+        // Ensure all elements are valid
+        for (const el of elements) {
+            if (!(el instanceof Element)) {
+                throw new Error('All items in the array must be DOM Elements');
+            }
+        }
+        // Check if the target is in the elements array
+        if (!elements.includes(target)) {
+            // throw new Error("Target element must be included in the elements array");
+            console.warn("Target element must be included in the elements array, returning null");
+            return null;
+        }
+        const allTargetparents = this.getFullAncestorChain(target);
+
+        //  reverse the order of parents to start from the closest parent
+        allTargetparents.reverse();
+
+        // Find the parent that only contains the target and no other elements
+        let branchingParent = null;
+        for (const parent of allTargetparents) {
+            /// find all elements that are inside this parent
+            const allElementsThatAreInsideParent = elements.filter(el => this.containsElementCrossShadow(parent, el));
+            // If the parent contains only the target element, it is the branching parent
+            if (allElementsThatAreInsideParent.length === 1 && allElementsThatAreInsideParent[0] === target) {
+                branchingParent = parent;
+                break;
+            }
+        }
+        if (branchingParent) {
+            return branchingParent;
+        }
+
+        return null; // No branching parent found
+    }
+}
+export default DOM_Parent;

package/bin/assets/scripts/event_utils.js

@@ -0,0 +1,105 @@
+import { __PW } from "./pw";
+
+const closestCrossShadow = __PW.domUtils.closestCrossShadow;
+const isElementVisible = __PW.domUtils.isElementVisible;
+
+export default class EventUtils {
+    deepEventTarget(event) {
+        return event.composedPath()[0];
+    }
+    deepActiveElement(document) {
+        let activeElement = document.activeElement;
+        while (activeElement && activeElement.shadowRoot && activeElement.shadowRoot.activeElement)
+            activeElement = activeElement.shadowRoot.activeElement;
+        return activeElement;
+    }
+    modifiersForEvent(event) {
+        return (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0) | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
+    }
+    buttonForEvent(event) {
+        switch (event.which) {
+            case 1:
+                return "left";
+            case 2:
+                return "middle";
+            case 3:
+                return "right";
+        }
+        return "left";
+    }
+    positionForEvent(event) {
+        const targetElement = event.target;
+        if (targetElement.nodeName !== "CANVAS") return;
+        return {
+            x: event.offsetX,
+            y: event.offsetY,
+        };
+    }
+    consumeEvent(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+    }
+    asCheckbox(node) {
+        if (!node || node.nodeName !== "INPUT") return null;
+        const inputElement = node;
+        return ["checkbox", "radio"].includes(inputElement.type) ? inputElement : null;
+    }
+    isRangeInput(node) {
+        if (!node || node.nodeName !== "INPUT") return false;
+        const inputElement = node;
+        return inputElement.type.toLowerCase() === "range";
+    }
+    addEventListener(target, eventName, listener, useCapture) {
+        target.addEventListener(eventName, listener, useCapture);
+        const remove = () => {
+            target.removeEventListener(eventName, listener, useCapture);
+        };
+        return remove;
+    }
+    removeEventListeners(listeners) {
+        for (const listener of listeners) listener();
+        listeners.splice(0, listeners.length);
+    }
+
+    getNearestInteractiveElement(targetElement, root = window.document) {
+        try {
+            if (!targetElement.matches("input,textarea,select") && !targetElement.isContentEditable) {
+                const interactiveParent = closestCrossShadow(
+                    targetElement,
+                    "button,select,input,[role=button],[role=checkbox],[role=radio],a,[role=link]",
+                    root
+                );
+                if (interactiveParent && isElementVisible(interactiveParent)) return interactiveParent;
+            }
+            return targetElement;
+        } catch (e) {
+            console.error(e);
+            // bvtRecorderBindings.log(`Error in getNearestInteractiveElement: ${e.message}`);
+            return targetElement;
+        }
+    }
+    shouldGenerateKeyPressFor(event) {
+        // Enter aka. new line is handled in input event.
+        if (
+            event.key === "Enter" &&
+            (this.deepEventTarget(event).nodeName === "TEXTAREA" || this.deepEventTarget(event).isContentEditable)
+        )
+            return false;
+        // Backspace, Delete, AltGraph are changing input, will handle it there.
+        if (["Backspace", "Delete", "AltGraph"].includes(event.key)) return false;
+        // Ignore the QWERTZ shortcut for creating a at sign on MacOS
+        if (event.key === "@" && event.code === "KeyL") return false;
+        // Allow and ignore common used shortcut for pasting.
+        if (navigator.platform.includes("Mac")) {
+            if (event.key === "v" && event.metaKey) return false;
+        } else {
+            if (event.key === "v" && event.ctrlKey) return false;
+            if (event.key === "Insert" && event.shiftKey) return false;
+        }
+        if (["Shift", "Control", "Meta", "Alt", "Process"].includes(event.key)) return false;
+        const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
+        if (event.key.length === 1 && !hasModifier) return !!this.asCheckbox(this.deepEventTarget(event));
+        return true;
+    }
+}