Puppeteer 中的导航超时超出抓取表

此代码看起来有问题：

await page.goto(url, { timeout: 60000 });

// Wait for navigation to complete
await page.waitForNavigation({ timeout: 60000 });

page.goto()已经在等待导航，因此等待另一个导航会导致超时。page.waitForNavigation()

这是一个非常常见的错误，我在一篇关于典型 Puppeteer 错误的博客文章中有一节关于它。解决方案是删除不必要的行。page.waitForNavigation()

其次，使用而不是默认事件。一些反抓取方法（或编码不当的页面）似乎会延迟加载事件，从而导致导航超时。 是最快的方法，几乎总是首选。page.goto(url, {waitUntil: "domcontentloaded"}"load""domcontentloaded"

更进一步，由于数据已烘焙到静态 HTML 中，因此您可以阻止所有资源请求并禁用 JS。下面是一个优化的脚本：

const puppeteer = require("puppeteer"); // ^21.4.1

const url = "<Your URL>";

let browser;
(async () => {
  browser = await puppeteer.launch({headless: "new"});
  const [page] = await browser.pages();
  await page.setJavaScriptEnabled(false);
  await page.setRequestInterception(true);
  page.on("request", req =>
    req.url() === url ? req.continue() : req.abort()
  );
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const firstPlayerName = await page.$eval(
    "td.text-left a",
    player => player.textContent.trim()
  );
  console.log("Scraping successful:", firstPlayerName);
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

再往前走一步，你甚至可能不需要傀儡师。您可以在 Node 18+ 中使用 native 发出请求，并使用 Cheerio 等轻量级库解析响应中所需的数据。fetch

const cheerio = require("cheerio"); // ^1.0.0-rc.12

const url = "<Your URL>";

fetch(url)
  .then(res => {
    if (!res.ok) {
      throw Error(res.statusText);
    }

    return res.text();
  })
  .then(html => {
    const $ = cheerio.load(html);
    const firstPlayerName = $("td.text-left a").first().text()
    console.log(firstPlayerName); // => Maddie Bulbulia
  })
  .catch(err => console.error(err));

以下是一些快速基准测试。

未优化的傀儡师（仅使用）："domcontentloaded"

real 0m2.974s
user 0m1.004s
sys  0m0.271s

优化 Puppeteer（使用 DCL，加上禁用 JS 和阻塞资源）：

real 0m1.190s
user 0m0.510s
sys  0m0.114s

Fetch/Cheerio：

real 0m0.998s
user 0m0.261s
sys  0m0.049s

如果抓取的数据不经常更改，则可以考虑定期缓存抓取结果，以便可以立即更可靠地将其提供给用户。

您可能需要检查许多更改

1. 您同时使用 await page.goto 和 await page.waitForNavigation，这可能会导致冲突。您可能需要删除 await page.waitForNavigation 行。

    await page.goto('https://highschoolsports.nj.com/school/livingston-newark-academy/girlsbasketball/season/2022-2023/stats', { timeout: 60000 });
   

2. 如果由于网络速度慢或其他因素导致页面加载时间较长，则可能需要增加$eval函数的超时时间。

    const firstPlayerName = await page.$eval('tbody tr:first-child .text-left a', { timeout: 60000 }, player => player.textContent.trim());
   

3. 在使用 $eval 之前，您可能需要确保尝试选择的元素确实存在于页面上。使用 page.waitForSelector 等待元素出现。

    await page.waitForSelector('tbody tr:first-child .text-left a');
    const firstPlayerName = await page.$eval('tbody tr:first-child .text-left a', player => player.textContent.trim());
   

4. 如果网站速度较慢或遇到网络问题，增加超时可能还不够。您可以尝试在发出请求之前添加等待时间，以确保页面已完全加载。

   await page.waitForTimeout(5000); 
   await page.goto('https://highschoolsports.nj.com/school/livingston-newark-academy/girlsbasketball/season/2022-2023/stats', { timeout: 60000 });
   

5. 此外，您可能希望在 Puppeteer 浏览器中检查控制台输出，以查看是否存在任何错误或消息，这些错误或消息可以更深入地了解问题。您可以在启动 Puppeteer 时启用无头模式 （{ headless： false }），以直观地检查抓取过程中页面上发生的情况。