为何无法定位包含文本‘Car’的目标div元素？

核心问题分析 #

• 查找范围错误：右键菜单属于全局DOM节点（通常挂载在body或独立容器下），而非右键点击的目标元素内部。第二个脚本中使用elemento.querySelectorAll(...)缩小查找范围，导致无法命中菜单元素。
• 文本匹配不统一：需求是定位包含"Car"的div，但脚本中写的是innerText.includes('coche')（西班牙语“车”），拼写/语言不匹配导致过滤失败。
• 固定延时不可靠：400ms等待时间无法保证右键菜单完全渲染，应该用MutationObserver监听菜单的DOM变化，确保元素加载完成后再操作。
• 重复Observer冲突：第一个脚本中同时创建两个MutationObserver监听DOM变化，容易触发重复逻辑，干扰元素定位流程。

修复后的完整脚本 #

async function hacerScrollYClickInfinito() {
    const elementosClickeados = new Set();

    // 等待右键菜单出现并定位目标元素
    async function esperarMenuYClickTextoObjetivo() {
        return new Promise((resolve) => {
            const observer = new MutationObserver((mutations) => {
                // 查找全局范围内的目标菜单元素
                const menuItems = document.querySelectorAll('.item__183e8.labelContainer_bc2861.colorDanger_eec36d.colorDefault__0b482');
                if (menuItems.length > 0) {
                    // 找到最后一个元素并点击
                    const lastItem = menuItems[menuItems.length - 1];
                    lastItem.click();
                    console.log("成功点击菜单最后一个元素");

                    // 查找包含"Car"文本的div
                    const targetDiv = Array.from(menuItems).find(item => {
                        const innerDiv = item.querySelector('div');
                        return innerDiv && innerDiv.innerText.includes('Car');
                    });
                    
                    if (targetDiv) {
                        targetDiv.click();
                        console.log("成功点击含'Car'的元素");
                    } else {
                        console.log("未找到含'Car'的元素");
                    }

                    observer.disconnect();
                    resolve();
                }
            });

            // 监听body下的DOM变化，等待菜单出现
            observer.observe(document.body, { childList: true, subtree: true });
        });
    }

    async function hacerClickDerechoYProcesar(elemento) {
        try {
            // 右键点击元素
            elemento.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }));
            console.log("右键点击元素成功");

            // 等待菜单加载并处理
            await esperarMenuYClickTextoObjetivo();

            // 打印元素内的span文本
            const spans = elemento.querySelectorAll('span');
            spans.forEach(span => console.log("span文本:", span.textContent));
        } catch (error) {
            console.error("处理右键点击时出错:", error.message);
        }
    }

    function hacerScrollSobreElemento() {
        const divScroll = document.querySelector('.members__9f47b.thin_b1c063.scrollerBase_dc3aa9.fade_ba0fa0.customTheme_db4d28');
        if (divScroll) divScroll.scrollTop += 40;
    }

    // 监听新成员元素加载
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('memberInner_a32223') && node.classList.contains('layout_bb8e67')) {
                    if (!elementosClickeados.has(node)) {
                        hacerScrollSobreElemento();
                        hacerClickDerechoYProcesar(node);
                        elementosClickeados.add(node);
                    }
                }
            });
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // 初始加载已存在的元素
    async function procesarElementosExistentes() {
        const elementos = document.querySelectorAll('.memberInner_a32223.layout_bb8e67');
        for (const elemento of elementos) {
            if (!elementosClickeados.has(elemento)) {
                hacerScrollSobreElemento();
                await hacerClickDerechoYProcesar(elemento);
                elementosClickeados.add(elemento);
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
        }
    }

    await procesarElementosExistentes();
    console.log("初始元素处理完成，持续监听新元素");
}

hacerScrollYClickInfinito();

关键修改说明 #

1. 全局查找菜单元素：将菜单元素的查找范围改为document，确保能捕获全局右键菜单。
2. 用MutationObserver替代固定延时：监听DOM变化等待菜单加载，避免因渲染速度慢导致的元素未找到问题。
3. 统一文本匹配：将'coche'改为需求中的'Car'，确保过滤逻辑正确。
4. 合并Observer逻辑：只保留一个MutationObserver监听新元素，避免重复触发冲突。
5. 处理最后一个菜单元素：明确获取menuItems的最后一项并点击，符合需求描述。

内容的提问来源于stack exchange，提问作者mdz