search

eWert-Online / OSnap

OSnap is a snapshot testing tool, which mainly focuses on speed and ease of use.
https://ewert-online.github.io/OSnap/
152 stars 2 forks source link

Ignore selector doesn't work when element is outside of standard viewport (fullscreen = true) #19

Closed kevin-j-morse closed 2 years ago

kevin-j-morse commented 2 years ago

If fullScreen mode is turned on and there is an element outside the standard viewport (example: at the bottom of a long page) then the ignore based on selector feature does not seem to work.

After moving the same element to the top of the page (within the standard viewport size) the ignore by selector works.

kevin-j-morse commented 2 years ago

I think the problem must be with DOM.getContentQuads

If I am correct, you could use Runtime.evaluate to call the JavaScript function getBoundingClientRect which seems to handle elements outside the viewport without issue.

eWert-Online commented 2 years ago

Thank you for reporting this 🙂

If I am correct, you could use Runtime.evaluate to call the JavaScript function getBoundingClientRect which seems to handle elements outside the viewport without issue.

This sounds reasonable. Another option would be to scroll the element into view first. (https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-scrollIntoViewIfNeeded) My guess is, that this would be faster, as we don't have to invoke a JS function.

If you want (and feel able to) you could submit a PR for this.

kevin-j-morse commented 2 years ago

Would scrolling into view screw up the reported position at all? I guess the easiest option is just to try it.

Re: Opening a PR, I had never heard of Reason until yesterday but I'll see what I can do... I'm an old school Apache, PHP, MySQL kinda guy...

eWert-Online commented 2 years ago

@kevin-j-morse I tried to reproduce the issue, but I couldn't. I am testing the cypress.io site, which has a slider on the bottom of the page, listing some users.

Ignoring seems to work fine:

Ignored Section ![screenshot](https://user-images.githubusercontent.com/7459510/159519676-996c956f-687e-40d3-bf8b-9ca4e1026b8f.png)
Complete Diff ![cypress_320x180](https://user-images.githubusercontent.com/7459510/159518810-7c519935-42c4-479b-ae2d-29e6fa51538c.png)

Are you sure, that you are not ignoring the wrong element on the page? The way the selectors work is, that only the first matching element is ignored. So if you are ignoring a class, it would only ignore the first element it finds in the DOM with that class.

eWert-Online commented 2 years ago

I am closing this for now. Feel free to reopen, if you have more info 🙂