ff-dom 1.0.17 → 1.0.18-beta.1

package/src/utils/cssSelector.ts

@@ -0,0 +1,275 @@
+import { isNumberExist } from "./xpathHelpers.ts";
+
+let modifiedElementAttributes: [] = [];
+
+export const parseCssSelectors = (el: HTMLElement | Element, docmt: Document) => {
+  let cssSelector: { key: string, value: string }[] = [];
+
+  try {
+    let idCssSelector = getIdCssPath(el, docmt);
+
+    if (
+      idCssSelector &&
+      idCssSelector.includes('#') &&
+      docmt.querySelectorAll(idCssSelector)?.length === 1 &&
+      !(
+        idCssSelector.includes('body') ||
+        idCssSelector.includes('head') ||
+        idCssSelector.includes('html')
+      )
+    ) {
+      cssSelector.push({ key: 'cssSelector by id', value: idCssSelector });
+    } else {
+      idCssSelector = '';
+    }
+
+    let nameCssSelector = getNameCssPath(el, docmt);
+
+    if (
+      nameCssSelector &&
+      nameCssSelector !== idCssSelector &&
+      nameCssSelector.includes('name') &&
+      docmt.querySelectorAll(nameCssSelector)?.length === 1 &&
+      !(
+        nameCssSelector.includes('body') ||
+        nameCssSelector.includes('head') ||
+        nameCssSelector.includes('html')
+      )
+    ) {
+      cssSelector.push({ key: 'cssSelector by name', value: nameCssSelector });
+    } else {
+      nameCssSelector = '';
+    }
+
+    let classCssSelector = getClassCssPath(el, docmt);
+
+    if (
+      classCssSelector &&
+      classCssSelector !== idCssSelector &&
+      nameCssSelector !== classCssSelector &&
+      classCssSelector.includes('.') &&
+      docmt.querySelectorAll(classCssSelector)?.length === 1 &&
+      !(
+        classCssSelector.includes('body') ||
+        classCssSelector.includes('head') ||
+        classCssSelector.includes('html')
+      )
+    ) {
+      cssSelector.push({
+        key: 'cssSelector by class',
+        value: classCssSelector,
+      });
+    } else {
+      classCssSelector = '';
+    }
+  } catch (error) {
+    console.log(error);
+  }
+
+  if (!cssSelector.length) {
+    let abSelector = getAbsoluteCssPath(el, docmt);
+    if (
+      abSelector &&
+      docmt.querySelectorAll(abSelector)?.length === 1 &&
+      !(
+        abSelector.includes('body') ||
+        abSelector.includes('head') ||
+        abSelector.includes('html')
+      )
+    ) {
+      cssSelector.push({
+        key: 'Absolute cssSelector',
+        value: abSelector,
+      });
+    } else {
+      abSelector = '';
+    }
+  }
+
+  return cssSelector;
+};
+
+export const getIdCssPath = (el: HTMLElement | Element, docmt: Document) => {
+  const tagName = el.tagName.toLowerCase();
+
+  if (
+    docmt?.defaultView?.Element &&
+    !(el instanceof docmt?.defaultView?.Element)
+  )
+    return;
+  if (tagName.includes('style') || tagName.includes('script')) return;
+
+  const path = [];
+  while (el.nodeType === Node.ELEMENT_NODE) {
+    let selector = el.nodeName?.toLowerCase();
+    if (el.id && !isNumberExist(el.id)) {
+      selector += `#${el.id}`;
+      path.unshift(selector);
+      break;
+    } else {
+      let sib = el;
+      let nth = 1;
+      if (sib.previousElementSibling) {
+        while ((sib = sib.previousElementSibling)) {
+          if (sib.nodeName?.toLowerCase() === selector) nth++;
+        }
+      }
+
+      if (nth !== 1) {
+        selector += `:nth-of-type(${nth})`;
+      }
+
+      if (nth === 1 && sib?.parentElement?.childElementCount! > 1) {
+        selector += `:nth-child(${nth})`;
+      }
+    }
+    path.unshift(selector);
+    el = el.parentElement!;
+  }
+  return path.join(' > ');
+};
+
+export const getNameCssPath = (el: HTMLElement | Element, docmt: Document) => {
+  const tagName = el.tagName.toLowerCase();
+
+  if (
+    docmt?.defaultView?.Element &&
+    !(el instanceof docmt?.defaultView?.Element)
+  )
+    return;
+  if (tagName.includes('style') || tagName.includes('script')) return;
+
+  const path = [];
+  while (el.nodeType === Node.ELEMENT_NODE) {
+    let selector = el.nodeName?.toLowerCase();
+    let name = el.getAttribute('name');
+    if (name && !isNumberExist(name)) {
+      selector += `[name=${name}]`;
+      path.unshift(selector);
+      break;
+    } else {
+      let sib = el;
+      let nth = 1;
+      if (sib.previousElementSibling) {
+        while ((sib = sib.previousElementSibling)) {
+          if (sib.nodeName?.toLowerCase() === selector) nth++;
+        }
+      }
+
+      if (nth !== 1) {
+        selector += `:nth-of-type(${nth})`;
+      }
+
+      if (nth === 1 && sib?.parentElement?.childElementCount! > 1) {
+        selector += `:nth-child(${nth})`;
+      }
+    }
+    path.unshift(selector);
+    el = el.parentElement!;
+  }
+  return path.join(' > ');
+};
+
+export const getClassCssPath = (el: HTMLElement | Element, docmt: Document) => {
+  const tagName = el.tagName.toLowerCase();
+
+  if (
+    docmt?.defaultView?.Element &&
+    !(el instanceof docmt?.defaultView?.Element)
+  )
+    return;
+  if (tagName.includes('style') || tagName.includes('script')) return;
+
+  const path = [];
+  while (el.nodeType === Node.ELEMENT_NODE) {
+    let selector = el.nodeName?.toLowerCase();
+
+    if (
+      typeof el.className === 'string' &&
+      el.className &&
+      !isNumberExist(el.className) &&
+      !modifiedElementAttributes?.find(
+        (x: { element: HTMLElement | Element; attributeName: string; }) => x.element === el && x.attributeName === 'class'
+      )
+    ) {
+      el.classList.remove('marked-element-temp');
+      el.classList.remove('removePointers');
+      if (el.className) {
+        selector += `.${el.className.trim().replace(/\s+/g, '.')}`;
+        path.unshift(selector);
+        break;
+      }
+    } else {
+      let sib = el;
+      let nth = 1;
+      if (sib.previousElementSibling) {
+        while ((sib = sib.previousElementSibling)) {
+          if (sib.nodeName?.toLowerCase() === selector) nth++;
+        }
+      }
+
+      if (nth !== 1) {
+        selector += `:nth-of-type(${nth})`;
+      }
+
+      if (nth === 1 && sib?.parentElement?.childElementCount! > 1) {
+        selector += `:nth-child(${nth})`;
+      }
+    }
+    path.unshift(selector);
+    el = el.parentElement!;
+  }
+  return path.join(' > ');
+};
+
+export const getAbsoluteCssPath = (el: HTMLElement | Element, docmt: Document) => {
+  const tagName = el.tagName.toLowerCase();
+
+  if (
+    docmt?.defaultView?.Element &&
+    !(el instanceof docmt?.defaultView?.Element)
+  )
+    return;
+  if (tagName.includes('style') || tagName.includes('script')) return;
+
+  const path = [];
+  while (el.nodeType === Node.ELEMENT_NODE) {
+    let selector = el.nodeName?.toLowerCase();
+    if (
+      tagName.includes('body') ||
+      tagName.includes('head') ||
+      tagName.includes('html')
+    ) {
+      selector += tagName;
+      path.unshift(selector);
+      break;
+    } else {
+      let sib = el;
+      let nth = 1;
+      if (sib.previousElementSibling) {
+        while ((sib = sib.previousElementSibling)) {
+          if (sib.nodeName?.toLowerCase() === selector) nth++;
+        }
+      }
+
+      if (nth !== 1) {
+        selector += `:nth-of-type(${nth})`;
+      }
+
+      if (nth === 1 && sib?.parentElement?.childElementCount! > 1) {
+        selector += `:nth-child(${nth})`;
+      }
+    }
+    path.unshift(selector);
+    el = el.parentElement!;
+  }
+  return path.join(' > ');
+};
+
+export const cssSelectors = {
+    parseCssSelectors,
+    getIdCssPath,
+    getNameCssPath,
+    getClassCssPath,
+    getAbsoluteCssPath
+}