Top

Monitor Specific Section

On very high dynamic sites (for example search pages, news listing pages etc.) there are more changing elements than static.

So in these cases it might be useful to visually test just specific section of the website in order to isolate changes detected.

For example, If I wanted to be notified of changes of the top 3 tennis players changes on the website http://tennis.com (see highlight below).

You can simply extract it from the whole page completely.

For that you can simply locate the specific element within the page and find its corresponding css selector. In this case the selector is .top-ranked-players
 

There’s a good post on how to find css selectors on https://dailypost.wordpress.com/2013/07/25/css-selectors/

Once you have the css selector, you can go to the Project Settings page under Snapshot settings tab. Enter the css selector in the "Crop screenshot by querySelector.” field.
 

All snapshots taken after the configuration is saved will be cropped to the selected section of the website (see below)

In this way this page's element is completely isolated and no content changes on the site in other areas will affect it. Meanwhile if something will be changes in styles of this block you will be notified immediately.

If you have multiple elements on the pages you need to cover -- please create several projects in the system. One per element.

Let us know if you need help with setting up this feature for your project. We are happy to do that. Just drop email to info@backtrac.io