Sometimes it is useful to perform visual testing only on a specific part of the web page. For example, if you want to make sure compliance related information (such as disclaimers, notices etc) are unchanged as part of your website deployments.

To start

Below is a screenshot of a website that contains a cookie disclaimer (on the bottom of the page).  We can create a project that crops the screenshot and only crop the image to show the disclaimer element. This can be useful to ensure the disclaimer message stays intact after a website update.

Find the element you would like to crop

In order to find the element that you want to crop, you can use the “Inspect elements” feature on google chrome/firefox or other web browsers to find the element’s CSS class or ID in order for us.

In this case, the CSS class of the contact form is “#cccwr“, let’s put that value into the configuration. Under project settings >> screenshot you will find a section for “Screenshot modification”

Create screenshot collection

Now when you create new screenshot collections, Trakr will automatically crop the screenshot to the element you have specified.