尝试用 puppeteer 刮擦时出现空换行符答案

【问题标题】：empty line breaks when trying to scrape with puppeteer尝试用 puppeteer 刮擦时出现空换行符
【发布时间】：2021-05-01 04:21:54
【问题描述】：

我在 youtube 上尝试使用 puppeteer，我试图从 youtube 主页的缩略图中抓取 URL src 和标题文本，并且抓取程序运行良好。问题是当它抓取缩略图的标题和 src 时，程序在记录 URL src 时开始跳行，但它适用于文本数据。当我试图了解行跳转递归性时，每次程序抓取信息后，都会有 7 行跳转，然后一次又一次地跳转 14 行。我无法弄清楚为什么在抓取 URL src 而不是文本标题时会发生换行。和我的无限滚动处理方法有关系吗？

async function scrape(url) {

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

  const navigationPromise = page.waitForNavigation();


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

  await page.evaluate(_ => {
    window.scrollBy(0, window.innerHeight);
  });
  await page.waitFor(5000);
  await page.waitForSelector('#img')
  await navigationPromise;

  const loadThumbnailText = [];
  const loadThumbnailSrc = [];
  var ytTextData;
  for (let i = 0; i < 50; i++) {
    const textSelector = 'h3 > a > #video-title'
    const srcSelector = 'ytd-thumbnail > a > yt-img-shadow > #img'
    await page.waitForSelector(textSelector)
    await page.waitForSelector(srcSelector)
    const ytTextData = await page.$$eval(textSelector, elems => elems.map(el => el.textContent).join('\n'))
    const ytSrcData = await page.$$eval(srcSelector, elems => elems.map(el => el.src).join('\n'))
    if (ytTextData && ytSrcData) {
      console.log({
        ytTextData,
        ytSrcData
      })
      loadThumbnailText.push(ytTextData);
      loadThumbnailSrc.push(ytSrcData);
      console.log(ytTextData, ytSrcData)
    }
  }

  browser.close();
}

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

看来问题出在您拥有的选择器上。我在 youtube.com 的控制台中运行了以下命令：

document.querySelectorAll('h3 > a > #video-title').length
document.querySelectorAll('ytd-thumbnail > a > yt-img-shadow > #img').length

第一个给了我 29，第二个给了我 42。主页上似乎有隐藏的视频，只有在单击向下箭头时才会显示。您的文本选择器正在选择这些视频，但您的源选择器没有。

【讨论】：