通过 puppeteer 点击“加载更多”按钮答案

【问题标题】：Clicking on "load more" button via puppeteer通过 puppeteer 点击“加载更多”按钮
【发布时间】：2019-04-21 20:38:51
【问题描述】：

我是 JS 新手。我需要从 Instagram 解析 cmets，但首先我需要将它们全部加载。我在 Node.js 中使用 Puppeteer，所以我写了这段代码：

await page.evaluate(() => {
    while(document.querySelector('main').querySelector('ul').querySelector('button'))
      document.querySelector('main').querySelector('ul').querySelector('button').click()
  })

它什么都不做，开始一个无限循环。我试图在循环内超时等等...... 我希望该代码将检查此按钮是否存在以及是否为 true - click() 在它存在时加载越来越多的 cmets。我无法理解我做错了什么。

【问题讨论】：

标签： javascript node.js google-chrome-devtools puppeteer headless-browser

【解决方案1】：

在此处查看我对与此问题非常相似的问题的回答：
Puppeteer / Node.js to click a button as long as it exists -- and when it no longer exists, commence action

您应该能够将其应用于查找并不断单击“加载更多”按钮。

【讨论】：

非常感谢！我这样写对吗，因为我得到'未定义'const loadMoreButton = await page.evaluate(() => { return document.querySelector('main').querySelector('ul').querySelector('button'); })？
我建议你使用更简洁的 CSS 选择器。例如，您不需要查询main，然后查询ul，然后查询button。根据 DOM 的布局，您可能可以做一些更简单的事情，例如 ul li button（假设按钮位于无序列表中的列表元素内）。保持一切清洁和简单。不要过度复杂化。如果您愿意，请发布您的 DOM 快照以及您要查找的按钮，然后我们都可以帮助您找到更简单的选择器。
我用const loadMoreButton = '.class' 试过了，效果很好，谢谢！但我需要访问 dom 元素，因为 instagram 经常改变它的类
如果类正在改变（我知道很多网站都这样做），那么你需要做的是找到一个永远不会改变的选择器的独特部分。例如，在该按钮上，今天的班级可能是2xP123_button，但下个月可能是3rQ456_button：请注意，班级的_button 部分始终保持不变。所以你可以有一个这样的选择器：button[class*="_button"] 来表明你想找到那个按钮。

【解决方案2】：

在加载 cmets 时，您可以使用 setInterval() 将每次迭代减慢到更易于管理的速度，而不是使用 while() 循环：

await page.evaluate(async () => {
  await new Promise((resolve, reject) => {
    const interval = setInterval(() => {
      const button = document.querySelector('main ul button');
      if (button !== null) {
        button.click();
      } else {
        clearInterval(interval);
        resolve();
      }
    }, 100);
  });
});

【讨论】：