抓取时使用 puppeteer 无限滚动

时间:2021-04-30 14:03:42

标签: javascript puppeteer infinite-scroll

我有一个抓取程序,可以访问 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'
    });
  });
}

1 个答案:

答案 0 :(得分:0)

与其滚动到某个可能存在也可能不存在的元素,只需滚动到页面底部即可。

scrollTo(0,document.body.scrollHeight);

像这样...

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