It is simply possible to find all truly visible and clickable elements in the page using the document.elementFromPoint
function. However, it returns null
for elements outside of the viewport.
So, how to find all clickable and visible elements in the full page? The visible elements are not just limited to the styles. Just consider a container <div>
which is now hidden behind all children elements. So, the parent <div>
is not longer visible.
So, do you have any idea how it is possible to find all really visible elements in the page? In the example above, obviously “Parent <div>
” is not visible practically. There are some other unpredictable situations where those elements may not be visible and the styles (display
,visibility
, etc.) may not indicate it.
My final intention: I want to check if an element is really visible and clickable for the end-user or not. As an example use case I want to find all possible zones a user may click on.