使用Puppeteer时HTML选择器异常，仅能获取首个元素标题

可能的原因 #

• 目标页面为动态加载内容，page.goto默认仅等待初始DOM加载完成，后续元素尚未渲染，导致page.$$只捕获到第一个元素
• 选择器精度不足，实际仅匹配到单个元素
• 循环中page.evaluate的异常被静默捕获，后续元素获取失败时无输出

解决方案 #

1. 确保页面内容完全加载 #

修改page.goto添加等待参数，或显式等待目标元素加载完成：

// 等待网络空闲确保异步内容加载完毕
await page.goto('https://www.superanimes.biz/lista-de-animes', { waitUntil: 'networkidle2' });
// 或显式等待目标选择器出现
await page.waitForSelector("#containerVideos > section > section > div.post_cat.notranslate", { timeout: 8000 });

2. 改用批量获取方式 #

使用page.$$eval一次性提取所有标题，避免循环中跨上下文通信的潜在问题：

修改后的完整代码 #

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false, 
        defaultViewport: false,
        userDataDir: "./tmp"
    });
    const page = await browser.newPage();
    
    // 等待网络空闲确保内容加载完成
    await page.goto('https://www.superanimes.biz/lista-de-animes', { waitUntil: 'networkidle2' });
    
    // 等待目标元素加载完毕
    await page.waitForSelector("#containerVideos > section > section > div.post_cat.notranslate", { timeout: 8000 });

    // 批量获取所有有效标题
    const titles = await page.$$eval(
        "#containerVideos > section > section > div.post_cat.notranslate", 
        elements => elements.map(el => {
            const titleElement = el.querySelector('div.title_cat > span');
            return titleElement ? titleElement.textContent.trim() : null;
        }).filter(Boolean)
    );

    // 打印所有标题
    titles.forEach(title => console.log(title));

    // await browser.close()
})();

3. 验证选择器有效性 #

在目标页面的浏览器控制台执行以下代码，确认选择器是否匹配所有目标元素：

document.querySelectorAll("#containerVideos > section > section > div.post_cat.notranslate").length

如果返回值为1，说明选择器需要调整，需检查页面元素结构是否存在差异（如部分元素类名不同）。

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