Applitools is a powerful visual comparison tool that applies machine learning to their 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.
-
You will need to setup an Applitools account at applitools.com if you do not already have one.
-
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 CrossBrowserTesting.
-
Login to CrossBrowserTesting, and go to the screenshots, under the Start a Screenshot Test section.
-
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.
-
There is an edit button option and a text indication of whether or not your API key is set. Click edit to open a configurations menu.
-
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.
-
-
Click Save to enter your Applitools API Configurations.
-
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.
-
Pick the browsers you want to use. I would tend to keep this list small for doing regression tests – 4 – 8 major browsers.
-
Now, Run the test. The system will create the windowed screenshots and the full page screenshots.
-
Once all the screenshots have totally finished, the test will be automatically sent to Applitools as a batch.
-
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.
-
All of your various tests will also be viewable under the Apps & Tests view of the Applitools App under the application name CrossBrowserTesting Screenshot Tests.
The good part... rerunning your test in the future. To do this, find the test in CrossBrowserTesting, 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.