如何用JavaScript Selenium定位Reddit中嵌套Shadow DOM的元素？

问题根源分析 #

你的脚本存在几个关键问题导致超时：

• 变量名错误：代码中定义了textElement，但调用getText()时用了未定义的priceElement，这会引发逻辑错误（需优先修复）
• CSS选择器不稳定：依赖带随机后缀的动态类名（如_modalWrapper_17eu9_1），这类类名会随前端部署更新而变化，直接导致选择器失效
• 等待条件不合适：until.elementLocated仅等待元素存在于DOM中，但元素可能尚未渲染可见，后续操作自然无法执行
• 未处理页面交互障碍：Reddit加载后可能弹出Cookie同意窗口，会干扰元素定位逻辑

解决方案步骤 #

1. 修复变量名错误 #

将代码中const text = await priceElement.getText();修改为：

const text = await textElement.getText();

2. 替换为稳定的CSS选择器 #

摒弃依赖随机后缀的冗长选择器，改用模糊匹配类名的方式，确保选择器不受前端类名更新影响：

#avatar-modal div[class*="_header_"] > h3

该选择器通过class*="_header_"匹配所有包含_header_前缀的容器，再定位内部的h3元素。

3. 优化等待条件 #

将仅等待元素存在的逻辑，改为等待元素存在且可见，确保元素已完成渲染：

// 先等待元素进入DOM
const textElement = await driver.wait(until.elementLocated(By.css(cssSelector)), 10000);
// 再等待元素可见
await driver.wait(until.elementIsVisible(textElement), 5000);

4. 处理Cookie弹窗 #

添加逻辑自动关闭Reddit的Cookie同意弹窗（若存在），避免干扰后续操作：

try {
  const cookieBtn = await driver.wait(until.elementLocated(By.css('[data-testid="cookie-policy-banner-accept"]')), 5000);
  await cookieBtn.click();
} catch (e) {
  // 无弹窗则忽略
}

5. 增强页面加载验证 #

添加页面标题等待逻辑，确保页面核心内容已加载完成：

await driver.wait(until.titleContains("Reddit"), 10000);

修改后的完整脚本 #

async function scrapeReddit() {
    const url = "https://www.reddit.com/avatar/shop/product/storefront_nft_01HMZYP9FM37N9ZWVD8C1V9RFH";
    // 使用稳定的CSS选择器
    const cssSelector = "#avatar-modal div[class*='_header_'] > h3";

    const driver = new Builder()
        .forBrowser("chrome")
        // 无头模式建议设置窗口大小，避免布局异常
        .setChromeOptions(new chrome.Options().headless().windowSize({width: 1920, height: 1080}))
        .build();

    try {
        await driver.get(url);
        
        // 验证页面核心加载完成
        await driver.wait(until.titleContains("Reddit"), 10000);
        
        // 处理Cookie弹窗
        try {
            const cookieBtn = await driver.wait(until.elementLocated(By.css('[data-testid="cookie-policy-banner-accept"]')), 5000);
            await cookieBtn.click();
        } catch (e) {
            console.log("无Cookie弹窗或弹窗加载超时");
        }

        // 等待元素存在并可见
        const textElement = await driver.wait(until.elementLocated(By.css(cssSelector)), 10000);
        await driver.wait(until.elementIsVisible(textElement), 5000);
        
        const text = await textElement.getText();
        console.log("title:", text); // 预期输出：Black Background
    } catch (error) {
        console.error("Error:", error);
    } finally {
        await driver.quit();
    }
}

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