javascriptpuppeteerzyte

Why isn't Puppeteer page.click waiting (maybe Browserless?)


Goal: I have a page that I need to get html from after first clicking something on the page.

Issue: The html that comes back is not waiting for that element click.

Here's one way that I've tried to do it.

await page.setViewport({width: 1400, height: 800});
await page.waitForSelector('.specs .accent', {visible: true, timeout: 80000});

const html = await page.evaluate(() => {
      const moreButton = document.querySelector('.specs .accent');
      moreButton.click();
      return document.body.innerHTML;
});

console.log(html);

Here's another way I've tried:

await page.setViewport({width: 1400, height: 800});
await page.waitForSelector('.specs .accent', {timeout: 80000});
await page.click('.specs .accent');
const html = await page.evaluate(() => document.body.innerHTML);
console.log(html);

The html that comes back is the html prior to the click happening. Leading me to believe that the click is broken, but not erroring out.

Notes:

Finally: I'm really not sure how to debug this further. Any clues?

Page for reference: https://www.article.com/product/16190/mod-blue-berry-armchair


Solution

  • The solution is that certain javascript requests being blocked can interrupt the ability for an element to be clicked by Puppeteer. If you're having trouble with this, make sure no requests are being blocked by Browerless, Puppeteer, or your proxy and then try the page.click again.

    A simple debugging solution is to use page.screenshot to see if something is, in fact, clicked.