抓取时使用 puppeteer 无限滚动

Question

我有一个抓取程序可以访问 youtube 并获取每个缩略图的 img src。它的问题是即使程序导航到 src url 并记录它的工作 youtube 具有无限滚动功能，可确保客户端浏览器仅在用户将项目滚动到视图中时才获取项目。因此，为了处理无限滚动，我添加了一个滚动到可以在底部创建更多内容的页面部分和选择器，即document.querySelectorAll('.class_name').length，以检查是否生成了更多内容，但程序仍然没有处理无限滚动问题。我无法弄清楚我错过了什么。任何帮助表示赞赏。提前致谢。

async function scrape(url) {

  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();
  await page.goto(url, {
    timeout: 0
  });
  await page.setViewport({
    width: 1200,
    height: 800
  });

  const delay = 3000;
  let preCount = 0;
  let postCount = 0;
  do {
    preCount = await getCount(page);
    await scrollDown(page);
    await page.waitFor(delay);
    postCount = await getCount(page);
  } while (postCount > preCount);
  await page.waitFor(delay);

  const srcSelector = 'ytd-thumbnail > a > yt-img-shadow > #img'
  const ytSrcData = await page.$$eval(srcSelector, elems => elems.map(el => el.src).join('\n'))

  browser.close();

  console.log({
    ytTextData,
    ytSrcData
  })


}

async function getCount(page) {
  return await page.$$eval('.ytd-rich-item-renderer', a => a.length);
}

async function scrollDown(page) {
  await page.$eval('.ytd-rich-item-renderer:last-child', e => {
    e.scrollIntoView({
      behavior: 'smooth',
      block: 'end',
      inline: 'end'
    });
  });
}

Answer 1

不要滚动到可能存在或不存在的某个元素，只需滚动到页面底部即可。

scrollTo(0,document.body.scrollHeight);

像这样……

async function scrollDown(page) {
  await page.evaluate(function(){
    scrollTo(0,document.body.scrollHeight);
  });
}