@rpascene/shared 0.30.8

package/src/extractor/customLocator.ts

@@ -0,0 +1,1138 @@
+/**
+ *
+ * 属性值中存在单双引号的处理
+ * 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) {
+            let apos = value.indexOf("'");
+            let 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: string = '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: boolean = 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 = '';
+    let 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) {
+                let 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.map(item => {
+            return getElementsByLocator(item, docOrHost);
+        }).flat();
+        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,
+};