Hello
My goal is to imitate human behaviour and make sure that only scrolled-to links/hyperlinks are clicked with puppeteer. Just like a human would click only the hyperlinks they can see on the screen
My Specs
Puppeteer: 22.13.1
Puppeteer-extra: 3.3.6
NodeJS: 20.14.11
TypeScript: 5.5.3
Pseudo Code Example
if (element.isVisibleOnScreenAndScrolledTo()) {element.click()}
More Details
I am scrolling through a website using puppeteer and want to open only visible links like if a user was using the page
It doesn’t matter if the answer is in JS or TS as long as it’s correct.
I’ve Tried (to no avail)
- Googled about this for 15 minutes
- Read elementhandle api docs thrice
- Discovered the scrollIntoView() method but it’s not exactly what I am looking for
- Read the Frame class api docs
- Implemented my temporary solution (read below)
Temporary Solution
For now I will do it the other way around:
- Get a list of all the elements I want to click
- Scroll to them using the scrollIntoView() method
- Click them
This solution does not suit me because I want to first scroll (‘explore’ new hyperlinks) then click them.
Clarification
Scrolling first and clicking only the ‘explored’ hyperlinks will inevetably skip some of the hyperlinks in the process. However I am okay with that
Answer expectation
All I expect from an answer is a way to check if a hyperlink or an html element is visible on screen