Smart Visual Testing feature allows you to test and compare two image layouts to quickly find out the differences between them. With just one click you will now be able to view visual bugs easily such as Icon Size, Padding, Color, Layout, Text, Element Placement and much more.
Once you login, Click on Navigation menu bar in the left > Visual UI Test > Smart Testing
Next we have to upload Baseline image
Step 1: Upload a baseline image. Click on the + icon next to Base Line Images header
Step 2: Select baseline images from your computer. You can also select multiple images at a time.
Step 3: Once selected, images will be uploaded and you can view the same under Baseline Image gallery
Upload Comparison Images. Please note that you cannot upload comparison images before uploading a baseline. Once you have uploaded the baseline image, below are the steps to upload a comparison image.
Step 1: Click on the baseline image you want to run comparison with.
Step 2: On the right you will find Upload Comparison Image button. Click on it to upload images.
Step 3: Select the images you want to compare with baseline image. You can select multiple images as well.
Step 4: If everything goes well you would see the thumbnail of your comparison images along with the RUN button.
Step 1: Once you have uploaded the comparison images, running comparison is pretty simple. Just click on Run button on the comparison image thumbnail.
Step 2: Or you can also click on compare all button.
Once you have ran the comparison between baseline and comparison images, you can check the issues by clicking on the View issues button on comparison image.
This will take you to a new window with comparison image. In this window you can zoom-in or Zoom out the images, change the image difference color, switch to slider mode, switch to side-by-side mode, or mark the image as bug.
There are multiple option for you to view your images. The side by side mode will open all three images, baseline image, comparison image, and comparison result image in a single window. In this mode also you can also mark the image as bug. Or you can switch to any other mode.
In slider mode you can view the baseline image and comparison image overlapped over each other and toggle them with a slider. This mode can help you view the difference between two images very easily.
You can change the baseline or comparison image easily. Just click on the settings button at the bottom of the image thumbnail. You would see multiple options like View Image Details, Replace Image, Rename Image, and Delete Image.