使用Puppeteer爬取博彩网站赔率时无法获取隐藏元素求助

你的问题核心是没处理那些初始状态为table--main collapse的隐藏区块，这些需要主动触发交互（点击展开）才能加载显示赔率。以下是具体的解决步骤和修改后的代码：

关键修复点 #

• 先定位所有处于折叠状态的赔率表格，逐个点击展开
• 等待所有展开操作完成后，再统一抓取所有可见赔率
• 优化页面加载等待逻辑，确保动态内容完全加载

修改后的代码 #

const puppeteer = require('puppeteer');
const fs = require('fs').promises; // 改用Promise版fs，避免回调嵌套

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 导航到目标页面，等待网络空闲确保内容加载完成
  await page.goto('https://paris-sportifs.pmu.fr/event/915569', {
    waitUntil: 'networkidle2'
  });

  // 处理所有折叠状态的赔率表格：点击展开
  await page.evaluate(async () => {
    // 获取所有折叠的表格元素
    const collapseTables = document.querySelectorAll('.table--main.collapse');
    
    // 逐个点击，处理可能的加载延迟
    for (const table of collapseTables) {
      // 滚动到元素视图内，避免点击失败
      table.scrollIntoView({ behavior: 'smooth', block: 'center' });
      // 点击展开（如果是单独的切换按钮，需替换为对应选择器，比如table.querySelector('.toggle-btn').click()）
      table.click();
      // 等待内容展开加载
      await new Promise(resolve => setTimeout(resolve, 500));
    }
  });

  // 等待所有展开后的表格加载完成，再抓取所有赔率
  await page.waitForSelector('.table--main.in .hierarchy-outcome-price');
  const odds = await page.$$eval('.table--main.in .hierarchy-outcome-price', elements => 
    elements.map(el => el.textContent.trim()) // 清理多余空格
  );

  // 写入CSV文件
  const csv = odds.join(';');
  await fs.writeFile('odds.csv', csv);
  console.log('赔率文件已保存！');

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

额外注意事项 #

• 如果展开触发不是表格本身，而是单独的切换按钮（比如带collapse-toggle类的元素），需要把table.click()替换为对应按钮的点击逻辑，可通过浏览器开发者工具定位实际触发元素。
• 可根据网站加载速度调整等待时间（比如500ms），避免因内容未完全加载导致抓取失败。
• 部分网站存在反爬机制，频繁操作可能被限制，必要时可增加随机延迟或设置真实浏览器的User-Agent。

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