Top

Documentation

Project Settings

Project settings page is the control center for each project, it gives you various tools and configurations to fine-tune your project. Below is a quick run through of each tab and some of the features.

 

Main

All of the project information entered when you created a new project are presented here. This screen mainly allow you to add/remove urls or change device breakpoint you want to test.

 

Automatic

Enabling automatic snapshot means BackTrac will regularly take screenshots for the project for the configured frequency. This is helpful if you want to keep a visual backup of the website and/or for archival purposes.

Enabling automatic snapshot + diff allows you to monitor your project for unwanted visual changes, you will automatically receive email notification when visual difference is detected.
Automatic snapshot + diff can help notify you when defacement or other type of exploits are taking place on your website/

 

Environment

BackTrac gives you the ability to configure multiple environment for your project. Once you have entered environment information, you can use the “Compare” feature to quickly run visual comparison test between two environments in a project.

Environments are useful when you want to preview changes (staging vs. production) before deploying them to a live environment.
Typically base environment URLs are set up like the following:

  • Production: http://www.example.com
  • Stage: http://stage.example.com
  • Development:: http://dev.example.com

 

Login

If you need to test URLs that are behind a login wall (i.e. paid membership website, intranet, etc), you can optionally provide your username and password in order to authorize BackTrac from running comparison tests. You will also need to provide the css selectors for the username, password and submission form elements.

Some common content management system login urls looks like:

  • Wordpress: http://www.example.com/wp-admin
  • Drupal: http://www.example.com/user/login
  • Joomla: http://www.example.com/administrator

 

Notification

You can also add additional email addresses that will receive notification when visual changes are detected on the project. This is helpful to project stakeholders that do not need to log into the system.

 

Snapshot Settings

Snapshot settings contains two advanced but useful features. Crop screenshot by querySelector gives you the ability to crop snapshots taken. This is helpful when you want to monitor just a small part of the web page.

For example, a regular snapshot taken by BackTrac contains the full screenshot of the webpage:

However, we can select a specific part of the web page to test by adding the selector “#hero-slider-wrapper”. The resulting screenshot will look like:

 

Exclude Elements from Screenshot is another highly useful feature as it gives you the ability to exclude sections from a web page from being tested. For example, if I wanted to exclude all advertisements on a website from being tested, I could simply supply the appropriate selectors and the resulting screenshot will look like below:

Please note that sections being excluded are color coded in green.

Using exclude elements from screenshot feature correctly will reduce “false positives” from BackTrac’s comparison tests.
To learn how to use CSS Selectors, please see http://www.w3schools.com/cssref/css_selectors.asp

 

Advanced

Advanced settings provide additional situational support when capturing websites. For example, you can set a 10 to 15 seconds delay on websites that contain timed splash pages.