Some websites present popup overlays, disclaimers, widgets, and others that might prevent us from properly capturing the entirety of the web page for the purpose of performing visual testing. In these cases, we can use the “remove elements” option. This essentially removes the entire HTML element from the page from the screenshot capturing.

If you simply want to exclude an element/area from visual testing, please consider using the “mask elements” option instead.

To start

For example, the website below prompts users to sign up for a newsletter before revealing the full content of the website. This is unhelpful for trying to capturing the true contents of the page.

This is where the “Remove elements” option comes in.

Remove elements

Under project settings >> screenshot you will find a section for “Screenshot modification”. You will be able to use CSS selectors to specify elements to be removed from the screenshot being captured. In this case the overlay with the email sign-up box. Upon close inspection of the HTML markup, we can target the overlay element with the following CSS selector div.popupS-open

As the result, the screenshot will be taken without the overlay now.