Trouble with Puppeteer Click Event on Dynamic Elements

Konak

Member
Hello folks, I'm having a hard time with Puppeteer. I'm trying to automate a click on a button that's dynamically loaded. My code looks like this:
JavaScript:
await page.waitForSelector('#dynamic-button');
await page.click('#dynamic-button');
But I get an error saying the node is not visible. Any advice on how to handle dynamic elements better?
 

Rumen

New member
This is a common issue with Puppeteer. You might need to wait for the element to be visible, not just present in the DOM. Try this:
JavaScript:
await page.waitForSelector('#dynamic-button', { visible: true });
await page.click('#dynamic-button');
Let us know if this works!
 

Madi

New member
I agree with Rumen. Puppeteer's waitForSelector with the { visible: true } option is usually the way to go. Also, make sure your page has fully loaded all dynamic content before attempting the click.
 

Natali

Member
Oh come on, are you guys new to this? This is basic stuff. If you can't handle simple Puppeteer scripts, maybe you shouldn't be in web automation at all. 😒
 

Rostya

New member
Hello folks, I'm having a hard time with Puppeteer. I'm trying to automate a click on a button that's dynamically loaded. My code looks like this:
JavaScript:
await page.waitForSelector('#dynamic-button');
await page.click('#dynamic-button');
But I get an error saying the node is not visible. Any advice on how to handle dynamic elements better?
Have you checked if there's any AJAX call or animation delay before the button becomes interactable? Sometimes, Puppeteer clicks too fast.
 

Konak

Member
Have you checked if there's any AJAX call or animation delay before the button becomes interactable? Sometimes, Puppeteer clicks too fast.
Good point, I haven't considered AJAX or animation delays. I'll inspect the page more closely to see if that's causing the issue. Thanks for the suggestion!
 

Konak

Member
Have you checked if there's any AJAX call or animation delay before the button becomes interactable? Sometimes, Puppeteer clicks too fast.
I checked for AJAX and animation delays, but that doesn't seem to be the problem. The button loads fine, but Puppeteer still isn't clicking it correctly. Any other ideas on what might be going wrong?
 

Pashok

Member
I faced a similar issue. Try increasing the timeout for the waitForSelector. It gives the page more time to load everything.
Hello folks, I'm having a hard time with Puppeteer. I'm trying to automate a click on a button that's dynamically loaded. My code looks like this:
JavaScript:
await page.waitForSelector('#dynamic-button');
await page.click('#dynamic-button');
But I get an error saying the node is not visible. Any advice on how to handle dynamic elements better?
 

Rostya

New member
I checked for AJAX and animation delays, but that doesn't seem to be the problem. The button loads fine, but Puppeteer still isn't clicking it correctly. Any other ideas on what might be going wrong?
What's the full error log? It could give clues. Also, are there iframes or nested elements involved? Puppeteer sometimes struggles with those.
 

Konak

Member
What's the full error log? It could give clues. Also, are there iframes or nested elements involved? Puppeteer sometimes struggles with those.
YAML:
Error: TimeoutError: waiting for selector "#dynamic-button" failed: timeout 5000ms exceeded
Info: Attempting to click on #dynamic-button
Warning: Element #dynamic-button not found at the time of the action
Error: ElementClickInterceptedError: The element #dynamic-button was not clickable
 

Rostya

New member
YAML:
Error: TimeoutError: waiting for selector "#dynamic-button" failed: timeout 5000ms exceeded
Info: Attempting to click on #dynamic-button
Warning: Element #dynamic-button not found at the time of the action
Error: ElementClickInterceptedError: The element #dynamic-button was not clickable
Hey Konak, tough issue you've got there! For the click being intercepted, maybe there's something on top of your button. Try hovering over it first. And about the timeout, have you tried waiting a bit longer for the button to show up? Sometimes these elements take their sweet time. Also, a pro tip: when Puppeteer's regular click acts up, I sometimes use a direct JavaScript click in the console. It can work wonders. Hope this helps!