使用Puppeteer爬取NBA官网表格返回空数组求助

问题根源 #

NBA Stats页面的表格是动态渲染的，你的代码在页面还没完成表格加载时就执行了抓取；另外默认的Puppeteer配置可能被网站识别为爬虫，限制了内容加载。

修复方案 #

调整代码，加入等待元素加载、模拟真实浏览器配置：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false, // 先开可视化模式验证加载情况，上线后可改回true
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    defaultViewport: null, // 使用默认浏览器视口
  });
  const page = await browser.newPage();
  
  // 设置真实浏览器User-Agent，规避反爬拦截
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');
  
  // 等待网络空闲再执行后续操作，确保页面资源加载完成
  await page.goto('https://www.nba.com/stats/teams/isolation?PerMode=Totals&TypeGrouping=offensive', {
    waitUntil: 'networkidle2',
    timeout: 60000, // 延长超时时间，适配页面加载速度
  });
  
  // 等待目标tbody元素出现，确保表格已渲染完成
  await page.waitForSelector('tbody.Crom_body__UYOcU', { timeout: 30000 });

  const data = await page.evaluate(() => {
    const rows = Array.from(document.querySelectorAll('tbody.Crom_body__UYOcU tr'));
    return rows.map((row) => {
      const tds = Array.from(row.querySelectorAll('td'));
      return tds.map(td => td.textContent.trim());
    });
  });

  console.log(data);
  await browser.close();
})();

关键调整说明 #

• 等待元素加载：用page.waitForSelector确保目标表格tbody存在后再抓取，避免过早执行导致空数组。
• 模拟真实浏览器：设置User-Agent和默认视口，降低被网站反爬机制识别的概率。
• 延长超时与网络等待：networkidle2等待网络请求基本完成，延长超时时间适配页面加载速度。
• 可视化调试：开启headless: false可以直观看到页面加载状态，方便排查弹窗、加载失败等问题。

如果仍无法获取数据，可补充排查：

• 检查页面是否有需要手动关闭的弹窗，若有则加入点击关闭的代码（比如抓取前定位弹窗关闭按钮并点击）。
• 验证选择器有效性：在浏览器开发者工具控制台执行document.querySelectorAll('tbody.Crom_body__UYOcU tr')，确认是否能获取到行元素，避免class名动态变化。

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