节点JS Puppteer无限滚动循环

Question

我正在学习Puppeteer，并尝试抓取已实现无限滚动的网站。我可以从列表中获取所有价格，方法是延迟1秒后向下滚动。 Here is the URL

我想要做的是，从列表中打开一个项目，获取产品名称，返回列表，选择第二个产品，然后对所有产品执行此操作。

pd.pivot_table(df1, values='Value', index='Date', aggfunc='count').plot(kind='bar')

感谢您的帮助

Answer 1

编辑：我为问题中列出的特定网站添加了有效的代码段。

如果您要抓取内容，有时您必须将用户体验分解为一点点，以模仿真实用户，以获取该用户将获得的实际数据。

处理无限滚动的一种简单方法是删除所有当前元素，然后滚动直到每次有另外10或100个新元素，甚至尝试一次全部擦除。

但是您也可以换种方式，

1. 获取第一个元素
2. 单击以在新标签中打开
3. 解析数据，
4. 关闭标签，
5. 删除元素
6. 并继续下一个元素。滚动并等待新元素出现。

此概念的问题是，您将永远不知道如何触发滚动和单击。在不同的站点中可能有多个事件绑定到滚动处理它。并且，提供的站点在vueJS中。

代码段

每种产品的选择器是#__layout > section > main > section > section > div.products > div > div。

我们将滚动选择器，进行处理，然后将其删除。之后，我们将触发滚动事件，以便浏览器知道某些更改。

window.scrollTo(0, 0);
const selector = `#__layout > section > main > section > section > div.products > div > div`;
const element = document.querySelector(selector)
element.scrollIntoView()
element.remove()

结果：（gif动画）

最酷的是，我们无需滚动到页面底部即可触发更改。查看滚动条在删除过程中的变化。

这也适用于producthunt等网站。 Video Link以获得更高质量的视图。

const delay = d=>new Promise(r=>setTimeout(r,d))

const scrollAndRemove = async () => {
    // scroll to top to trigger the scroll events
    window.scrollTo(0, 0);
    const selector = `.title_9ddaf`;
    const element = document.querySelector(selector);

    // stop if there are no elements left
    if(element){
      element.scrollIntoView();

      // do my action
      // wait for a moment to reduce load or lazy loading image
      await delay(1000);
      console.log(element.innerText);
      // end of my action

      // remove the element to trigger some scroll event somewhere
      element.remove();

      // return another promise
      return scrollAndRemove()
    }
}

scrollAndRemove();