使用Puppeteer抓取Basketball Reference球员表格数据遇阻求助

问题描述 #

学习使用Puppeteer抓取网站数据，以Basketball Reference的表格为练习对象。已实现搜索Stephen Curry、进入其数据页面并截图，但无法抓取目标PER GAME表格，找不到正确选择器，现有代码如下：

const puppeteer = require("puppeteer");

async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    ignoreHTTPSErrors: true,
  });
  const page = await browser.newPage();
  await page.goto(`https://www.basketball-reference.com/`);
  await page.waitForSelector("input[name=search]");
  await page.$eval("input[name=search]", (el) => (el.value = "Stephen Curry"));
  await page.click('input[type="submit"]');

  await page.waitForSelector(`a[href='${secondPageLink}']`, { visible: true });
  await page.click(`a[href='${secondPageLink}']`);

  await page.waitForSelector();

   await page.screenshot({
    path: `StephenCurryStats.png`,
  });
  await page.close();
  await browser.close();
}
run();

尝试抓取目标页面中的PER GAME表格并截图，因选择器问题陷入困境。

问题分析与解决 #

原代码存在两个核心问题：

1. secondPageLink变量未定义，导致跳转失败；
2. 未找到PER GAME表格的正确选择器，且waitForSelector传入空参数无意义。

修正方案 #

方案1：直接访问球员页面（更高效稳定）

跳过搜索流程，直接访问目标球员页面，再定位PER GAME表格：

const puppeteer = require("puppeteer");

async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    ignoreHTTPSErrors: true,
  });
  const page = await browser.newPage();
  
  // 直接访问目标球员数据页面
  await page.goto("https://www.basketball-reference.com/players/c/curryst01.html");
  
  // PER GAME表格的HTML id为per_game，用此选择器等待表格加载完成
  const perGameTableSelector = "#per_game";
  await page.waitForSelector(perGameTableSelector, { visible: true });
  
  // 获取表格元素并单独截图
  const tableElement = await page.$(perGameTableSelector);
  await tableElement.screenshot({ path: "StephenCurry_PER_GAME.png" });
  
  await page.close();
  await browser.close();
}
run();

方案2：修复搜索跳转流程

若坚持使用搜索流程，需先获取搜索结果中的球员链接再跳转：

const puppeteer = require("puppeteer");

async function run() {
  const browser = await puppeteer.launch({
    headless: false,
    ignoreHTTPSErrors: true,
  });
  const page = await browser.newPage();
  await page.goto(`https://www.basketball-reference.com/`);
  
  // 执行搜索操作
  await page.waitForSelector("input[name=search]");
  await page.$eval("input[name=search]", (el) => (el.value = "Stephen Curry"));
  await page.click('input[type="submit"]');
  
  // 等待搜索结果加载并获取第一个球员链接
  await page.waitForSelector("#search_results a");
  const playerLink = await page.$eval("#search_results a", el => el.href);
  await page.goto(playerLink);
  
  // 定位并截取PER GAME表格
  const perGameTableSelector = "#per_game";
  await page.waitForSelector(perGameTableSelector, { visible: true });
  const tableElement = await page.$(perGameTableSelector);
  await tableElement.screenshot({ path: "StephenCurry_PER_GAME.png" });
  
  await page.close();
  await browser.close();
}
run();

关键说明 #

• PER GAME表格选择器：通过浏览器开发者工具可确认，该表格的HTML id为per_game，使用#per_game即可精准定位；
• 单独截图表格：通过page.$()获取表格DOM元素后调用screenshot，仅截取表格区域，比整页截图更精准；
• 稳定加载等待：设置waitForSelector的visible: true参数，确保表格完全加载后再操作，避免异步加载导致的元素未找到问题。

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