Puppeteer - 滚动到 div 的底部答案

【问题标题】：Puppeteer - Scroll to the bottom of a divPuppeteer - 滚动到 div 的底部
【发布时间】：2021-12-05 08:52:32
【问题描述】：

我正在尝试获取此页面上 div“Notes et références”中的所有链接：

https://fr.wikipedia.org/wiki/Barack_Obama

但我似乎没有正确的选择器。我试过了，但没有用：

const scrollable_section = '#mw-content-text > div.mw-parser-output > div.reference-cadre'
await page.evaluate(selector => {
    const element = document.querySelector(selector);
    element.scrollTop = element.offsetHeight;
}, scrollable_section);

有人可以帮帮我吗？

我是 Puppeteer 的新手，所以我可能需要更多解释。

【问题讨论】：

基本上document.getElementById("Notes_et_r.C3.A9f.C3.A9rences").scrollIntoView() 应该这样做。

标签： javascript node.js web-scraping scroll puppeteer

【解决方案1】：

仅仅因为元素是可滚动的并不意味着您实际上需要滚动才能获取数据。它通常只适用于需要滚动的 JS 驱动的动态提要。

在这种情况下，数据是静态可用的，因此除非您出于其他原因使用 Puppeteer，否则您可以使用更简单且可能更快的 Axios/Cheerio 组合来完成此操作。

更好的是使用维基百科的 API 而不是抓取数据。如果你确实刮，请尊重他们对机器人的限制。

继续使用 Puppeteer，Wikipedia 具有不嵌套部分的奇怪页面结构。选择#Notes_et_références 后，您可以弹出到父<h2>，然后向前迭代几个兄弟节点，直到您到达.reference-cadre 元素（我对这个关系进行了硬编码，但您可以使用如果目标是更面向未来，则循环）。

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  const url = "https://fr.wikipedia.org/wiki/Barack_Obama";
  await page.goto(url);
  const links = await page.evaluate(() =>
    [...document.querySelector("#Notes_et_références")
      .parentNode
      .nextElementSibling
      .nextElementSibling
      .querySelectorAll("a")]
      .map(e => e.getAttribute("href"))
  );
  console.log(links.length, links.slice(0, 5));
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

输出：

809 [
  '#cite_ref-prononciation_1-0',
  '#cite_ref-prononciation_1-1',
  '/wiki/Prononciation_de_l%27anglais',
  '/wiki/Anglais_am%C3%A9ricain',
  '/wiki/Transcription_phon%C3%A9tique'
]

【讨论】：