@dev-blinq/cucumber_client 1.0.1275-dev → 1.0.1276-dev

package/bin/assets/scripts/unique_locators.js

@@ -1,6 +1,42 @@
 import DOM_Parent from "./dom_parent";
 import { __PW } from "./pw"
+const candidateAttributes = [
+	"slot",
+	"alt",
+	"name",
+	"placeholder",
+	"title",
+	"aria-label",
+	"aria-placeholder",
+	"role",
+	"data-testid",
+	"data-cy",
+];
+function quoteCSSAttributeValue(text) {
+	return `"${text.replace(/["\\]/g, (char) => "\\" + char)}"`;
+}
+function makeSelectorForId(id) {
+	return /^[a-zA-Z][a-zA-Z0-9\-\_]+$/.test(id) ? "#" + id : `[id=${quoteCSSAttributeValue(id)}]`;
+}
 
+function escapeClassName(className) {
+	let result = "";
+	for (let i = 0; i < className.length; i++)
+		result += cssEscapeCharacter(className, i);
+	return result;
+}
+function cssEscapeCharacter(s, i) {
+	const c = s.charCodeAt(i);
+	if (c === 0)
+		return "\uFFFD";
+	if (c >= 1 && c <= 31 || c >= 48 && c <= 57 && (i === 0 || i === 1 && s.charCodeAt(0) === 45))
+		return "\\" + c.toString(16) + " ";
+	if (i === 0 && c === 45 && s.length === 1)
+		return "\\" + s.charAt(i);
+	if (c >= 128 || c === 45 || c === 95 || c >= 48 && c <= 57 || c >= 65 && c <= 90 || c >= 97 && c <= 122)
+		return s.charAt(i);
+	return "\\" + s.charAt(i);
+}
 class LocatorGenerator {
 	constructor(injectedScript, options = {}) {
 		this.locatorStrategies = {
@@ -18,6 +54,83 @@ class LocatorGenerator {
 		this.cache = new Map();
 	}
 
+	generateUniqueCSSSelector(element, options) {
+		const root = options?.root || window.document;
+		const separator = options?.separator || " > ";
+		const isUnique = options?.isunique || ((selector) => this.getMatchingElements(selector, options).length === 1);
+		const noCSSId = options?.noCSSId || false;
+
+		if (!(element instanceof Element)) return "";
+
+		if (!root.contains(element)) return "";
+
+		let selector = "";
+		const id = element.getAttribute("id");
+		if (id && !/\d/.test(id) && (!noCSSId)) {
+			selector = makeSelectorForId(id);
+			if (isUnique(selector)) return selector;
+		}
+		if (element.tagName) {
+			selector = element.tagName.toLowerCase() + selector;
+			if (isUnique(selector)) return selector;
+		}
+
+		const classList = Array.from(element.classList).filter((c) => !/\d/.test(c));
+		if (classList.length) {
+			selector += classList.map((c) => "." + escapeClassName(c)).join("");
+			if (isUnique(selector)) return selector;
+		}
+
+		for (let attr of candidateAttributes) {
+			if (element.hasAttribute(attr)) {
+				let value = element.getAttribute(attr);
+				if (value === "") continue;
+				if (/\d/.test(value)) continue;
+				// Escape special characters in attribute value
+				value = value.replace(/[!"#$%&'()*+,./:;<=>?@[\]^`{|}~]/g, "\\$&");
+				selector += `[${attr}="${this.PW.selectorUtils.escapeForAttributeSelector(value)}"]`;
+			}
+		}
+		if (isUnique(selector)) return selector;
+
+		if (element === root) return selector;
+
+		let parentElement = element.parentElement;
+		if (!parentElement) {
+			// if element is shadowRoot
+			if (element.parentNode instanceof ShadowRoot) {
+				const parentElement = element.parentNode.host;
+				if (parentElement && parentElement !== root) {
+					const parentSelector = this.generateUniqueCSSSelector(parentElement, options);
+					selector = parentSelector + " >>> " + selector;
+					if (isUnique(selector)) return selector;
+				}
+			}
+		} else if (parentElement !== root) {
+			// if is a slotted element
+			if (element.assignedSlot) {
+				parentElement = element.assignedSlot.parentElement ?? element.assignedSlot.parentNode.host;
+			}
+
+			if (parentElement && parentElement !== root) {
+				const parentSelector = this.generateUniqueCSSSelector(parentElement, options);
+
+				selector = parentSelector + separator + selector;
+				if (isUnique(selector)) return selector;
+			}
+		}
+
+		const siblings = element.parentElement?.children;
+		if (siblings) {
+			for (let i = 0; i < siblings.length; i++) {
+				if (siblings[i] === element) {
+					return selector + `:nth-child(${i + 1})`;
+				}
+			}
+		}
+		return ""
+	}
+
 	getMatchingElements(selector, options = {}) {
 		const { root = window.document, prefix, visible = true } = options;
 		if (visible) {
@@ -99,7 +212,7 @@ class LocatorGenerator {
 		}
 		return result;
 	}
-	getContextLocators(locators) {
+	getContextLocators(element, locators) {
 
 		if (!locators || !Array.isArray(locators)) {
 			console.error("Locators must be an array");
@@ -163,12 +276,28 @@ class LocatorGenerator {
 					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");
+						// throw new Error("Context locator must have exactly one element matching the text part");
+						console.error("Context locator must have exactly one element matching the text part");
+						continue;
 
 					}
 					const textElement = elements[0];
 					// const text = this.PW.selectorUtils.elementText(textElement);
 					const text = this.injectedScript.utils.elementText(new Map(), textElement).full;
+
+					const fullSelector = `${textLocator} >> xpath=${xpath} >> ${restOfSelector}`;
+					const fullElements = this.getMatchingElements(fullSelector, {});
+					if (fullElements.length !== 1) {
+						// throw new Error("Context locator must have exactly one element matching the full selector");
+						console.error("Context locator must have exactly one element matching the full selector");
+						continue;
+					}
+					const fullElement = fullElements[0];
+					if (fullElement !== element) {
+						// throw new Error("Context locator must have the text element as the full element");
+						console.error("Context locator must have the text element as the full element");
+						continue;
+					}
 					if (!textSet.has(text)) {
 						textSet.add(text);
 						const loc = {
@@ -182,13 +311,10 @@ class LocatorGenerator {
 						}
 						result.push(loc);
 					}
-
-
 				}
 			} catch (error) {
 				console.error("Error parsing climb string:", error);
 				continue;
-
 			}
 
 		}
@@ -196,7 +322,7 @@ class LocatorGenerator {
 		result.sort((a, b) => a.text.length - b.text.length);
 		return result;
 	}
-	getDigitIgnoreLocators(locators) {
+	getDigitIgnoreLocators(element, locators) {
 		const result = [];
 		if (!locators || !Array.isArray(locators)) {
 			console.error("Locators must be an array");
@@ -232,9 +358,9 @@ class LocatorGenerator {
 				const digitsRegex = /\d+/g;
 				hasDigitsInText = digitsRegex.test(text);
 
-				const regex = text.replace(/\d+/g, "\\d+");
-
-				finalSelector += `internal:text=${regex} >> `;
+				let pattern = this.PW.stringUtils.escapeRegExp(text.substring(1, text.length - 2));
+				pattern = pattern.replace(digitsRegex, "\\d+");
+				finalSelector += `internal:text=/${pattern}/ >> `;
 
 			}
 			if (!hasDigitsInText) {
@@ -244,6 +370,15 @@ class LocatorGenerator {
 				finalSelector = finalSelector.slice(0, -4);
 			}
 			if (finalSelector) {
+				const elements = this.getMatchingElements(finalSelector, {});
+				if (elements.length !== 1) {
+					console.error("Digit ignore locator must have exactly one element matching the final selector");
+					continue;
+				}
+				if (elements[0] !== element) {
+					console.error("Digit ignore locator must match the original element");
+					continue;
+				}
 				result.push({
 					css: finalSelector,
 					priority: locator.priority || 1,
@@ -319,14 +454,6 @@ class LocatorGenerator {
 		return { unique, nonUnique };
 	}
 
-	getCategorizedLocators(element, options = {}) {
-		if (this.cache.has(element)) {
-			return this.cache.get(element);
-		}
-		const locators = this.getElementLocators(element, options);
-	}
-
-
 	getUniqueLocators(element, locatorGenerator = this.getNoTextLocators, options = {}) {
 		return this.getUniqueLocators2(element, locatorGenerator, options);
 	}
@@ -639,19 +766,30 @@ class LocatorGenerator {
 			if (textWithIndexLocators.length > 0) {
 				allStrategyLocators[this.locatorStrategies.text_with_index] = textWithIndexLocators;
 			}
-			const digitIgnoreLocators = this.getDigitIgnoreLocators(basicLocators);
+			const digitIgnoreLocators = this.getDigitIgnoreLocators(element, basicLocators);
 			if (digitIgnoreLocators.length > 0) {
 				allStrategyLocators[this.locatorStrategies.digitIgnore] = digitIgnoreLocators;
 			}
-			const contextLocators = this.getContextLocators(basicLocators);
+			const contextLocators = this.getContextLocators(element, 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;
+		} else {
+			const _locators = []
+			_locators.push({
+				css: this.generateUniqueCSSSelector(element, options),
+				score: 500,
+				priority: 3,
+			})
+			if (_locators.length > 0) {
+				allStrategyLocators[this.locatorStrategies.no_text] = _locators;
+			}
 		}
 		console.groupEnd();
 
@@ -662,7 +800,7 @@ class LocatorGenerator {
 		}
 		allStrategyLocators.strategy = bestStrategy;
 
-		const locators = allStrategyLocators[allStrategyLocators.strategy];
+		const locators = allStrategyLocators[allStrategyLocators.strategy] ?? [];
 		const result = {
 			allStrategyLocators,
 			locators,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-blinq/cucumber_client",
-  "version": "1.0.1275-dev",
+  "version": "1.0.1276-dev",
   "description": "",
   "main": "bin/index.js",
   "types": "bin/index.d.ts",
@@ -31,7 +31,7 @@
     "@cucumber/tag-expressions": "^6.1.1",
     "@dev-blinq/cucumber-js": "1.0.175-dev",
     "@faker-js/faker": "^8.1.0",
-    "automation_model": "1.0.755-dev",
+    "automation_model": "1.0.756-dev",
     "axios": "^1.7.4",
     "chokidar": "^3.6.0",
     "create-require": "^1.1.1",