使用 puppeteer 多次单击同一个按钮

Question

我试图在谷歌搜索食谱时点击“显示更多”按钮，多次使用 puppeteer。我让它在这样的 for 循环中工作，

for (let i = 0; i <= numberOfClicks; i++) {
    await page.click('div[aria-label="Show more"]')
    await page.waitForTimeout(800)
  }

但是，这会为每次点击增加 800 毫秒，我真的很想避免这种情况，以节省我正在拨打的电话的时间。

我尝试了各种不同的方法，并有类似的感觉，

for (let i = 0; i <= numberOfClicks; i++) {
    await page.waitForFunction(
      `document.querySelectorAll("g-inner-card a").length > ${i * 9}`
    )
    await page.click('div[aria-label="Show more"]')
  }

应该做我需要的，因为谷歌从 3 个食谱开始，每次点击“显示更多”时都会打开 9 个，但是，到目前为止，我只能让它点击一次，然后用这种方法挂起。

任何帮助将不胜感激，谢谢。

Answer 1

Google 的网页往往很难被抓取。元素具有不可靠的自动生成的类和 ID，Google 似乎喜欢不必要的动画。

经过一番折腾，以下是最适合我的方法：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: false});
  const [page] = await browser.pages();
  const url ="https://www.google.com/search?q=spaghetti+bolognese";
  await page.goto(url, {waitUntil: "networkidle0"});
  const showMoreSel = 'div[aria-label="Show more"]';

  while (await page.$eval(showMoreSel, el => el.offsetParent !== null)) {
    await page.evaluate(`document.querySelector('${showMoreSel}').click()`);
  }

  const urls = await page.$$eval("g-link a",
    els => els.map(e => e.getAttribute("href"))
  );
  console.log(urls);
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

这使用了两个技巧来绕过 Puppeteer 内置 DOM 操作抽象的缺点：

• page.$('div[aria-label="Show more"]', {visible: true}) 似乎总是认为“显示更多”按钮是可见的，即使它不可见（表示卡片的结尾）。在eval 中使用the native approach 似乎是准确的。
• page.click() 也失败了。此方法通过将鼠标悬停在选择器上，然后触发 mousedown 事件来工作，这可能会导致在尝试在紧密循环中使用动画移动物体时单击错误的物体。再次，evaluate 使用 a native browser click 进行救援。

假设 g-link a 与配方卡 1:1 映射可能很脆弱，因此您可能需要想出一种更可靠的方法来查找这些元素。