Hey Asaf,
We’re currently working on a feature to exclude sections of a page from snapshots and thus comparisons. This should be helpful to reduce false positives on auto-updating grids or archives and other dynamic sections like embedded content or animating elements.
Adding a developer API to trigger (reference) snapshots is a feature idea that we took record of, but isn’t planned in for development yet.
Best
Steffen
Thread Starter
asafm7
(@asafm7)
Thanks @steffenbew .
The feature you describe is interesting and probably useful in many use-cases.
Thinking about a product grid though, I’m not sure it is optimal. The design of the grid itself can break, regardless of its child elements, so excluding it entirely might be risky.
I hope you will consider prioritizing a way of refreshing a screenshot programmatically.
Thanks again for a great plugin 🙂
Asaf
Hi Asaf,
I get your point and agree that this might be a useful feature to monitor grids accurately.
Our current priorities are the following:
- Excluding elements from snapshots (to decrease false positives)
- Allowing to manually trigger tests (to run comparisons after updates or at other specific points in time)
- License management for multiple domains (to track and manage allocated contingencies)
We’ll decide on upcoming priorities, once those are done, or if any of them get canceled.
Thanks for your feedback and input!
Best
Steffen
Thread Starter
asafm7
(@asafm7)
Thanks @steffenbew for sharing the roadmap.
I don’t know how do you plan to implement exclusion feature, but I thought that if it is by using CSS selectors, it might be possible to exclude all grid children, bedside the first one that will be used as a testing sample.
@asafm7 We just released the feature to exclude elements with VRTs v1.4.0!
You’ll find a new quick edit option in the tests, a textarea option in the editor sidebar and on the alerts page. Just add a CSS selector to exclude elements from snapshots and thus from comparisons.
I hope you’ll like it and that you can make it work for your usecases!
Thread Starter
asafm7
(@asafm7)
Thanks @steffenbew ! Yes, I’ve seen the update and used it. Great feature! An interesting fact though, it seems to ignore CSS pseudo-elements (added with ::before or ::after). Meaning, if a pseudo-element is a child of an excluded element, the pseudo-element will still be shown in the screenshot. For example, these wishlist buttons:
https://drive.google.com/file/d/1uoKBMdyabVh4mANlp4AfEp31vShxAB_i/view?usp=drivesdk
@asafm7 Thanks for your feedback! That’s unexpected. We haven’t run into this yet. Our function hides elements with applying the following to the provided selectors:
.foo { visibility: hidden !important; }
However, it’s possible to explicitly override the visibility for pseudo-elements, by adding the following CSS:
.foo::after { visibility: visible; }
See example: https://codepen.io/steffenbew/pen/qBQdGYp?editors=1100
Could you please check if that’s the case for your website?
If so, you should be able to hide the pseudo-elements by explicitly adding them to your exclusion selectors:
.foo, .foo::before, .foo::after
Hope that works! If it doesn’t, please let me know.
Thread Starter
asafm7
(@asafm7)
Yes, it seems to be the case.
Thanks!
