Mask elements

Many of the websites today contain dynamic elements, features such as slideshow, video backgrounds, and other embedded widgets. Unfortunately, the dynamic elements are often the source for false positive testing results. Masking the elements helps to exclude these elements from the screenshot and the visual testing process and reduce the occurrence of false positive testing results.

Screenshot

Note on this page, there is an advertisement banner for “Nike tennis“. Generally speaking, ad banners should be excluded from testing because they will rotate as well as providing false positive changes in our comparisons.

Under project settings >> advanced you will find a section for “Screenshot modification”. You will be able to use CSS selectors to specify elements to be masked from the screenshot.

Mask elements

Masking elements do not remove the elements from the screenshot completely. It simply adds a “mask” so that they will not be taken into consideration when we perform image comparison. In this case, after inspecting the element, we can apply the CSS selector to.box-ad mask all of the advertising banner areas on the page.

Masked

As you can see, now the advertising banner area now has a mask applied to it, therefore it is excluded from the image comparison.