Puppeteer中waitForSelector始终超时问题求助

问题分析 #

你的问题核心在于：

• 从Chrome DevTools复制的nth-child选择器过于依赖DOM结构的固定顺序，页面动态渲染（如表格数据异步加载、DOM重排）时，容易出现结构变化导致选择器失效
• networkidle2仅等待网络空闲，但表格数据可能在网络空闲后才通过JS渲染，直接等待子元素会超时
• 点击同意按钮后，页面存在短暂DOM更新或数据加载过程，未给足稳定等待时间

解决方案 #

1. 使用更稳定的选择器 #

避免依赖位置相关的nth-child，改为根据内容或固定属性定位。比如目标行包含特定文本（如“Euro 95”），可以这样定位：

// 等待目标元素
await page.waitForSelector('#petrolTable_data tr:has(td:contains("Euro 95")) td:nth-child(2)');
// 直接获取文本
const price = await page.$eval('#petrolTable_data tr:has(td:contains("Euro 95")) td:nth-child(2)', el => el.textContent.trim());

2. 分层等待，确保表格初始化 #

先等待表格容器加载完成，再等待目标子元素，增加超时时间应对慢加载：

// 先等表格容器出现
await page.waitForSelector('#petrolTable_data');
// 再等目标元素，超时时间延长到60秒
await page.waitForSelector('#petrolTable_data > tr:nth-child(3) > td:nth-child(2)', { timeout: 60000 });

3. 用waitForFunction检查元素可用性 #

直接检查元素是否存在且有有效文本，确保元素完全渲染：

await page.waitForFunction(() => {
  const el = document.querySelector('#petrolTable_data > tr:nth-child(3) > td:nth-child(2)');
  return el && el.textContent.trim().length > 0;
}, { timeout: 60000 });

4. 优化页面等待策略 #

点击同意按钮后，增加网络空闲等待，确保页面状态稳定：

await page.click('#fedconsent > div.orejime-AppContainer > div > div > div > button');
// 等待点击后2秒网络空闲
await page.waitForNetworkIdle({ idleTime: 2000 });
// 再等待目标元素
await page.waitForSelector('#petrolTable_data > tr:nth-child(3) > td:nth-child(2)');

完整优化代码 #

const puppeteer = require('puppeteer');

async function scrape() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.goto('https://economie.fgov.be/nl/themas/energie/energieprijzen/maximumprijzen/officieel-tarief-van-de', 
        { waitUntil: 'networkidle2' });
    
    // 等待同意按钮可点击后再点击
    await page.waitForSelector('#fedconsent > div.orejime-AppContainer > div > div > div > button');
    await page.click('#fedconsent > div.orejime-AppContainer > div > div > div > button');
    
    // 分层等待表格及目标元素
    await page.waitForSelector('#petrolTable_data');
    await page.waitForFunction(() => {
        const el = document.querySelector('#petrolTable_data > tr:nth-child(3) > td:nth-child(2)');
        return el && el.textContent.trim().length > 0;
    }, { timeout: 60000 });
    
    // 简洁获取并打印文本
    const text = await page.$eval('#petrolTable_data > tr:nth-child(3) > td:nth-child(2)', el => el.textContent.trim());
    console.log('目标文本:', text);

    await browser.close(); // 必须用await确保操作完成后再关闭浏览器
}

// 捕获错误避免未处理Promise拒绝
scrape().catch(err => console.error('爬取出错:', err));

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