@godscene/shared 1.7.11

package/src/extractor/customLocator.ts

@@ -0,0 +1,1245 @@
+/**
+ *
+ * 属性值中存在单双引号的处理
+ * XPath中使用
+ * @param {*} value
+ * @returns
+ */
+const attributeValue = (value: string) => {
+  if (!value) return '';
+  if (value.indexOf("'") < 0) {
+    return "'" + value + "'";
+  } else if (value.indexOf('"') < 0) {
+    return '"' + value + '"';
+  } else {
+    let result = 'concat(';
+    let part = '';
+    let didReachEndOfValue = false;
+    while (!didReachEndOfValue) {
+      const apos = value.indexOf("'");
+      const quot = value.indexOf('"');
+      if (apos < 0) {
+        result += "'" + value + "'";
+        didReachEndOfValue = true;
+        break;
+      } else if (quot < 0) {
+        result += '"' + value + '"';
+        didReachEndOfValue = true;
+        break;
+      } else if (quot < apos) {
+        part = value.substring(0, apos);
+        result += "'" + part + "'";
+        value = value.substring(part.length);
+      } else {
+        part = value.substring(0, quot);
+        result += '"' + part + '"';
+        value = value.substring(part.length);
+      }
+      result += ',';
+    }
+    result += ')';
+    return result;
+  }
+};
+
+/**
+ * 验证XPath是否可以定位到唯一元素
+ * @param {*} xpath
+ * @param {*} dom
+ * @returns
+ */
+const verifyXPath = (xpath: string, dom: any) => {
+  const root = dom.getRootNode();
+  if (isShadowRoot(root)) {
+    return null;
+  }
+  if (xpath) {
+    const doms = getElementsByLocator({
+      type: 'xpath',
+      value: xpath,
+    });
+    if (doms.length === 1 && doms[0] === dom) {
+      return xpath;
+    }
+  }
+  return null;
+};
+
+/**
+ * 验证selector是否可以定位到唯一元素
+ * @param {*} selector
+ * @param {*} dom
+ * @returns
+ */
+const verifySelector = (selector: string, dom: any, type = 'querySelect') => {
+  const root = dom.getRootNode();
+  const doms = getElementsByLocator(
+    {
+      type,
+      value: selector,
+    },
+    root,
+  );
+  if (doms.length === 1 && doms[0] === dom) {
+    return selector;
+  }
+
+  return null;
+};
+
+/**
+ * 是否为宿主元素
+ * @param {*} dom
+ * @returns
+ */
+const isHostElement = (dom: any) => {
+  return dom.shadowRoot?.nodeName === '#document-fragment';
+};
+
+/**
+ * 是否为shadowRoot的rootNode
+ * @param {*} dom
+ * @returns
+ */
+const isShadowRoot = (node: any) => {
+  // node.host
+  return node.nodeName === '#document-fragment';
+};
+
+/**
+ * 当前节点的相对selector
+ * @param {*} dom
+ * @returns
+ */
+const getRelativeSelector = (dom: any, useFieldId = true) => {
+  try {
+    const id = dom.id;
+    const fieldid = dom.getAttribute('fieldid');
+    const children = Array.from(dom.parentNode.childNodes).filter(
+      ($el: any) => $el.nodeType === 1,
+    );
+    const index = children.findIndex((item) => item === dom) + 1;
+
+    let extra = '';
+    if (useFieldId && fieldid) {
+      // 有fieldid
+      const sameAttrChildren = children.filter(
+        ($el: any) =>
+          $el.tagName === dom.tagName &&
+          $el.getAttribute('fieldid') === fieldid,
+      );
+      if (sameAttrChildren.length === 1) {
+        extra = `[fieldid='${fieldid}']`;
+      } else {
+        extra = `[fieldid='${fieldid}']:nth-child(${index})`;
+      }
+    } else if (!useFieldId && id) {
+      // 有id
+      const sameAttrChildren = children.filter(
+        ($el: any) => $el.tagName === dom.tagName && $el.id === id,
+      );
+      if (sameAttrChildren.length === 1) {
+        extra = `[id='${id}']`;
+      } else {
+        extra = `[id='${id}']:nth-child(${index})`;
+      }
+    } else {
+      // 同tagName的兄弟元素
+      const sameTagChildren = children.filter(
+        ($el: any) => $el.tagName === dom.tagName,
+      );
+      if (sameTagChildren.length === 1) {
+        // 使用tagName
+        extra = '';
+      } else {
+        // 使用索引
+        extra = `:nth-child(${index})`;
+      }
+    }
+    return dom.tagName.toLowerCase() + extra;
+  } catch (error) {
+    console.error(error);
+    return '';
+  }
+};
+
+/**
+ * 当前节点的相对XPath
+ * @param {*} dom
+ * @returns "/div"
+ */
+const getRelativeXpath = (dom: any, useFieldId = true) => {
+  try {
+    if (!dom || dom.nodeType !== 1) return '';
+    if (dom.tagName === 'OPTION') return '';
+    const root = dom.getRootNode();
+    if (isShadowRoot(root)) {
+      return '';
+    }
+    const id = dom.id;
+    const fieldid = dom.getAttribute('fieldid');
+    const children = Array.from(dom.parentNode.childNodes).filter(
+      ($el: any) => $el.nodeType === 1,
+    );
+    const tagName = dom.tagName.toLowerCase();
+    const isDescendantOfSVG = dom.closest('svg') !== null;
+    let extra = '';
+    if (useFieldId && fieldid) {
+      // 有fieldid
+      const sameAttrChildren = children.filter(
+        ($el: any) =>
+          $el.tagName === dom.tagName &&
+          $el.getAttribute('fieldid') === fieldid,
+      );
+      if (isDescendantOfSVG) {
+        if (sameAttrChildren.length === 1) {
+          return `/*[name()='${tagName}' and @fieldid='${fieldid}']`;
+        }
+        const index = sameAttrChildren.findIndex((item) => item === dom) + 1;
+        return `/*[name()='${tagName}' and @fieldid='${fieldid}'][${index}]`;
+      }
+      if (sameAttrChildren.length === 1) {
+        extra = `[@fieldid='${fieldid}']`;
+      } else {
+        const index = sameAttrChildren.findIndex((item) => item === dom) + 1;
+        extra = `[@fieldid='${fieldid}'][${index}]`;
+      }
+    } else if (!useFieldId && id) {
+      // 有id
+      const sameAttrChildren = children.filter(
+        ($el: any) => $el.tagName === dom.tagName && $el.id === id,
+      );
+      if (isDescendantOfSVG) {
+        if (sameAttrChildren.length === 1) {
+          return `/*[name()='${tagName}' and @id='${id}']`;
+        }
+        const index = sameAttrChildren.findIndex((item) => item === dom) + 1;
+        return `/*[name()='${tagName}' and @id='${id}'][${index}]`;
+      }
+      if (sameAttrChildren.length === 1) {
+        extra = `[@id='${id}']`;
+      } else {
+        const index = sameAttrChildren.findIndex((item) => item === dom) + 1;
+        extra = `[@id='${id}'][${index}]`;
+      }
+    } else {
+      // 其他
+      const sameAttrChildren = children.filter(
+        ($el: any) => $el.tagName === dom.tagName,
+      );
+      if (isDescendantOfSVG) {
+        if (sameAttrChildren.length === 1) {
+          return `/*[name()='${tagName}']`;
+        }
+        const index = sameAttrChildren.findIndex((item) => item === dom) + 1;
+        return `/*[name()='${tagName}'][${index}]`;
+      }
+      if (sameAttrChildren.length === 1) {
+        extra = '';
+      } else {
+        const index = sameAttrChildren.findIndex((item) => item === dom) + 1;
+        extra = `[${index}]`;
+      }
+    }
+
+    return '/' + dom.tagName.toLowerCase() + extra;
+  } catch (error) {
+    console.error(error);
+    return '';
+  }
+};
+
+/**
+ * 在document按照xpath查找元素
+ * 注意：shadowroot中不支持xpath
+ * @param {*} xpath
+ * @param {*} contextNode
+ * @returns
+ */
+const getElementsByXPath = (xpath: string, contextNode: any = document) => {
+  try {
+    if (
+      contextNode.nodeName !== '#document' &&
+      contextNode.getRootNode().nodeName !== '#document'
+    ) {
+      return null;
+    }
+    const snapshot = document.evaluate(
+      xpath,
+      contextNode,
+      null,
+      XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
+      null,
+    );
+    const list = [];
+
+    for (let i = 0, len = snapshot.snapshotLength; i < len; i++) {
+      list.push(snapshot.snapshotItem(i));
+    }
+    return list;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
+
+/**
+ * 获取元素
+ * @param {*} locator
+ * @param {*} docOrHost
+ * @returns
+ */
+const getElementsByLocator = (
+  locator: { type: string; value: string },
+  docOrHost: any = document,
+) => {
+  try {
+    const { type, value } = locator;
+    let eles = [];
+
+    const contextNode = docOrHost.shadowRoot || docOrHost;
+
+    if (type === 'id') {
+      eles = contextNode.querySelectorAll(`*[id='${value}']`);
+    } else if (type === 'className') {
+      eles = contextNode.querySelectorAll(`*[class='${value}']`);
+    } else if (type === 'name') {
+      eles = contextNode.querySelectorAll(`*[name='${value}']`);
+    } else if (type === 'querySelect') {
+      eles = contextNode.querySelectorAll(value);
+    } else if (type === 'xpath') {
+      eles = getElementsByXPath(value, contextNode) || [];
+    }
+    return Array.from(eles);
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
+
+/**
+ * 获取基础选择器
+ * @param {*} dom
+ * @returns
+ */
+const getBaseSelectors = (dom: any) => {
+  const locators = [];
+  const { id, name, classList } = dom;
+
+  if (id) {
+    locators.push({
+      type: 'id',
+      value: id,
+    });
+  }
+
+  if (name) {
+    locators.push({
+      type: 'name',
+      value: name,
+    });
+  }
+
+  // const classListValue = Array.from(classList).filter(c => c !== 'custom-hover-style'); // 云测 鼠标放上去会变
+  // if (classListValue.length > 0) {
+  //     locators.push({
+  //         type: 'className',
+  //         value: classListValue.join(' '),
+  //     });
+  // }
+
+  return locators;
+};
+
+/**
+ *
+ * 直到遇到fieldid或id为止
+ * @param {*} dom
+ * @param {*} onece
+ * @returns
+ */
+
+const getLocatorUntilFieldid = (dom: any, type?: string) => {
+  const getXpathUntilFieldid: any = (dom: any) => {
+    try {
+      if (!dom || dom.nodeType !== 1) return '';
+      const useFieldId = !!document.querySelector('*[fieldid]');
+
+      const relativeXpath = getRelativeXpath(dom, useFieldId);
+      if (useFieldId && relativeXpath.includes('textCol|')) {
+        // 云测特殊需求：fieldid中包含textCol | 按不唯一处理，
+        return '';
+      }
+      if (/\[@/g.test(relativeXpath)) {
+        return '/' + relativeXpath;
+      }
+      return getXpathUntilFieldid(dom.parentNode) + relativeXpath;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  const getSelectorUntilFieldid: any = (dom: any) => {
+    try {
+      if (!dom || dom.nodeType !== 1) return '';
+      const useFieldId = !!document.querySelector('*[fieldid]');
+      const relativeSelector = getRelativeSelector(dom, useFieldId);
+      if (useFieldId && relativeSelector.includes('textCol|')) {
+        // 云测特殊需求：fieldid中包含textCol | 按不唯一处理，
+        return '';
+      }
+      if (
+        relativeSelector.includes('id=') ||
+        relativeSelector.includes('fieldid=')
+      ) {
+        return relativeSelector;
+      }
+      const parentSelector = getSelectorUntilFieldid(dom.parentNode);
+      return parentSelector
+        ? parentSelector + ' > ' + relativeSelector
+        : relativeSelector;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+
+  if (type === 'xpath') {
+    return {
+      type: 'xpath',
+      value: getXpathUntilFieldid(dom),
+    };
+  } else if (type === 'querySelect') {
+    return {
+      type: 'querySelect',
+      value: getSelectorUntilFieldid(dom),
+    };
+  }
+  const value = getXpathUntilFieldid(dom);
+  if (value) {
+    return {
+      type: 'xpath',
+      value,
+    };
+  }
+  return {
+    type: 'querySelect',
+    value: getSelectorUntilFieldid(dom),
+  };
+};
+
+/**
+ * 全路径，适用于静态元素，当元素动态改变，而节点位置不变，可能不准确，比如百度的搜索结果，位置可能发生改变，指向一个固定的项
+ * 实现浏览器自带的Copy fullXPath方法
+ * 一直递归到 /html
+ * 忽略id
+ * 其他同上XPath
+ * @param {*} dom
+ * @returns string
+ */
+const getFullLocator = (dom: any, type?: string) => {
+  const getFullXpath: any = (dom: any) => {
+    try {
+      if (!dom || dom.nodeType !== 1) return '';
+      if (dom.tagName === 'OPTION') return '';
+
+      const root = dom.getRootNode();
+      if (root.nodeName === '#document-fragment') {
+        return '';
+      }
+
+      if (dom.tagName === 'BODY') return '/html/body';
+      if (dom.tagName === 'HTML') return '/html';
+      // 同tagName的兄弟元素
+      const sameTagChildren = Array.from(dom.parentNode.childNodes).filter(
+        ($el: any) => $el.nodeType === 1 && $el.tagName === dom.tagName,
+      );
+      let extra = '';
+      if (sameTagChildren.length === 1) {
+        extra = '';
+      } else {
+        const index = sameTagChildren.findIndex((item) => item === dom) + 1;
+        extra = `[${index}]`;
+      }
+      const lowerTagName = dom.tagName.toLowerCase();
+      const isDescendantOfSVG = dom.closest('svg') !== null;
+      const me =
+        (isDescendantOfSVG ? `*[name()='${lowerTagName}']` : lowerTagName) +
+        extra;
+      return getFullXpath(dom.parentNode) + '/' + me;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  const getFullSelector: any = (dom: any) => {
+    try {
+      if (!dom || dom.nodeType !== 1) return '';
+      if (dom.tagName === 'OPTION') return '';
+
+      if (dom.tagName === 'BODY') return 'body';
+      if (dom.tagName === 'HTML') return 'html';
+
+      const children = Array.from(dom.parentNode.childNodes).filter(
+        ($el: any) => $el.nodeType === 1,
+      );
+      // 同tagName的兄弟元素
+      const sameTagChildren = children.filter(
+        ($el: any) => $el.tagName === dom.tagName,
+      );
+
+      let extra = '';
+
+      if (sameTagChildren.length === 1) {
+        extra = '';
+      } else {
+        // 获取索引,从1开始
+        const index = children.findIndex((item) => item === dom) + 1;
+        extra = `:nth-child(${index})`;
+      }
+
+      const me = dom.tagName.toLowerCase() + extra;
+      const parentSelector = getFullSelector(dom.parentNode);
+      return parentSelector ? parentSelector + ' > ' + me : me;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  if (type === 'xpath') {
+    return {
+      type: 'xpath',
+      value: getFullXpath(dom),
+    };
+  } else if (type === 'querySelect') {
+    return {
+      type: 'querySelect',
+      value: getFullSelector(dom),
+    };
+  }
+  const value = getFullXpath(dom);
+  if (value) {
+    return {
+      type: 'xpath',
+      value,
+    };
+  }
+  return {
+    type: 'querySelect',
+    value: getFullSelector(dom),
+  };
+};
+
+/**
+ *
+ * 向上遍历直到唯一，可能不含fieldid
+ * @param {*} dom
+ * @returns
+ */
+const getPositionLocator = (ele: any) => {
+  const getPositionXPath = (ele: any) => {
+    try {
+      if (!ele || ele.nodeType !== 1) return '';
+      if (ele.tagName === 'OPTION') {
+        return '';
+      }
+      const root = ele.getRootNode();
+      if (isShadowRoot(root)) {
+        return '';
+      }
+      const useFieldId = !!document.querySelector('*[fieldid]');
+
+      let path = '';
+      let dom = ele;
+
+      while (dom && dom.nodeType === 1) {
+        let currentPath = '';
+        if (dom.tagName === 'BODY') {
+          currentPath = '/body';
+        } else if (dom.tagName === 'HTML') {
+          currentPath = '/html';
+        } else {
+          currentPath = getRelativeXpath(dom, useFieldId);
+        }
+
+        path = currentPath + path;
+        const locator = '/' + path;
+
+        if (useFieldId && locator.includes('textCol|')) {
+          // 云测特殊需求：fieldid中包含textCol | 按不唯一处理，
+          return '';
+        }
+
+        if (verifyXPath(locator, ele)) {
+          return locator;
+        }
+
+        dom = dom.parentNode;
+      }
+      return path;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  const getPositionSelector = (ele: any) => {
+    try {
+      let path = '';
+      let dom = ele;
+      if (dom && dom.tagName === 'OPTION') {
+        return '';
+      }
+      const useFieldId = !!document.querySelector('*[fieldid]');
+
+      while (dom && dom.nodeType === 1) {
+        let currentPath;
+        if (dom.tagName === 'BODY') {
+          currentPath = 'body';
+        } else if (dom.tagName === 'HTML') {
+          currentPath = 'html';
+        } else {
+          currentPath = getRelativeSelector(dom, useFieldId);
+        }
+        path = path ? currentPath + ' > ' + path : currentPath;
+        if (useFieldId && path.includes('textCol|')) {
+          // 云测特殊需求：fieldid中包含textCol | 按不唯一处理，
+          return '';
+        }
+        if (verifySelector(path, ele)) {
+          return path;
+        }
+        dom = dom.parentNode;
+      }
+      return path;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  const value = getPositionXPath(ele);
+  if (value) {
+    return {
+      type: 'xpath',
+      value,
+    };
+  }
+  return {
+    type: 'querySelect',
+    value: getPositionSelector(ele),
+  };
+};
+
+/**
+ * xpath中使用的text()
+ * 某个匹配就可以了
+ * @param {*} ele
+ * @returns string
+ */
+const getFirstText = (ele: any) => {
+  const texts: any[] = Array.from(ele.childNodes)
+    .filter((n: any) => n.nodeType === 3)
+    .filter(
+      (node: any) =>
+        node.textContent &&
+        node.textContent.trim() &&
+        !/[\{\}\"\'\\\/]/.test(node.textContent) &&
+        node.textContent.trim().length < 30,
+    );
+
+  return texts[0]?.textContent || null;
+};
+
+/**
+ *  多语不适用
+ *  带text()的XPath
+ *  如果找到唯一元素就采用，否则舍弃
+ */
+const getXpathWidthText = (dom: any) => {
+  if (!dom || dom.nodeType !== 1) return '';
+  const root = dom.getRootNode();
+  if (isShadowRoot(root)) {
+    return '';
+  }
+  let locator = '';
+  const text = getFirstText(dom);
+  if (text) {
+    if (text.length < 30) {
+      locator = `//${dom.nodeName.toLowerCase()}[text()=${attributeValue(text)}]`;
+    } else {
+      locator = `//${dom.nodeName.toLowerCase()}[contains(text(),${attributeValue(text.slice(0, 30))})]`;
+    }
+  }
+  return verifyXPath(locator, dom);
+};
+
+/**
+ * 多语不适用
+ * 带innerText的XPath
+ * innerText不能太长
+ * todo: 如果与父元素的tagName相同，父元素也会找到
+ * text-transform: lowercase; 样式会影响innerText的值，但不影响textContent的值
+ */
+const getXpathWidthInnerText = (dom: any) => {
+  try {
+    if (!dom || dom.nodeType !== 1) return null;
+    const root = dom.getRootNode();
+    if (isShadowRoot(root)) {
+      return null;
+    }
+
+    // text-transform: lowercase; 会转换innerText的值，所以要使用textContent
+    const text = dom.textContent.replace(/\s+/g, ' '); // 合并连续空格
+    if (text && text.length < 30) {
+      // 处理文本中的特殊字符
+      const escapedText = text.replace(/"/g, '\\"').replace(/'/g, "\\'");
+      const tagName = dom.tagName.toLowerCase();
+      let parentNode = dom.parentNode;
+      let extra = `/${tagName}`;
+      while (parentNode) {
+        const parentNodeName = parentNode.nodeName.toLowerCase();
+        if (parentNodeName !== tagName) {
+          break;
+        }
+        extra = `/${parentNodeName}${extra}`;
+        parentNode = parentNode.parentNode;
+      }
+      const locator = `/${extra}[contains(.,'${escapedText}')]`;
+      return verifyXPath(locator, dom); // 合并连续空格 后不一定能找到元素，需要校验一下
+    }
+    return null;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+/**
+ * 找到第一个fieldid，然后一直往上找，直到找到所有的fieldid
+ * @param {*} dom
+ * @returns
+ */
+const getLocatorUntilAllFieldid = (ele: any) => {
+  const getXpathUntilAllFieldid = (ele: any) => {
+    try {
+      if (!ele || ele.nodeType !== 1) return '';
+      const root = ele.getRootNode();
+      if (isShadowRoot(root)) {
+        return '';
+      }
+      const useFieldId = !!document.querySelector('*[fieldid]');
+
+      let path = '';
+      let dom = ele;
+
+      while (dom && dom.nodeType === 1) {
+        if (
+          useFieldId &&
+          path.includes('textCol|') &&
+          !dom.getAttribute('childrenfield')
+        ) {
+          // 云测特殊需求：fieldid中包含textCol | 按不唯一处理，
+          // 需要加上祖先中存在childrenfield属性的fieldid
+          dom = dom.parentNode;
+          continue;
+        }
+
+        const currentPath = getRelativeXpath(dom, useFieldId);
+        if (currentPath) {
+          if (!/\[@/g.test(path)) {
+            path = currentPath + path;
+          } else if (
+            /\[@/g.test(path) &&
+            /\[@/g.test(currentPath) &&
+            !path.startsWith('//')
+          ) {
+            path = '/' + currentPath + '/' + path;
+          } else if (/\[@/g.test(path) && /\[@/g.test(currentPath)) {
+            path = '/' + currentPath + path;
+          }
+        }
+        const count = (path.match(/\[@/g) || []).length;
+        if (count >= 2) {
+          // 2层后停止
+          break;
+        }
+        dom = dom.parentNode;
+      }
+      if (path && !path.startsWith('//')) {
+        path = '/' + path;
+      }
+      return path;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+
+  const getSelectorUntilAllFieldid = (ele: any) => {
+    try {
+      if (!ele || ele.nodeType !== 1) return '';
+      const root = ele.getRootNode();
+      if (isShadowRoot(root)) {
+        return '';
+      }
+      const useFieldId = !!document.querySelector('*[fieldid]');
+
+      let path = '';
+      let dom = ele;
+
+      while (dom && dom.nodeType === 1) {
+        if (
+          useFieldId &&
+          path.includes('textCol|') &&
+          !dom.getAttribute('childrenfield')
+        ) {
+          // 云测特殊需求：fieldid中包含textCol | 按不唯一处理，
+          // 需要加上祖先中存在childrenfield属性的fieldid
+          dom = dom.parentNode;
+          continue;
+        }
+
+        const currentPath = getRelativeSelector(dom, useFieldId);
+        if (currentPath) {
+          if (!/\[fieldid|\[id/g.test(path)) {
+            path = path ? currentPath + ' > ' + path : currentPath;
+          } else if (
+            /\[fieldid|\[id/g.test(path) &&
+            /\[fieldid|\[id/g.test(currentPath)
+          ) {
+            path = currentPath + ' ' + path;
+          }
+        }
+
+        const count = (path.match(/\[fieldid|\[id/g) || []).length;
+        if (count >= 2) {
+          // 2层后停止
+          break;
+        }
+        dom = dom.parentNode;
+      }
+
+      return path;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+
+  const value = getXpathUntilAllFieldid(ele);
+  if (value) {
+    return {
+      type: 'xpath',
+      value,
+    };
+  }
+  return {
+    type: 'querySelect',
+    value: getSelectorUntilAllFieldid(ele),
+  };
+};
+
+/**
+ * getXpathUntilAllFieldid的简化版,容器使用只有一层fieldid足够
+ * 使用所有fieldid生成xpath
+ * @param {*} dom
+ * @returns //div[@fieldid='3']//iframe
+ */
+const getContainerLocatorUntilAllFieldid = (ele: any) => {
+  const getContainerXpathUntilAllFieldid = (ele: any) => {
+    try {
+      if (!ele || ele.nodeType !== 1) return '';
+      const root = ele.getRootNode();
+      if (isShadowRoot(root)) {
+        return '';
+      }
+      const useFieldId = !!document.querySelector('*[fieldid]');
+      let path = '';
+      let dom = ele;
+
+      while (dom && dom.nodeType === 1) {
+        const currentPath = getRelativeXpath(dom, useFieldId);
+
+        if (
+          dom.tagName === 'IFRAME' ||
+          dom.tagName === 'FRAME' ||
+          dom.shadowRoot ||
+          /\[@/g.test(currentPath)
+        ) {
+          path = '/' + currentPath + path;
+        }
+        const count = (path.match(/\[@/g) || []).length;
+        if (count >= 1) {
+          // Container1层后停止
+          break;
+        }
+        dom = dom.parentNode;
+      }
+      if (!path.startsWith('//')) {
+        path = '/' + path;
+      }
+      return path;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  const getContainerSelectorUntilAllFieldid = (ele: any) => {
+    try {
+      if (!ele || ele.nodeType !== 1) return '';
+      const root = ele.getRootNode();
+      if (isShadowRoot(root)) {
+        return '';
+      }
+      const useFieldId = !!document.querySelector('*[fieldid]');
+      let path = '';
+      let dom = ele;
+
+      while (dom && dom.nodeType === 1) {
+        const currentPath = getRelativeSelector(dom, useFieldId);
+        if (
+          dom.tagName === 'IFRAME' ||
+          dom.tagName === 'FRAME' ||
+          dom.shadowRoot ||
+          /\[fieldid|\[id/g.test(currentPath)
+        ) {
+          path = path ? currentPath + ' ' + path : currentPath;
+        }
+        const count = (path.match(/\[fieldid|\[id/g) || []).length;
+        if (count >= 1) {
+          // Container1层后停止
+          break;
+        }
+        dom = dom.parentNode;
+      }
+      return path;
+    } catch (error) {
+      console.error(error);
+      return '';
+    }
+  };
+  const value = getContainerXpathUntilAllFieldid(ele);
+  if (value) {
+    return {
+      type: 'xpath',
+      value,
+    };
+  }
+  return {
+    type: 'querySelect',
+    value: getContainerSelectorUntilAllFieldid(ele),
+  };
+};
+
+const notExit = (locators: any[], type: string, value?: string | null) => {
+  if (!value) {
+    return false;
+  }
+  return !locators.find((item) => item.type === type && item.value === value);
+};
+
+/**
+ * 对外的方法，依次调用上面的方法，生成可以的列表
+ * return []
+ * */
+const getLocators = (dom: any) => {
+  const locators = getBaseSelectors(dom);
+
+  // 直到fieldid,有n<=1个fieldid
+  const locatorByGetLocatorUntilFieldid = getLocatorUntilFieldid(dom);
+  if (
+    notExit(
+      locators,
+      locatorByGetLocatorUntilFieldid.type,
+      locatorByGetLocatorUntilFieldid.value,
+    )
+  ) {
+    locators.push(locatorByGetLocatorUntilFieldid);
+  }
+
+  // 全部fieldid的结构,有n>=0个fieldid
+  const locatorByGetLocatorUntilAllFieldid = getLocatorUntilAllFieldid(dom);
+  if (
+    notExit(
+      locators,
+      locatorByGetLocatorUntilAllFieldid.type,
+      locatorByGetLocatorUntilAllFieldid.value,
+    )
+  ) {
+    locators.push(locatorByGetLocatorUntilAllFieldid);
+  }
+
+  // 向上递归直到唯一，可能不含fieldid
+  const locatorByGetPositionLocator = getPositionLocator(dom);
+  if (
+    notExit(
+      locators,
+      locatorByGetPositionLocator.type,
+      locatorByGetPositionLocator.value,
+    )
+  ) {
+    locators.push(locatorByGetPositionLocator);
+  }
+
+  // text()
+  const textXPathValue = getXpathWidthText(dom);
+  if (notExit(locators, 'xpath', textXPathValue)) {
+    locators.push({
+      type: 'xpath',
+      value: textXPathValue,
+    });
+  }
+
+  // innerText
+  const innerTextXpathValue = getXpathWidthInnerText(dom);
+  if (notExit(locators, 'xpath', innerTextXpathValue)) {
+    locators.push({
+      type: 'xpath',
+      value: innerTextXpathValue,
+    });
+  }
+
+  const sortedLocators = sortLocators(locators);
+  const list = getLocatorsWidthIndex(sortedLocators, dom);
+  // console.log('list', list);
+  return list;
+};
+
+// 排序
+const sortLocators = (locators: any[]) => {
+  return locators.slice().sort((a, b) => {
+    const valueA = a.value;
+    const valueB = b.value;
+
+    // 检查是否包含 fieldid 或 id
+    const hasFieldIdA = valueA.includes('@fieldid');
+    const hasFieldIdB = valueB.includes('@fieldid');
+    const hasIdA = valueA.includes('@id') && !hasFieldIdA; // 排除 fieldid 的干扰
+    const hasIdB = valueB.includes('@id') && !hasFieldIdB;
+
+    // 分类优先级：fieldid > id > 其他
+    if (hasFieldIdA !== hasFieldIdB) {
+      return hasFieldIdA ? -1 : 1;
+    }
+    if (hasIdA !== hasIdB) {
+      return hasIdA ? -1 : 1;
+    }
+    if (a.type !== b.type) {
+      // 先xpath后querySelect，id等
+      return a.type === 'xpath' ? -1 : 1;
+    }
+    // 同类排序规则
+    if (hasFieldIdA) {
+      const countA = (valueA.match(/\[@fieldid/g) || []).length;
+      const countB = (valueB.match(/\[@fieldid/g) || []).length;
+      return countA - countB;
+    } else if (hasIdA) {
+      const countA = (valueA.match(/\[@id/g) || []).length;
+      const countB = (valueB.match(/\[@id/g) || []).length;
+      return countA - countB;
+    } else {
+      return valueA.length - valueB.length;
+    }
+  });
+};
+
+/**
+ * 获取容器路径
+ * @param {*} dom
+ * @returns
+ */
+const getContainerLocators = (dom: any) => {
+  if (
+    !dom ||
+    (!isHostElement(dom) &&
+      dom.nodeName !== 'IFRAME' &&
+      dom.nodeName !== 'FRAME')
+  ) {
+    return [];
+  }
+
+  const locators = getBaseSelectors(dom);
+
+  // 多fieldid的locator
+  const locatorByGetContainerLocatorUntilAllFieldid =
+    getContainerLocatorUntilAllFieldid(dom);
+  if (
+    notExit(
+      locators,
+      locatorByGetContainerLocatorUntilAllFieldid.type,
+      locatorByGetContainerLocatorUntilAllFieldid.value,
+    )
+  ) {
+    locators.push(locatorByGetContainerLocatorUntilAllFieldid);
+  }
+
+  // Position locator
+  const locatorByGetPositionLocator = getPositionLocator(dom);
+  if (
+    notExit(
+      locators,
+      locatorByGetPositionLocator.type,
+      locatorByGetPositionLocator.value,
+    )
+  ) {
+    locators.push(locatorByGetPositionLocator);
+  }
+
+  const sortedLocators = sortLocators(locators);
+  const containerAllPaths = getLocatorsWidthIndex(sortedLocators, dom);
+  return containerAllPaths;
+};
+
+/**
+ * 对外的方法，iframe在页面数量少，不需要全路径，要简洁
+ * @param {*} dom
+ */
+const getContainerLocatorData = (dom: any) => {
+  const containerAllPaths = getContainerLocators(dom);
+  const containerType = dom.shadowRoot ? 'shadowRoot' : 'iframe'; // 类型
+  return {
+    containerAllPaths, // allPaths
+    containerType, // 类型 iframe|shadowroot
+    containerPathType: containerAllPaths[0]?.type || '', // 选中项路径类型 id|name|class|xpath|querySelect
+    containerPathValue: containerAllPaths[0]?.value || '', //选中项路径值 string
+    containerPathIndex: containerAllPaths[0]?.index ?? 1, // 应该有，当前缺失 选中项索引
+  };
+};
+
+/**
+ * 给locator添加index
+ * @param {*} locators
+ * @param {*} dom
+ * @returns
+ */
+const getLocatorsWidthIndex = (locators: any[], dom: any) => {
+  const rootNode = dom.getRootNode();
+  const list: any[] = locators
+    .map((item) => {
+      const eles = getElementsByLocator(item, rootNode);
+      const eleIndex = eles.findIndex((el) => el === dom);
+      if (eleIndex === -1 || eles.length > 5) {
+        return null;
+      }
+      return {
+        ...item,
+        index: eleIndex + 1,
+      };
+    })
+    .filter(Boolean);
+
+  if (list.length === 0) {
+    // 兜底,全路径
+    const locatorByGetFullLocator = getFullLocator(dom);
+    if (locatorByGetFullLocator.value) {
+      list.push({
+        type: locatorByGetFullLocator.type,
+        value: locatorByGetFullLocator.value,
+        index: 1,
+      });
+    }
+  }
+
+  return list.map((item, index) => {
+    return {
+      ...item,
+      isSelected: index === 0,
+      orderNum: index,
+    };
+  });
+};
+
+/**
+ * 获取多个元素
+ * @param {*} locators
+ * @param {*} docOrHost
+ * @param {*} selected
+ * @returns
+ */
+const getManyElementByLocators = (
+  docOrHost = document,
+  locators: any[],
+  selected = true,
+) => {
+  if (selected) {
+    const selectedLocator =
+      locators.find((item) => item.isSelected) || locators[0];
+    if (selectedLocator) {
+      return getElementsByLocator(selectedLocator, docOrHost);
+    }
+  } else {
+    const elements = locators.flatMap((item) => {
+      return getElementsByLocator(item, docOrHost);
+    });
+    return Array.from(new Set(elements)); // 去重
+  }
+  return [];
+};
+
+/**
+ * 获取单个元素
+ * @param {*} locators
+ * @param {*} docOrHost
+ * @returns
+ */
+const getOneElementByLocators = (
+  docOrHost: any,
+  locators: any[],
+  selected = true,
+) => {
+  if (selected) {
+    const selectedLocator =
+      locators.find((item) => item.isSelected) || locators[0];
+    if (selectedLocator) {
+      const index = Math.max(0, (selectedLocator.index ?? 1) - 1);
+      return getElementsByLocator(selectedLocator, docOrHost)[index] || null;
+    }
+  } else {
+    let ele = null;
+    for (let i = 0; i < locators.length; i += 1) {
+      // 对用户来说index从1开始，对程序内部来说index从0开始
+      const index = Math.max(0, (locators[i].index ?? 1) - 1);
+      ele = getElementsByLocator(locators[i], docOrHost)[index] || null;
+      if (ele) {
+        break;
+      }
+    }
+    return ele;
+  }
+  return null;
+};
+
+/**
+ * 录制时先获取shadowRoot的容器树，再添加frame的容器树
+ * 获取shadowRoot的容器树
+ * @param {*} dom
+ * @returns
+ */
+const getShadowRootContainerStack = (dom: any) => {
+  const containers = [];
+
+  let ele = dom;
+
+  while (ele) {
+    const rootNode = ele.getRootNode();
+    ele = rootNode.host;
+    if (ele) {
+      // 获取shadowRoot的容器节点的xpath
+      const container = getContainerLocatorData(ele);
+      containers.unshift(container);
+    } else {
+      break;
+    }
+  }
+
+  return containers;
+};
+
+export {
+  getLocators,
+  getShadowRootContainerStack,
+  getFullLocator,
+  getLocatorUntilFieldid,
+  getContainerLocatorData as getContainerPath,
+  getManyElementByLocators as getElements,
+  getOneElementByLocators as getUniqueElement,
+};