@dev-blinq/cucumber_client 1.0.1253-dev → 1.0.1255-dev

package/bin/assets/scripts/snapshot_capturer.js

@@ -0,0 +1,155 @@
+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;
+    }
+    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';
+                    }
+                }
+                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;
+
+        // 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;

package/bin/assets/scripts/unique_locators.js

@@ -0,0 +1,552 @@
+
+import DOM_Attr from "./dom_attr";
+import DOM_Parent from "./dom_parent";
+// import SnapshotCapturer from "./snapshot_capturer";
+import { __PW } from "./pw"
+
+class LocatorGenerator {
+	constructor(injectedScript, options = {}) {
+		this.locatorStrategies = {
+			text: "basic",
+			no_text: "no_text",
+			custom: "custom",
+			context: "context",
+			digitIgnore: "ignore_digit",
+			text_with_index: "text_with_index",
+		};
+		this.options = options;
+		this.dom_Attr = new DOM_Attr();
+		this.dom_Parent = new DOM_Parent();
+		this.PW = __PW;
+		this.injectedScript = injectedScript;
+	}
+
+	getMatchingElements(selector, options = {}) {
+		const { root = window.document, prefix, visible = true } = options;
+		if (visible) {
+			selector = `${selector} >> visible=true`;
+		}
+		if (prefix) {
+			selector = `${prefix} >> ${selector}`;
+		}
+		return this.injectedScript.querySelectorAll(
+			this.injectedScript.parseSelector(selector),
+			root)
+	}
+
+	getLocatorStrategies() {
+		return this.locatorStrategies;
+	}
+	getTextLocators(element, options) {
+		const injectedScript = this.injectedScript;
+		const selectorPartLists = this.PW.selectorGenerator.buildTextCandidates(injectedScript, element, options);
+		const result = [];
+		for (const selectorPartList of selectorPartLists) {
+			let tScore = 0;
+			const tSelectorList = [];
+			for (const selectorPart of selectorPartList) {
+				const { engine, selector } = selectorPart;
+				if (engine === "css") {
+					tSelectorList.push(selector);
+				} else {
+					tSelectorList.push(`${engine}=${selector}`);
+				}
+				tScore += selectorPart.score;
+			}
+			const selector = tSelectorList.join(" >> ");
+			const score = tScore / selectorPartList.length;
+			result.push({
+				css: selector,
+				score,
+			});
+		}
+		return result;
+	}
+	getNoTextLocators(element, options) {
+		const injectedScript = this.injectedScript;
+		const locators = this.PW.selectorGenerator.buildNoTextCandidates(injectedScript, element, options);
+		for (const locator of locators) {
+			if (locator.engine === "css") {
+				locator.css = locator.selector;
+			} else {
+				locator.css = `${locator.engine}=${locator.selector}`;
+			}
+			delete locator.engine; // remove engine to avoid memory leak
+			delete locator.selector; // remove selector to avoid memory leak
+		}
+		return locators;
+	}
+	getCustomLocators(element, options) {
+		const { customAttributes = [] } = this.options;
+		if (!customAttributes || !Array.isArray(customAttributes)) {
+			console.error("Custom attributes must be an array");
+			return [];
+		}
+
+		const result = [];
+		let hasAttribures = []
+		for (const customAttribute of customAttributes) {
+			if (!customAttribute || typeof customAttribute !== "string") {
+				console.error("Custom attribute must be a string");
+				continue;
+			}
+			const val = element.getAttribute(customAttribute);
+			if (val !== null) {
+				hasAttribures.push(customAttribute);
+				result.push({
+					css: `[${customAttribute}="${val}"]`,
+					score: 1,
+					priority: 1,
+					customAttribute,
+					value: val
+				})
+			}
+		}
+		return result;
+	}
+	getContextLocators(locators) {
+
+		if (!locators || !Array.isArray(locators)) {
+			console.error("Locators must be an array");
+			return [];
+		}
+		const result = [];
+		const textSet = new Set();
+		for (const locator of locators) {
+			const selector = locator.css;
+			if (!selector || typeof selector !== "string") {
+				console.error("Locator must have a valid css selector");
+				continue;
+			}
+			const parseResult = this.injectedScript.parseSelector(selector);
+			const parts = parseResult.parts;
+			if (!parts || !Array.isArray(parts) || parts.length === 0) {
+				console.error("Locator must have a valid css selector");
+				continue;
+			}
+			// ignore parts.length < 3
+			if (parts.length < 3) {
+				// console.warn("Locator must have at least 3 parts to be a context locator");
+				continue;
+			}
+			const firstPart = parts[0];
+			if (firstPart.name !== "internal:text") {
+				// console.warn("Locator must have internal:text as the first part to be a context locator");
+				continue;
+			}
+			const textBody = firstPart.body;
+			if (!textBody || typeof textBody !== "string" || textBody.length === 0) {
+				console.error("Locator must have a valid text in the first part to be a context locator");
+				continue;
+			}
+			const secondPart = parts[1];
+			if (secondPart.name !== "xpath") {
+				continue;
+			}
+			const xpath = secondPart.body;
+			if (!xpath || typeof xpath !== "string" || xpath.length === 0) {
+				// console.error("Locator must have a valid xpath in the second part to be a context locator");
+				continue;
+			}
+			const climbString = secondPart.body;
+			if (!climbString || typeof climbString !== "string" || climbString.length === 0) {
+				continue;
+			}
+			const climbStringRegex = /(\.\.)(\/\.\.)*/;
+			try {
+				const match = climbStringRegex.test(climbString);
+				if (match) {
+					const climbCount = climbString.split("..").length - 1;
+					const lastIndex = selector.indexOf(climbString);
+					const restOfSelector = selector.substring(lastIndex + climbString.length + 3).trim();
+					if (restOfSelector.length === 0) {
+						// console.warn("Locator must have a valid rest of selector after the xpath part to
+						// be a context locator");
+						continue;
+					}
+
+					const textLocator = `internal:text=${textBody}`;
+					const elements = this.getMatchingElements(textLocator, {});
+					if (elements.length !== 1) {
+						throw new Error("Context locator must have exactly one element matching the text part");
+
+					}
+					const textElement = elements[0];
+					// const text = this.PW.selectorUtils.elementText(textElement);
+					const text = this.injectedScript.utils.elementText(new Map(), textElement).full;
+					if (!textSet.has(text)) {
+						textSet.add(text);
+						result.push({
+							css: restOfSelector,
+							climb: climbCount,
+							text,
+							priority: 1,
+						});
+
+					}
+
+
+				}
+			} catch (error) {
+				console.error("Error parsing climb string:", error);
+				continue;
+
+			}
+
+		}
+		// Sort by text length to prioritize shorter texts
+		result.sort((a, b) => a.text.length - b.text.length);
+		return result;
+	}
+	getDigitIgnoreLocators(locators) {
+		const result = [];
+		if (!locators || !Array.isArray(locators)) {
+			console.error("Locators must be an array");
+			return [];
+		}
+
+		for (const locator of locators) {
+			const selector = locator.css;
+			if (!selector || typeof selector !== "string") {
+				console.error("Locator must have a valid css selector");
+				continue;
+			}
+			const parseresult = this.injectedScript.parseSelector(selector);
+			const parts = parseresult.parts;
+			if (!parts || !Array.isArray(parts) || parts.length === 0) {
+				console.error("Locator must have a valid css selector");
+				continue;
+			}
+			let finalSelector = "";
+			let hasDigitsInText = false;
+			for (const part of parts) {
+
+				if (part.name !== "internal:text") {
+					finalSelector += `${part.name === "css" ? "" : part.name}=${part.source} >> `;
+					continue;
+				}
+				if (typeof part.body !== "string" || part.body.length === 0) {
+					// console.error("Locator must have a valid text in the first part to be a digit ignore locator");
+					finalSelector += `${part.name === "css" ? "" : part.name}=${part.source} >> `;
+					continue;
+				}
+				const text = part.body;
+				const digitsRegex = /\d+/g;
+				hasDigitsInText = digitsRegex.test(text);
+
+				const regex = text.replace(/\d+/g, "\\d+");
+
+				finalSelector += `internal:text=${regex} >> `;
+
+			}
+			if (!hasDigitsInText) {
+				continue
+			}
+			if (finalSelector.endsWith(` >> `)) {
+				finalSelector = finalSelector.slice(0, -4);
+			}
+			if (finalSelector) {
+				result.push({
+					css: finalSelector,
+					priority: locator.priority || 1,
+				});
+			}
+		}
+		return result;
+	}
+	getTextwithIndexLocators(locators) {
+		if (!locators || !Array.isArray(locators)) {
+			console.error("Locators must be an array");
+			return [];
+		}
+		const result = [];
+		for (const locator of locators) {
+			if (!locator || !locator.css || typeof locator.css !== "string") {
+				console.error("Locator must have a valid css selector");
+				continue;
+			}
+			const index = locator.index;
+			if (typeof index !== "number" || index < 0) {
+				console.error("Locator must have a valid index");
+				continue;
+			}
+			result.push(locator);
+		}
+		return result;
+	}
+
+	getXPathSelector(climb) {
+		if (typeof climb !== "number" || climb < 0) {
+			// throw new Error("Climb must be a non-negative integer");
+			console.error("Climb must be a non-negative integer");
+			return "";
+		}
+		if (climb === 0) return "";
+		let selector = "xpath=..";
+		if (climb === 1) {
+			return selector;
+		}
+		for (let i = 1; i < climb; i++) {
+			selector += "/..";
+		}
+		return selector;
+
+	}
+	categorizeLocators(element, locators, options) {
+		const unique = [];
+		const nonUnique = [];
+		for (const locator of locators) {
+			const elements = this.getMatchingElements(locator.css, options);
+			if (elements.length === 1) {
+				if (element === elements[0]) {
+					locator.priority = 1;
+					unique.push(locator);
+				} else if (element.contains(elements[0])) {
+					locator.priority = 1;
+					const climb = this.dom_Parent.getClimbCountToParent(elements[0], element);
+					const climbSelector = this.getXPathSelector(climb);
+					const newSelector = `${locator.css} >> ${climbSelector}`;
+					locator.css = newSelector;
+					unique.push(locator);
+				}
+			} else {
+				locator.priority = 2;
+				locator.elements = elements;
+				nonUnique.push(locator);
+			}
+		}
+		return { unique, nonUnique };
+	}
+
+
+
+
+	getUniqueLocators(element, locatorGenerator = this.getNoTextLocators, options = {}) {
+		try {
+
+			const { maxLocators = 5, root = window.document.body, next = "LCA" } = options;
+
+			if (!element) {
+				return [];
+			}
+			if (element === root) {
+				if (element === window.document.documentElement) {
+					return [{
+						css: "html",
+						score: 1,
+						priority: 1,
+					}, {
+						css: ":root",
+						score: 1,
+						priority: 1,
+					}
+					]
+				} else {
+					return [{
+						css: ":root",
+						score: 1,
+						priority: 1,
+						// }, {
+						// 	css: ":root",
+						// 	score: 1,
+						// 	priority: 1,
+					}
+					]
+				}
+			}
+
+			console.log("Generating locators for element:", element);
+			const locators = locatorGenerator(element, options);
+			console.log("Generated locators:", locators);
+			if (!locators || !Array.isArray(locators)) {
+				// throw new Error("Locator generator did not return an array of locators");
+				console.error("Locator generator did not return an array of locators");
+				return [];
+			}
+
+			console.log("Categorizing locators for element:", element);
+			const categorizedLocators = this.categorizeLocators(element, locators, options);
+			console.log("Categorized locators:", categorizedLocators);
+			// categorizedLocators.unique = limitLocators(categorizedLocators.unique, options);
+			// categorizedLocators.nonUnique = limitLocators(categorizedLocators.nonUnique, options);
+
+			const { unique, nonUnique } = categorizedLocators;
+			const result = [];
+			if (unique.length > 0) {
+				result.push(...unique);
+			}
+			if (result.length >= maxLocators) {
+				return result.slice(0, maxLocators);
+			}
+			let nextElement = null;
+			for (const locator of nonUnique) {
+				const selector = locator.css ?? locator.selector;
+				const elements = locator.elements || this.getMatchingElements(selector, options);
+
+				if (next === "parent") {
+					nextElement = this.dom_Parent.getActualParent(element);
+				} else {
+
+					// find the branching element the child of common parent that contains the element
+					const branchingParent = this.dom_Parent.findBranchingParent(elements, element)
+					nextElement = branchingParent;
+				}
+
+				if (nextElement && nextElement !== element) {
+					if (root.contains(nextElement)) {
+						const _result = this.getUniqueLocators(nextElement, locatorGenerator, {
+							...options,
+							root,
+						});
+						for (const _locator of _result) {
+
+							if (result.length >= maxLocators) {
+								return result.slice(0, maxLocators);
+							}
+							const _selector = _locator.css ?? _locator.selector;
+							const fullSelector = `${_selector} >> ${selector}`;
+							const _elements = this.getMatchingElements(fullSelector, options);
+							const effectiveScore = (_locator.score + locator.score) / 2 + 100;
+							if (_elements.length === 1 && _elements[0] === element) {
+								_locator.css = fullSelector;
+								_locator.score = effectiveScore;
+								_locator.priority = 1; // unique locators have higher priority
+								result.push(_locator);
+							} else {
+								const index = _elements.indexOf(element);
+								if (index !== -1) {
+									// _locator.selector = fullSelector;
+									_locator.css = fullSelector;
+									_locator.index = index;
+									_locator.priority = 2; // non-unique locators have lower priority
+									_locator.score = effectiveScore;
+									result.push(_locator);
+								}
+							}
+
+						}
+
+					} else {
+						const index = elements.indexOf(element);
+						if (index !== -1) {
+							locator.index = index
+							locator.priority = 2; // non-unique locators have lower priority
+							result.push(locator);
+						}
+					}
+
+				} else {
+					const index = elements.indexOf(element);
+					if (index !== -1) {
+						locator.index = index
+						locator.priority = 2; // non-unique locators have lower priority
+						result.push(locator);
+					}
+				}
+
+				delete locator.elements; // remove elements to avoid memory leak
+				delete locator.strategy;
+				delete locator.engine;
+				delete locator.selector;
+			}
+
+			if (result.length === 0) {
+				const parent = this.dom_Parent.getActualParent(element);
+				const locs = this.getUniqueLocators(parent, locatorGenerator, {
+					...options,
+					root
+				});
+				result.push(...locs);
+			}
+
+
+			result.sort((a, b) => a.score - b.score);
+			console.log("Final locators:", result, element);
+			console.groupEnd();
+			return result.slice(0, maxLocators);
+		}
+		catch (error) {
+			console.error("Error in getUniqueLocators:", error);
+			return [];
+		}
+	}
+	getElementLocators(element, options = {}) {
+
+		const { excludeText = false } = options;
+
+		const allStrategyLocators = {
+			// [LOCATOR_STRATEGIES.text]: basicLocators,
+			// [LOCATOR_STRATEGIES.no_text]: noTextLocators,
+		}
+		if (this.locatorStrategies.options?.customAttributes) {
+			console.groupCollapsed("Generating Custom locators for element:", element);
+			const customLocators = this.getUniqueLocators(element, this.getCustomLocators.bind(this), options);
+			if (customLocators.length > 0) {
+				allStrategyLocators[this.locatorStrategies.custom] = customLocators;
+
+			}
+		}
+		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;
+			}
+
+			const textWithIndexLocators = this.getTextwithIndexLocators(basicLocators);
+			if (textWithIndexLocators.length > 0) {
+				allStrategyLocators[this.locatorStrategies.text_with_index] = textWithIndexLocators;
+			}
+			const digitIgnoreLocators = this.getDigitIgnoreLocators(basicLocators);
+			if (digitIgnoreLocators.length > 0) {
+				allStrategyLocators[this.locatorStrategies.digitIgnore] = digitIgnoreLocators;
+			}
+			const contextLocators = this.getContextLocators(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 (noTextLocators.length > 0) {
+			allStrategyLocators[this.locatorStrategies.no_text] = noTextLocators;
+		}
+		console.groupEnd();
+
+		let bestStrategy = this.getBestStrategy(allStrategyLocators);
+		if (!bestStrategy) {
+			console.warn("No locators found for element:", element);
+			bestStrategy = this.locatorStrategies.no_text;
+		}
+		allStrategyLocators.strategy = bestStrategy;
+
+		const locators = allStrategyLocators[allStrategyLocators.strategy];
+		const result = {
+			allStrategyLocators,
+			locators,
+			element_name: ""
+		}
+		console.log("Generated locators:", result);
+		return result
+	}
+	getBestStrategy(allStrategyLocators) {
+		const orderedPriorities = [
+			this.locatorStrategies.custom,
+			this.locatorStrategies.context,
+			this.locatorStrategies.text,
+			this.locatorStrategies.text_with_index,
+			this.locatorStrategies.digitIgnore,
+			this.locatorStrategies.no_text
+		];
+		for (const strategy of orderedPriorities) {
+			if (allStrategyLocators[strategy] && allStrategyLocators[strategy].length > 0) {
+				return strategy;
+			}
+		}
+		return null;
+	}
+}
+
+export default LocatorGenerator;