Compare Images and Screenshots in Selenium WebDriver

This tutorial on Image Comparison is Part 10 of the Selenium WebDriver Tutorial Series. Check out Part 9 to learn about File Download using WebDriver.

Compare Image and ScreenShots

Selenium is a good functional testing tool, but it doesn’t have much to offer in the UI related area – mainly to compare images. We have to rely on external libraries for testing UI related scenarios like checking if a button or logo is displayed correctly, or if an image is in correct position etc.

This can be done using Image Comparison libraries and in fact, there are quite a few libraries out there. Checkout this post from Test & Win to see image comparison using ImageMagick and im4java. FrontEndTest created their own library to compare images.

In this tutorial, we will see how to compare Images and Screenshots without our own implementation. You can check the complete files here in my GitHub project.

Overview

Our aim is to compare two images and show the difference in them. So, we can have a separate class for doing just that. This can be incorporated into your automation framework in whichever way you choose.

Image Comparison Class

This is a simple class which performs the comparison between two images based on a threshold value.

I’ll start with the primary method here.

As you can see, it takes in two image files and converts them to BufferedImage objects for processing. It then compares each image pixel by pixel and draws a red line whenever it finds a difference which is greater than the allowed threshold value. You can change the threshold based on your needs, but I find it good at around 10-20.

SEE ALSO:   How to Take Different Types of Screenshots in Selenium WebDriver

You can see the complete ImageComparator class here.

Here is a sample I have tried with two images. The top image is the base image, the second one the actual/current image and the bottom one is the difference image created our the class. Btw, you can change the color in the diff image by changing the DIFF_COLOR variable.

Image Comparator Output

Let’s see the usage now.

Test Script for Comparing Images or ScreenShots

We will see three scenarios here

  • Compare screenshot of element from the page with a saved image

We navigate to the required page using Selenium WebDriver operations and then take a screenshot of the required element. Check out this post to see how to take a partial screenshot. We compare this screenshot with an image we have already taken and saved.

  • Compare screenshot of element with a baseline

This approach is preferred if we have a baseline environment where the images or application state can be treated as a baseline. Similar to above, we take the required screenshot. But here, we take the screenshot from both the baseline application and the application under test and compare them.

  • Compare full page screenshot

This takes a full page screenshot and compares it with either a saved image or baseline image.

Here is a snippet of the methods. Check out the full test class here.

Hope you found this post helpful.

SEE ALSO:   How to Handle Alerts and Frames in WebDriver

Further Reading:

I want to thank you for reading this post. Have a wonderful week 🙂

You may also like...

2 Responses

  1. Arun Pahilajani says:

    Thanks for sharing. There’s a tool called Sikuli as well which does similar functions in terms of bitmap comparisons…it’s easy to incorporate sikuli jars within a selenium project….there are sikuli nuget wrappers available as well for projects using selenium c# bindings…

  2. John M. Beckett says:

    Selenium is not a testing tool, it’s a checking tool.

Leave a Reply

Your email address will not be published. Required fields are marked *