Puppeteer调用page.$$返回空数组、waitForSelector超时问题求助

• page.goto等待策略配置错误：默认page.goto仅在页面load事件触发后就向下执行，客户端渲染站点的动态DOM通常在load事件后才完成挂载，此时查询元素自然返回空。
• 启动参数拼写错误：代码中沙箱参数--disabled-setupid-sandbox为错误拼写，正确参数为--disable-setuid-sandbox，错误启动参数会导致浏览器环境运行异常，页面资源加载失败。
• 无头浏览器被站点反爬拦截：部分站点会识别无头浏览器的特征标识，返回和普通浏览器不同的空内容，导致目标元素不存在。
• 超时时间配置过短：默认page.goto、waitForSelector的超时时间为30s，若站点加载速度慢、资源加载受限，很容易触发超时报错。

修正后可运行代码 #

const puppeteer = require('puppeteer');
const scraper = async () => {
    try {
        const browser = await puppeteer.launch({ 
            headless: 'new', // 采用新版无头模式，特征标识更少
            args: [
                '--no-sandbox', 
                '--disable-setuid-sandbox', // 修正拼写错误的启动参数
                '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' // 伪装普通浏览器UA
            ]
        });
        const page = await browser.newPage();
        // 调整页面加载等待策略，等待网络空闲2秒确保动态内容挂载完成，同时延长加载超时到60秒
        await page.goto('https://randomtodolistgenerator.herokuapp.com/library', {
            waitUntil: 'networkidle2',
            timeout: 60000
        });
        // 等待目标元素加载完成，延长元素匹配超时到30秒
        await page.waitForSelector('.card-body', { timeout: 30000 });
        const elements = await page.$$(".card-body");
        console.log(`匹配到元素数量：${elements.length}`);
      
        await browser.close(); 
    } catch (error) {
        console.log('运行报错：', error)
    }
}

scraper();

上述代码做了以下调整：

1. 修正错误的启动参数，替换为新版无头模式，添加普通浏览器UA伪装，降低反爬拦截概率
2. 调整page.goto等待策略为networkidle2，确保动态内容加载完成，同时延长页面加载超时到60s
3. 新增waitForSelector等待目标元素加载，延长元素匹配超时到30s

如果调整后仍无法获取元素，可在page.goto执行后打印await page.content()，查看实际返回的页面源码，确认是否和浏览器中访问的内容一致，排查反爬拦截问题。

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