Applitools is a powerful visual comparison tool that applies machine learning to help verify the layout of web applications and websites. CrossBrowserTesting can take automated screenshots across hundreds of browsers and once, then have Applitools analyze the differences.

 

 

1.  You will need to setup an applitools account at applitools.com if you don’t already have one
2. Once you have registered at Applitools and have logged in, click on the ‘person’ icon at the top right. Select ‘My API Key’ and copy the api key. You will need to enter this once in CBT.
3. Login to CBT, and go to the screenshots, under the ‘Start a Screenshot Test’ section.
4. Enter a URL, then open the advanced options menu by clicking ‘Advanced Options’. You should see a ‘Send to Applitools Eyes’ radio button. Turn this on.
5. There is an edit button option and a text indication of wether or not your API key is set. Click edit to open a configurations menu.
6. Place your Applitools API key obtained in step 2 into the corresponding text field in our configurations menu.
   • For advanced use, if you have a custom Applitools Eyes endpoint, you can enter its base URL in the advanced setting dropdown. However the default setting will work for users without a custom endpoint.
7. Click ‘Save’ to enter your Applitools API Configurations.
8. Using the Applitools test name field gives you the ability to name your Applitools tests. Screenshot Tests with the same name will be compared against each other.
9. Pick the browsers you want to use. I would tend to keep this list small for doing regression tests – 4 – 8 major browsers.
10.  Now, Run the test. The system will create the windowed screenshots and the full page screenshots.
11. Once all the screenshots have totally finished, the test will be automatically sent to Applitools as a batch.
12. You can access individual comparisons as well as a view of the entire batch in the Applitools App through links in our Screenshot Test Result page.
13. All of your various test’s will also be viewable under the “Apps & Tests” view of the Applitools App under the application name ‘CBT Screenshot Tests’.

 

 

The good part… rerunning your test in the future. To do this, find the test in CBT, and select ‘Run Again’. This will create the screenshots and upload them to Applitools. The system will automatically match up these screenshots to the corresponding screenshot taken earlier (matched based on url, browser, operating system, resolution). Once the test finishes, you can go into Applitools. It will perform a visual comparison and show passed / failed tests.

 

At that point, there is a lot of power in Applitools to help manage the test. You can mark areas that should be ignored, accept new tests as the new baseline, etc.