ff-dom 1.0.18-beta.6 → 2.0.0

package/src/utils/getElementsFromHTML.ts

@@ -1,6 +1,6 @@
 import { ElementRecord, Locator } from "../types/locator.ts";
 import { parseDOM } from "./xpath.ts";
-import { isSvg, normalizeXPath } from "./xpathHelpers.ts";
+import { normalizeXPath } from "./xpathHelpers.ts";
 
 type ElementDetails = {
   id?: string | null;
@@ -18,12 +18,30 @@ type ElementDetails = {
 };
 
 const getElementFromShadowRoot = (
-  element: Element,
+  el: Element | ShadowRoot,
   selector: string
 ): Element | null => {
-  const shadowRoot = (element as HTMLElement).shadowRoot;
-  if (shadowRoot && !selector.includes("dynamic")) {
-    return shadowRoot.querySelector(selector);
+  // const shadowRoot = (element as HTMLElement).shadowRoot;
+  // if (shadowRoot && !selector.includes("dynamic")) {
+  //   return shadowRoot.querySelector(selector);
+  // }
+
+  const elements = Array.from(el.querySelectorAll('*'));
+
+  try {
+    for (let i = 0; i < elements.length; i++) {
+      if (elements[i].shadowRoot) {
+        const { shadowRoot } = elements[i];
+        if (shadowRoot) {
+          getElementFromShadowRoot(shadowRoot, selector);
+          if (shadowRoot && !selector.includes("dynamic")) {
+            return shadowRoot.querySelector(selector);
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.log(error);
   }
   return null;
 };
@@ -65,17 +83,16 @@ const relations: string[] = [
 ];
 
 function getElementFromXPath(
-  tempDiv: HTMLElement,
+  docmt: Document,
   xpath: string
 ): Element | null {
-  let currentElement: Element | null = tempDiv;
-  const window = currentElement.ownerDocument.defaultView;
+  const window = docmt.defaultView;
   if (!window) return null;
 
   const xpathEvaluator = new window.XPathEvaluator();
   const xpathResult = xpathEvaluator.evaluate(
     xpath,
-    currentElement.ownerDocument, //here even tempDiv can be passed
+    docmt,
     null,
     window.XPathResult.FIRST_ORDERED_NODE_TYPE,
     null
@@ -86,19 +103,18 @@ function getElementFromXPath(
 function checkReferenceElementIsValid(
   locator: string,
   relation: string,
-  tempDiv: HTMLElement
+  docmt: Document
 ): 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;
+    const window = docmt.defaultView;
     if (!window) return null;
     if (!locator.includes("dynamic")) {
       const xpathEvaluator = new window.XPathEvaluator();
       const xpathResult = xpathEvaluator.evaluate(
         sourceLoc,
-        currentElement.ownerDocument,
+        docmt,
         null,
         window.XPathResult.FIRST_ORDERED_NODE_TYPE,
         null
@@ -108,7 +124,7 @@ function checkReferenceElementIsValid(
       if (sourceElement) {
         const xpathResultComplete = xpathEvaluator.evaluate(
           locator,
-          currentElement.ownerDocument,
+          docmt,
           null,
           window.XPathResult.FIRST_ORDERED_NODE_TYPE,
           null
@@ -135,10 +151,7 @@ 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(
+  const elementsToRemove = docmt.querySelectorAll(
     "script, style, link[rel='stylesheet'], meta, noscript, embed, object, param, source, svg"
   );
 
@@ -148,7 +161,6 @@ const getElementsFromHTML = (
     });
   }
 
-  tempDiv.innerHTML = document.body?.innerHTML;
   const finalLocatorsSet: Set<string> = new Set();
   let finalLocators: any[] = [];
 
@@ -247,170 +259,158 @@ const getElementsFromHTML = (
         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)
-                );
-              }
+      try {
+        let targetElement: Element | null = null;
+        if (locator.value.startsWith("iframe")) {
+          const iframe = docmt.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);
+          }
+        } else {
+          const selectors = locator.value.split(">>>"); // Custom delimiter for shadow DOM
+
+          for (const selector of selectors) {
+            if (docmt) {
+              const trimmedSelector = selector.trim();
+              if (
+                locator.name.includes("id") ||
+                trimmedSelector.startsWith("#")
+              ) {
+                targetElement = docmt.querySelector(
+                  "#" + trimmedSelector
+                );
+              } else if (
+                locator.name.includes("className") ||
+                trimmedSelector.startsWith(".")
+              ) {
+                targetElement = docmt.querySelector(
+                  "." + trimmedSelector
+                );
+              } else if (
+                (locator.name.includes("xpath") ||
+                  trimmedSelector.startsWith("//")) &&
+                !locator.type.match("dynamic")
+              ) {
+                const normalizedXPath = normalizeXPath(trimmedSelector);
+                targetElement = getElementFromXPath(
+                  docmt,
+                  normalizedXPath
+                );
+                if (targetElement) {
+                  createLocator(locator, {
+                    value: trimmedSelector,
+                    isRecorded: String(locator.isRecorded).includes("N")
+                      ? "N"
+                      : "Y",
+                  });
                 }
-                currentElement = targetElement;
               } else {
-                console.error("Element not found at:", selector);
-                break;
+                targetElement = docmt.querySelector(trimmedSelector);
+                if (!targetElement) {
+                  targetElement = getElementFromShadowRoot(
+                    docmt.body,
+                    trimmedSelector
+                  );
+                }
               }
+            } 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 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 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 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 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 xpathResults = parseDOM(targetElement, document, false, true);
-            xpathResults.forEach((result) => {
-              const fnValue = result.value;
+          const xpathResults = parseDOM(targetElement, docmt, false, true);
+          xpathResults.forEach((result) => {
+            const fnValue = result.value;
+            if (fnValue && !locatorExists(result.key.replace('xpath by', '').trim(), fnValue)) {
               record.locators.forEach((loc) => {
                 createLocator(loc, {
                   name: 'xpath',
@@ -419,87 +419,87 @@ const getElementsFromHTML = (
                   isSelfHealed: loc.value === fnValue ? 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;
-                      }
+            }
+          })
+
+          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,
+                      docmt
+                    );
+                    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);
               }
+            } 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 finalAutoHealedLocators = finalLocators.map((obj) => ({
+            ...obj,
+            value: cleanLocatorValue(obj.value, obj.name, obj.isRecorded),
+          }));
 
-            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}`,
+          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;
               },
-            ];
-
-            return jsonResult;
-          }
-        } catch (error) {
-          console.error("Error processing locator:", locator, error);
-          continue;
+              [] 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);

package/src/utils/xpathHelpers.ts

@@ -1224,9 +1224,9 @@ export const getReferenceElementsXpath = (
   return xpaths1;
 };
 
-export const parseXml = (xmlStr: string): Document | null => {
+export const parseXml = (xmlStr: string, type: DOMParserSupportedType): Document | null => {
   if (window.DOMParser) {
-    return new window.DOMParser().parseFromString(xmlStr, "text/xml");
+    return new window.DOMParser().parseFromString(xmlStr, type);
   }
 
   return null;