ff-dom 1.0.17 → 1.0.18-beta.1

package/src/utils/getElementsFromHTML.ts

@@ -1,593 +1,513 @@
-import { JSDOM, VirtualConsole } from 'jsdom';
-
-type ElementDetails = {
-  id?: string | null;
-  className?: string | null;
-  xpathByText?: string | null;
-  xpathById?: string | null;
-  xpathByClass?: string | null;
-  xpathAbsolute?: string | null;
-  xpathByName?: string | null;
-  xpathByPlaceholder?: string | null;
-  xpathByType?: string | null;
-  visibleText?: string | null;
-  relativeXpath?: string | null;
-  [key: string]: any;
-};
-
-const isUnique = (xpathResult: XPathResult): boolean => {
-  return xpathResult && xpathResult.snapshotLength === 1;
-};
-
-const getElementFromShadowRoot = (
-  element: Element,
-  selector: string
-): Element | null => {
-  const shadowRoot = (element as HTMLElement).shadowRoot;
-  if (shadowRoot && !selector.includes('dynamic')) {
-    return shadowRoot.querySelector(selector);
-  }
-  return null;
-};
-
-const isSVGElement = (element: Element): boolean => {
-  return (
-    typeof window !== 'undefined' &&
-    typeof SVGElement !== 'undefined' &&
-    element instanceof SVGElement
-  );
-};
-
-const getXPath = (element: Element, xpath: string): string | null => {
-  const window = element.ownerDocument.defaultView;
-  if (!window) return null;
-
-  const xpathEvaluator = new window.XPathEvaluator();
-  const xpathResult = xpathEvaluator.evaluate(xpath, element.ownerDocument, null, window.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-
-  return isUnique(xpathResult) ? xpath : null;
-};
-
-const getId = (element: Element | null): string | null => {
-  return element?.id || null;
-};
-
-const getClassName = (element: Element): string | null => {
-  return (element as HTMLElement).className || null;
-};
-
-const getVisibleText = (element: Element): string | null => {
-  return element.textContent?.trim() || null;
-};
-
-const getXPathByText = (element: Element): string | null => {
-  const text = getVisibleText(element);
-  if (text) {
-    const xpath = `//${element.nodeName.toLowerCase()}[text()='${text}']`;
-    return getXPath(element, xpath);
-  }
-  return null;
-};
-
-const getXPathById = (element: Element): string | null => {
-  if (element.id) {
-    const xpath = `//${element.nodeName.toLowerCase()}[@id='${element.id}']`;
-    return getXPath(element, xpath);
-  }
-  return null;
-};
-
-const getXPathByClass = (element: Element): string | null => {
-  const classNames = (element as HTMLElement).classList;
-  if (classNames.length > 0) {
-    const xpath = `//${element.nodeName.toLowerCase()}[@class='${
-      classNames[0]
-    }']`;
-    return getXPath(element, xpath);
-  }
-  return null;
-};
-
-const getXpathByName = (element: Element): string | null => {
-  const selector = element.nodeName.toLowerCase();
-  const elementEl = element as HTMLElement;
-
-  if (elementEl.hasAttribute('name')) {
-    const attrValue = elementEl.getAttribute('name');
-    const xpath = `//${selector}[@name='${attrValue}']`;
-    return getXPath(element, xpath) || null;
-  }
-  return null;
-};
-
-const getName = (element: Element): string | null => {
-  const elementEl = element as HTMLElement;
-
-  if (elementEl.hasAttribute('name')) {
-    const attrValue = elementEl.getAttribute('name');
-    const name = `${attrValue}`;
-    return name || null;
-  }
-  return null;
-};
-
-const getXpathByPlaceholder = (element: Element): string | null => {
-  const selector = element.nodeName.toLowerCase();
-  const elementEl = element as HTMLElement;
-
-  if (elementEl.hasAttribute('placeholder')) {
-    const attrValue = elementEl.getAttribute('placeholder');
-    const xpath = `//${selector}[@placeholder='${attrValue}']`;
-    return getXPath(element, xpath) || null;
-  }
-  return null;
-};
-
-const getXpathByType = (element: Element): string | null => {
-  const selector = element.nodeName.toLowerCase();
-  const elementEl = element as HTMLElement;
-
-  if (elementEl.hasAttribute('type')) {
-    const attrValue = elementEl.getAttribute('type');
-    const xpath = `//${selector}[@type='${attrValue}']`;
-    return getXPath(element, xpath) || null;
-  }
-  return null;
-};
-
-const getXPathAbsolute = (element: Element): string => {
-  const path: string[] = [];
-  while (element && element.nodeType === 1) {
-    // ELEMENT_NODE
-    let selector = element.nodeName.toLowerCase();
-    let sibling = element;
-    let siblingCount = 1;
-
-    while ((sibling = sibling.previousElementSibling as Element)) {
-      if (sibling.nodeName.toLowerCase() === element.nodeName.toLowerCase()) {
-        siblingCount++;
-      }
-    }
-
-    if (siblingCount > 1) {
-      selector += `[${siblingCount}]`;
-    }
-    path.unshift(selector);
-    element = element.parentNode as Element;
-  }
-  return '//' + path.join('/');
-};
-
-const relations: string[] = [
-  '/preceding-sibling',
-  '/following-sibling',
-  '/parent',
-  '/descendant',
-  '/ancestor',
-  '/self',
-  '/ancestor-or-self',
-  '/child',
-  '/preceding',
-  '/following',
-];
-
-const normalizeXPath = (xpath: string): string => {
-  // Replace text() comparisons like text() = 'something' with normalize-space(.) = 'something'
-  // to avoid issues with whitespace differences
-  xpath = xpath.replace(/text\(\)\s*=\s*['"](.+?)['"]/g, "normalize-space(.)='$1'");
-
-  // Replace direct . = 'something' comparisons with normalize-space(.) = 'something' for consistent text matching
-  xpath = xpath.replace(/\.\s*=\s*['"](.+?)['"]/g, "normalize-space(.)='$1'");
-  return xpath;
-};
-
-function getElementFromXPath(tempDiv: HTMLElement, xpath: string): Element | null {
-  let currentElement: Element | null = tempDiv;
-  const window = currentElement.ownerDocument.defaultView;
-  if (!window) return null;
-
-  const xpathEvaluator = new window.XPathEvaluator();
-  const xpathResult = xpathEvaluator.evaluate(
-    xpath,
-    currentElement.ownerDocument, //here even tempDiv can be passed
-    null,
-    window.XPathResult.FIRST_ORDERED_NODE_TYPE,
-    null
-  );
-  return xpathResult.singleNodeValue as Element | null;
-}
-
-function checkReferenceElementIsValid(locator: string, relation: string, tempDiv: HTMLElement): string | null {
-  if (locator.includes(relation)) {
-    const locatotSplitArray: string[] = locator.split(relation);
-    const sourceLoc = locatotSplitArray[0].trim();
-    let currentElement: Element | null = tempDiv;
-    const window = currentElement.ownerDocument.defaultView;
-    if (!window) return null;
-    if (!locator.includes('dynamic')) {
-      const xpathEvaluator = new window.XPathEvaluator();
-      const xpathResult = xpathEvaluator.evaluate(
-        sourceLoc,
-        currentElement.ownerDocument,
-        null,
-        window.XPathResult.FIRST_ORDERED_NODE_TYPE,
-        null
-      );
-
-      const sourceElement = xpathResult.singleNodeValue;
-      if (sourceElement) {
-        const xpathResultComplete = xpathEvaluator.evaluate(
-          locator,
-          currentElement.ownerDocument,
-          null,
-          window.XPathResult.FIRST_ORDERED_NODE_TYPE,
-          null
-        );
-        const completeElement = xpathResultComplete.singleNodeValue;
-        let relativeXpath: string;
-        if (completeElement) {
-          relativeXpath = locator;
-          return relativeXpath;
-        } else {
-          console.error('Complete Locator is Invalid:', locator);
-          relativeXpath = locator;
-          return relativeXpath;
-        }
-      } else {
-        console.error('Source Locator Not Found:', sourceLoc);
-      }
-    }
-  }
-  return null;
-}
-interface Locator {
-  name: string;
-  type: string;
-  value: string;
-  reference: string;
-  status: string;
-  isRecorded: string;
-  isSelfHealed?: string;
-}
-
-const getElementsFromHTML = (
-  name: string,
-  desc: string,
-  type: string,
-  locators: Locator[],
-  isShared: string,
-  projectId: string,
-  projectType: string,
-  isRecorded: string,
-  folder: string,
-  parentId: string,
-  parentName: string,
-  platform: string,
-  licenseId: string,
-  licenseType: string,
-  userId: string,
-  htmlString: string
-): ElementDetails | null => {
-  const virtualConsole = new VirtualConsole();
-  const dom = new JSDOM(htmlString, {
-    resources: 'usable',
-    runScripts: 'outside-only', // Prevents inline script execution in JSDOM
-    pretendToBeVisual: true,
-    virtualConsole,
-    includeNodeLocations: true,
-  });
-
-  const document = dom.window.document;
-  global.SVGElement = dom.window.SVGElement;
-  const tempDiv = document.createElement('div');
-  const elementsToRemove = document.querySelectorAll("script, style, link[rel='stylesheet'], meta, noscript, embed, object, param, source, svg");
-
-  if (elementsToRemove) {
-    elementsToRemove.forEach((tag) => {
-      (tag as Element).remove();
-    });
-  }
-
-  tempDiv.innerHTML = document.body.innerHTML;
-  const finalLocatorsSet: Set<string> = new Set();
-  let finalLocators: any[] = [];
-
-  function createLocator(base: any, overrides: Partial<any> = {}) {
-    const newLocator: any = {
-      name: overrides.name ?? base?.name,
-      type: overrides.type ?? base?.type,
-      value: overrides.value ?? base?.value,
-      reference: overrides.reference ?? base?.reference,
-      status: overrides.status ?? base?.status,
-      isRecorded: overrides.isRecorded ?? base?.isRecorded,
-    };
-
-      if (overrides.hasOwnProperty('isSelfHealed')) {
-        newLocator.isSelfHealed = overrides.isSelfHealed;
-      } else if (base?.hasOwnProperty('isSelfHealed')) {
-        newLocator.isSelfHealed = base.isSelfHealed;
-      }
-
-    pushUniqueLocator(newLocator);
-  }
-
-  function pushUniqueLocator(obj: any) {
-    const key = `${obj.name}:${obj.value}`;
-    if (!finalLocatorsSet.has(key)) {
-      finalLocatorsSet.add(key);
-      finalLocators.push(obj);
-    }
-  }
-
-  /** Locator Value Cleaner (Handles Special Scenarios) **/
-  const cleanLocatorValue = (val: string | null | undefined, type?: string, isRecorded?: string): string | null => {
-    if (!val) return null;
-
-    let cleaned = val.trim();
-
-    // Return null for empty or literal "null"
-    if (!cleaned || cleaned.toLowerCase() === 'null') return null;
-
-    // Unescape any escaped quotes
-    cleaned = cleaned.replace(/\\"/g, '"').replace(/\\'/g, "'");
-
-    // Remove surrounding single or double quotes
-    cleaned = cleaned.replace(/^['"](.+?)['"]$/, '$1');
-
-    // Replace double single quotes with a single quote inside XPath
-    cleaned = cleaned.replace(/''/g, "'");
-
-    // Normalize double quotes in XPath attribute selectors [@id="" -> [@id='']
-    cleaned = cleaned.replace(
-      /\[@(id|name)=['"]{2}(.+?)['"]{2}\]/g,
-      "[@$1='$2']"
-    );
-
-    // For DOM selectors (id or name), remove ALL quotes
-    if (type === 'id' || type === 'name') {
-      cleaned = cleaned.replace(/['"]/g, '').trim();
-    }
-
-    if(type === 'xpath' && isRecorded === 'Y' && !val.startsWith('//')) return null;
-
-    // Final check for empty strings
-    if (!cleaned || /^['"]{2}$/.test(cleaned)) return null;
-
-    return cleaned;
-  };
-
-  locators: for (const locator of locators) {
-    try {
-      const isRecorded = String(locator.isRecorded || '');
-      const recordedNLocators = locators.filter((l) => l.isRecorded === 'N');
-
-      if (recordedNLocators.length > 0) {
-        for (const locator of recordedNLocators) {
-          createLocator(locator);
-        }
-      }
-
-      const isDynamic = String(locator.value || locator.type || '');
-      if (
-        isDynamic.includes('dynamic') || isDynamic.match('dynamic') ||
-        isDynamic.includes('{') || isDynamic.includes('}')
-      ) {
-        createLocator(locator);
-        continue;
-      }
-
-      if (isShared.includes('Y')) {
-        break locators;
-      }
-
-      for (const relation of relations) {
-        try {
-          let targetElement: Element | null = null;
-          if (locator.value.startsWith('iframe')) {
-            const iframe = tempDiv.querySelector(
-              locator.value
-            ) as HTMLIFrameElement;
-            if (iframe) {
-              const iframeDocument =
-                iframe.contentDocument || iframe.contentWindow?.document;
-              if (iframeDocument) {
-                targetElement = iframeDocument.querySelector(
-                  locator.value.slice(6)
-                );
-              }
-            }
-          } else {
-            const selectors = locator.value.split('>>>'); // Custom delimiter for shadow DOM
-            let currentElement: Element | null = tempDiv;
-
-            for (const selector of selectors) {
-              if (currentElement) {
-                const trimmedSelector = selector.trim();
-                if (locator.name.includes('id') || trimmedSelector.startsWith('#')) {
-                  targetElement = currentElement.querySelector('#' + trimmedSelector);
-                } else if (locator.name.includes('className') || trimmedSelector.startsWith('.')) {
-                  targetElement = currentElement.querySelector('.' + trimmedSelector);
-                } else if (
-                  (locator.name.includes('xpath') || trimmedSelector.startsWith('//')) &&
-                  !locator.type.match('dynamic')
-                ) {
-                  if (tempDiv.innerHTML) {
-                    const normalizedXPath = normalizeXPath(trimmedSelector);
-                    targetElement = getElementFromXPath(tempDiv,normalizedXPath);
-                    if (targetElement) {
-                      createLocator(locator, {
-                        value: trimmedSelector,
-                        isRecorded: String(locator.isRecorded).includes('N') ? 'N' : 'Y',
-                      });
-                    }
-                  }
-                } else {
-                  targetElement = currentElement.querySelector(trimmedSelector);
-                  if (!targetElement) {
-                    targetElement = getElementFromShadowRoot(currentElement, trimmedSelector);
-                  }
-                }
-
-                if (!targetElement && isSVGElement(currentElement) && !locator.type.match('dynamic')) {
-                  targetElement = currentElement.querySelector(trimmedSelector);
-                }
-                currentElement = targetElement;
-              } else {
-                console.error('Element not found at:', selector);
-                break;
-              }
-            }
-          }
-
-          const locatorExists = (name: string, value: string): boolean => {
-            const key = `${name}:${value}`;
-            return finalLocatorsSet.has(key);
-          };
-
-          const xpathFunctions = [
-            { name: 'xpath', value: getXPathByText },
-            { name: 'xpath', value: getXPathById },
-            { name: 'xpath', value: getXPathByClass },
-            { name: 'xpath', value: getXPathAbsolute },
-            { name: 'xpath', value: getXpathByName },
-            { name: 'xpath', value: getXpathByPlaceholder },
-            { name: 'xpath', value: getXpathByType },
-          ];
-
-          if (targetElement) {
-            const idValue = getId(targetElement);
-            if (idValue && !locatorExists('id', idValue)) {
-              locators.forEach((loc) => {
-                createLocator(loc, {
-                  name: 'id',
-                  value: idValue,
-                  isRecorded: loc.value === idValue && loc.name === 'id' ? loc.isRecorded : 'Y',
-                  isSelfHealed: loc.value === idValue && loc.name === 'id' ? loc.isSelfHealed : 'Y'
-                });
-              });
-            }
-
-            const textValue = getVisibleText(targetElement);
-            if (textValue) {
-              locators.forEach((loc) => {
-                createLocator(loc, {
-                  name: 'linkText',
-                  type: 'static',
-                  value: textValue,
-                  isRecorded: loc.value === textValue ? loc.isRecorded : 'Y',
-                  isSelfHealed: loc.value === textValue ? loc.isSelfHealed : 'Y',
-                });        
-              });
-            }
-
-            const nameLocator = getName(targetElement);
-            if (nameLocator && !locatorExists('name', nameLocator)) {
-              locators.forEach((loc) => {
-                createLocator(loc, {
-                  name: 'name',
-                  type: 'static',
-                  value: nameLocator,
-                  isRecorded: loc.value === nameLocator && loc.name === 'name' ? loc.isRecorded : 'Y',
-                  isSelfHealed: loc.value === nameLocator && loc.name === 'name' ? loc.isSelfHealed : 'Y',
-                });
-              });
-            }
-
-            const classValue = getClassName(targetElement);
-            if (classValue && classValue.trim() !== '' && !locatorExists('className', classValue)) {
-              locators.forEach((loc) => {
-                 createLocator(loc, {
-                  name: 'className',
-                  value: classValue,
-                  isRecorded: loc.value === classValue && loc.name === 'className' ? loc.isRecorded : 'Y',
-                  isSelfHealed: loc.value === classValue && loc.name === 'className' ? loc.isSelfHealed : 'Y',
-                });
-              });
-            }
-
-            xpathFunctions.forEach((fn) => {
-              const fnValue = fn.value(targetElement);
-              locators.forEach((loc) => {
-                createLocator(loc, {
-                  name: fn.name,
-                  value: fnValue,
-                  isRecorded: loc.value === fnValue ? loc.isRecorded : 'Y',
-                  isSelfHealed: loc.value === fnValue ? loc.isSelfHealed : 'Y',
-                });
-              });
-            });
-
-            for (const locator of locators) {
-              try {
-                for (const loc of locators) {
-                  if (!loc.value) continue;
-
-                  for (const relation of relations) {
-                    if (loc.value.includes(relation)) {
-                      const relativeXpath = checkReferenceElementIsValid(loc.value, relation, tempDiv);
-                      if (relativeXpath) {
-                        createLocator(loc, {
-                          name: 'xpath',
-                          value: relativeXpath,
-                          isRecorded: locator.isRecorded !== '' && locator.isRecorded !== null ? locator.isRecorded : 'Y',
-                        });
-                        break;
-                      }
-                    }
-                  }
-                }
-              } catch (error) {
-                console.error('Error processing locator:', locator, error);
-              }
-            }
-
-            const finalAutoHealedLocators = finalLocators.map((obj) => ({
-              ...obj,
-              value: cleanLocatorValue(obj.value, obj.name, obj.isRecorded),
-            }));
-
-            const finalUniqueAutoHealedLocators: Locator[] = finalAutoHealedLocators.reduce(
-              (unique: Locator[], locator: Locator) => {
-                if (locator.value && !unique.some((l: Locator) => l.value === locator.value)) {
-                  unique.push(locator);
-                }
-                return unique;
-              }, [] as Locator[]
-            );
-
-            const jsonResult = [
-              {
-                name: `${name}`,
-                desc: `${desc}`,
-                type: `${type}`,
-                locators: finalUniqueAutoHealedLocators.filter((locator) => locator?.value != null && locator.value !== ''),
-                isShared: `${isShared}`,
-                projectId: `${projectId}`,
-                projectType: `${projectType}`,
-                isRecorded: `${isRecorded}`,
-                folder: `${folder}`,
-                parentId: `${parentId}`,
-                parentName: `${parentName}`,
-                platform: `${platform}`,
-                licenseId: `${licenseId}`,
-                licenseType: `${licenseType}`,
-                userId: `${userId}`,
-              },
-            ];
-
-            return jsonResult;
-          }
-        } catch (error) {
-          console.error('Error processing locator:', locator, error);
-          continue;
-        }
-      }
-    } catch (error) {
-      console.error('Error processing locator:', locator, error);
-      continue;
-    }
-  }
-  return null;
-};
-
-export { getElementsFromHTML };
+import { ElementRecord, Locator } from "../types/locator.ts";
+import { parseDOM } from "./xpath.ts";
+import { isSvg, normalizeXPath } from "./xpathHelpers.ts";
+
+type ElementDetails = {
+  id?: string | null;
+  className?: string | null;
+  xpathByText?: string | null;
+  xpathById?: string | null;
+  xpathByClass?: string | null;
+  xpathAbsolute?: string | null;
+  xpathByName?: string | null;
+  xpathByPlaceholder?: string | null;
+  xpathByType?: string | null;
+  visibleText?: string | null;
+  relativeXpath?: string | null;
+  [key: string]: any;
+};
+
+const getElementFromShadowRoot = (
+  element: Element,
+  selector: string
+): Element | null => {
+  const shadowRoot = (element as HTMLElement).shadowRoot;
+  if (shadowRoot && !selector.includes("dynamic")) {
+    return shadowRoot.querySelector(selector);
+  }
+  return null;
+};
+
+const getId = (element: Element | null): string | null => {
+  return element?.id || null;
+};
+
+const getClassName = (element: Element): string | null => {
+  return (element as HTMLElement).className || null;
+};
+
+const getVisibleText = (element: Element): string | null => {
+  return element.textContent?.trim() || null;
+};
+
+const getName = (element: Element): string | null => {
+  const elementEl = element as HTMLElement;
+
+  if (elementEl.hasAttribute("name")) {
+    const attrValue = elementEl.getAttribute("name");
+    const name = `${attrValue}`;
+    return name || null;
+  }
+  return null;
+};
+
+const relations: string[] = [
+  "/preceding-sibling",
+  "/following-sibling",
+  "/parent",
+  "/descendant",
+  "/ancestor",
+  "/self",
+  "/ancestor-or-self",
+  "/child",
+  "/preceding",
+  "/following",
+];
+
+function getElementFromXPath(
+  tempDiv: HTMLElement,
+  xpath: string
+): Element | null {
+  let currentElement: Element | null = tempDiv;
+  const window = currentElement.ownerDocument.defaultView;
+  if (!window) return null;
+
+  const xpathEvaluator = new window.XPathEvaluator();
+  const xpathResult = xpathEvaluator.evaluate(
+    xpath,
+    currentElement.ownerDocument, //here even tempDiv can be passed
+    null,
+    window.XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null
+  );
+  return xpathResult.singleNodeValue as Element | null;
+}
+
+function checkReferenceElementIsValid(
+  locator: string,
+  relation: string,
+  tempDiv: HTMLElement
+): string | null {
+  if (locator.includes(relation)) {
+    const locatotSplitArray: string[] = locator.split(relation);
+    const sourceLoc = locatotSplitArray[0].trim();
+    let currentElement: Element | null = tempDiv;
+    const window = currentElement.ownerDocument.defaultView;
+    if (!window) return null;
+    if (!locator.includes("dynamic")) {
+      const xpathEvaluator = new window.XPathEvaluator();
+      const xpathResult = xpathEvaluator.evaluate(
+        sourceLoc,
+        currentElement.ownerDocument,
+        null,
+        window.XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null
+      );
+
+      const sourceElement = xpathResult.singleNodeValue;
+      if (sourceElement) {
+        const xpathResultComplete = xpathEvaluator.evaluate(
+          locator,
+          currentElement.ownerDocument,
+          null,
+          window.XPathResult.FIRST_ORDERED_NODE_TYPE,
+          null
+        );
+        const completeElement = xpathResultComplete.singleNodeValue;
+        let relativeXpath: string;
+        if (completeElement) {
+          relativeXpath = locator;
+          return relativeXpath;
+        } else {
+          console.error("Complete Locator is Invalid:", locator);
+          relativeXpath = locator;
+          return relativeXpath;
+        }
+      } else {
+        console.error("Source Locator Not Found:", sourceLoc);
+      }
+    }
+  }
+  return null;
+}
+
+const getElementsFromHTML = (
+  record: ElementRecord,
+  docmt: Document
+): ElementDetails | null => {
+  const document = docmt;
+  // global.SVGElement = document.defaultView?.SVGElement!;
+  const tempDiv = document.createElement("div");
+  const elementsToRemove = document.querySelectorAll(
+    "script, style, link[rel='stylesheet'], meta, noscript, embed, object, param, source, svg"
+  );
+
+  if (elementsToRemove) {
+    elementsToRemove.forEach((tag) => {
+      (tag as Element).remove();
+    });
+  }
+
+  tempDiv.innerHTML = document.body.innerHTML;
+  const finalLocatorsSet: Set<string> = new Set();
+  let finalLocators: any[] = [];
+
+  function createLocator(base: any, overrides: Partial<any> = {}) {
+    const newLocator: any = {
+      name: overrides.name ?? base?.name,
+      type: overrides.type ?? base?.type,
+      value: overrides.value ?? base?.value,
+      reference: overrides.reference ?? base?.reference,
+      status: overrides.status ?? base?.status,
+      isRecorded: overrides.isRecorded ?? base?.isRecorded,
+    };
+
+    if (overrides.hasOwnProperty("isSelfHealed")) {
+      newLocator.isSelfHealed = overrides.isSelfHealed;
+    } else if (base?.hasOwnProperty("isSelfHealed")) {
+      newLocator.isSelfHealed = base.isSelfHealed;
+    }
+
+    pushUniqueLocator(newLocator);
+  }
+
+  function pushUniqueLocator(obj: any) {
+    const key = `${obj.name}:${obj.value}`;
+    if (!finalLocatorsSet.has(key)) {
+      finalLocatorsSet.add(key);
+      finalLocators.push(obj);
+    }
+  }
+
+  /** Locator Value Cleaner (Handles Special Scenarios) **/
+  const cleanLocatorValue = (
+    val: string | null | undefined,
+    type?: string,
+    isRecorded?: string
+  ): string | null => {
+    if (!val) return null;
+
+    let cleaned = val.trim();
+
+    // Return null for empty or literal "null"
+    if (!cleaned || cleaned.toLowerCase() === "null") return null;
+
+    // Unescape any escaped quotes
+    cleaned = cleaned.replace(/\\"/g, '"').replace(/\\'/g, "'");
+
+    // Remove surrounding single or double quotes
+    cleaned = cleaned.replace(/^['"](.+?)['"]$/, "$1");
+
+    // Replace double single quotes with a single quote inside XPath
+    cleaned = cleaned.replace(/''/g, "'");
+
+    // Normalize double quotes in XPath attribute selectors [@id="" -> [@id='']
+    cleaned = cleaned.replace(
+      /\[@(id|name)=['"]{2}(.+?)['"]{2}\]/g,
+      "[@$1='$2']"
+    );
+
+    // For DOM selectors (id or name), remove ALL quotes
+    if (type === "id" || type === "name") {
+      cleaned = cleaned.replace(/['"]/g, "").trim();
+    }
+
+    if (type === "xpath" && isRecorded === "Y" && !val.startsWith("//"))
+      return null;
+
+    // Final check for empty strings
+    if (!cleaned || /^['"]{2}$/.test(cleaned)) return null;
+
+    return cleaned;
+  };
+
+  locators: for (const locator of record.locators) {
+    try {
+      const isRecorded = String(locator.isRecorded || "");
+      const recordedNLocators = record.locators.filter((l) => l.isRecorded === "N");
+
+      if (recordedNLocators.length > 0) {
+        for (const locator of recordedNLocators) {
+          createLocator(locator);
+        }
+      }
+
+      const isDynamic = String(locator.value || locator.type || "");
+      if (
+        isDynamic.includes("dynamic") ||
+        isDynamic.match("dynamic") ||
+        isDynamic.includes("{") ||
+        isDynamic.includes("}")
+      ) {
+        createLocator(locator);
+        continue;
+      }
+
+      if (record.isShared.includes("Y")) {
+        break locators;
+      }
+
+      for (const relation of relations) {
+        try {
+          let targetElement: Element | null = null;
+          if (locator.value.startsWith("iframe")) {
+            const iframe = tempDiv.querySelector(
+              locator.value
+            ) as HTMLIFrameElement;
+            if (iframe) {
+              const iframeDocument =
+                iframe.contentDocument || iframe.contentWindow?.document;
+              if (iframeDocument) {
+                targetElement = iframeDocument.querySelector(
+                  locator.value.slice(6)
+                );
+              }
+            }
+          } else {
+            const selectors = locator.value.split(">>>"); // Custom delimiter for shadow DOM
+            let currentElement: Element | null = tempDiv;
+
+            for (const selector of selectors) {
+              if (currentElement) {
+                const trimmedSelector = selector.trim();
+                if (
+                  locator.name.includes("id") ||
+                  trimmedSelector.startsWith("#")
+                ) {
+                  targetElement = currentElement.querySelector(
+                    "#" + trimmedSelector
+                  );
+                } else if (
+                  locator.name.includes("className") ||
+                  trimmedSelector.startsWith(".")
+                ) {
+                  targetElement = currentElement.querySelector(
+                    "." + trimmedSelector
+                  );
+                } else if (
+                  (locator.name.includes("xpath") ||
+                    trimmedSelector.startsWith("//")) &&
+                  !locator.type.match("dynamic")
+                ) {
+                  if (tempDiv.innerHTML) {
+                    const normalizedXPath = normalizeXPath(trimmedSelector);
+                    targetElement = getElementFromXPath(
+                      tempDiv,
+                      normalizedXPath
+                    );
+                    if (targetElement) {
+                      createLocator(locator, {
+                        value: trimmedSelector,
+                        isRecorded: String(locator.isRecorded).includes("N")
+                          ? "N"
+                          : "Y",
+                      });
+                    }
+                  }
+                } else {
+                  targetElement = currentElement.querySelector(trimmedSelector);
+                  if (!targetElement) {
+                    targetElement = getElementFromShadowRoot(
+                      currentElement,
+                      trimmedSelector
+                    );
+                  }
+                }
+
+                if (
+                  !targetElement &&
+                  isSvg(currentElement) &&
+                  !locator.type.match("dynamic")
+                ) {
+                  targetElement = currentElement.querySelector(trimmedSelector);
+                }
+                currentElement = targetElement;
+              } else {
+                console.error("Element not found at:", selector);
+                break;
+              }
+            }
+          }
+
+          const locatorExists = (name: string, value: string): boolean => {
+            const key = `${name}:${value}`;
+            return finalLocatorsSet.has(key);
+          };
+
+          if (targetElement) {
+            const idValue = getId(targetElement);
+            if (idValue && !locatorExists("id", idValue)) {
+              record.locators.forEach((loc) => {
+                createLocator(loc, {
+                  name: "id",
+                  value: idValue,
+                  isRecorded:
+                    loc.value === idValue && loc.name === "id"
+                      ? loc.isRecorded
+                      : "Y",
+                  isSelfHealed:
+                    loc.value === idValue && loc.name === "id"
+                      ? loc.isSelfHealed
+                      : "Y",
+                });
+              });
+            }
+
+            const textValue = getVisibleText(targetElement);
+            if (textValue) {
+              record.locators.forEach((loc) => {
+                createLocator(loc, {
+                  name: "linkText",
+                  type: "static",
+                  value: textValue,
+                  isRecorded: loc.value === textValue ? loc.isRecorded : "Y",
+                  isSelfHealed:
+                    loc.value === textValue ? loc.isSelfHealed : "Y",
+                });
+              });
+            }
+
+            const nameLocator = getName(targetElement);
+            if (nameLocator && !locatorExists("name", nameLocator)) {
+              record.locators.forEach((loc) => {
+                createLocator(loc, {
+                  name: "name",
+                  type: "static",
+                  value: nameLocator,
+                  isRecorded:
+                    loc.value === nameLocator && loc.name === "name"
+                      ? loc.isRecorded
+                      : "Y",
+                  isSelfHealed:
+                    loc.value === nameLocator && loc.name === "name"
+                      ? loc.isSelfHealed
+                      : "Y",
+                });
+              });
+            }
+
+            const classValue = getClassName(targetElement);
+            if (
+              classValue &&
+              classValue.trim() !== "" &&
+              !locatorExists("className", classValue)
+            ) {
+              record.locators.forEach((loc) => {
+                createLocator(loc, {
+                  name: "className",
+                  value: classValue,
+                  isRecorded:
+                    loc.value === classValue && loc.name === "className"
+                      ? loc.isRecorded
+                      : "Y",
+                  isSelfHealed:
+                    loc.value === classValue && loc.name === "className"
+                      ? loc.isSelfHealed
+                      : "Y",
+                });
+              });
+            }
+
+            const fnValue = parseDOM(targetElement, document, false, true);
+            record.locators.forEach((loc) => {
+              createLocator(loc, {
+                name: 'xpath',
+                value: fnValue,
+                isRecorded: fnValue?.find((x) => x.value === loc.value)
+                  ? loc.isRecorded
+                  : "Y",
+                isSelfHealed: fnValue?.find((x) => x.value === loc.value)
+                  ? loc.isSelfHealed
+                  : "Y",
+              });
+            });
+
+            for (const locator of record.locators) {
+              try {
+                for (const loc of record.locators) {
+                  if (!loc.value) continue;
+
+                  for (const relation of relations) {
+                    if (loc.value.includes(relation)) {
+                      const relativeXpath = checkReferenceElementIsValid(
+                        loc.value,
+                        relation,
+                        tempDiv
+                      );
+                      if (relativeXpath) {
+                        createLocator(loc, {
+                          name: "xpath",
+                          value: relativeXpath,
+                          isRecorded:
+                            locator.isRecorded !== "" &&
+                            locator.isRecorded !== null
+                              ? locator.isRecorded
+                              : "Y",
+                        });
+                        break;
+                      }
+                    }
+                  }
+                }
+              } catch (error) {
+                console.error("Error processing locator:", locator, error);
+              }
+            }
+
+            const finalAutoHealedLocators = finalLocators.map((obj) => ({
+              ...obj,
+              value: cleanLocatorValue(obj.value, obj.name, obj.isRecorded),
+            }));
+
+            const finalUniqueAutoHealedLocators: Locator[] =
+              finalAutoHealedLocators.reduce(
+                (unique: Locator[], locator: Locator) => {
+                  if (
+                    locator.value &&
+                    !unique.some((l: Locator) => l.value === locator.value)
+                  ) {
+                    unique.push(locator);
+                  }
+                  return unique;
+                },
+                [] as Locator[]
+              );
+
+            const jsonResult = [
+              {
+                name: `${record.name}`,
+                desc: `${record.desc}`,
+                type: `${record.type}`,
+                locators: finalUniqueAutoHealedLocators.filter(
+                  (locator) => locator?.value != null && locator.value !== ""
+                ),
+                isShared: `${record.isShared}`,
+                projectId: `${record.projectId}`,
+                projectType: `${record.projectType}`,
+                isRecorded: `${record.isRecorded}`,
+                folder: `${record.folder}`,
+                parentId: `${record.parentId}`,
+                parentName: `${record.parentName}`,
+                platform: `${record.platform}`,
+                licenseId: `${record.licenseId}`,
+                licenseType: `${record.licenseType}`,
+                userId: `${record.userId}`,
+              },
+            ];
+
+            return jsonResult;
+          }
+        } catch (error) {
+          console.error("Error processing locator:", locator, error);
+          continue;
+        }
+      }
+    } catch (error) {
+      console.error("Error processing locator:", locator, error);
+      continue;
+    }
+  }
+  return null;
+};
+
+export { getElementsFromHTML };