Image Comparison Using Java & Selenium

Introduction:

Let’s explore the topic of image comparison testing, which is often overlooked by testers who typically focus more on validating texts, buttons, forms, fields, and other similar elements. However, in some instances, businesses may require testing of images such as logos, infographics, and other graphics. 

I encountered such a scenario in my project, where I had to compare two images from different windows. This project was related to life sciences, specifically comparing images of two different animals. During this process, I discovered two methods for image comparison testing through automation using Selenium WebDriver and Java. Today, we will look into these two aspects of image comparison testing.

I don’t think any industries are left that are not involved in the minor or major level of image testing. At least, organizations will ask testers to perform testing of the logo placed on their website and it is very common to ask. Still, I have listed examples of some of the industries below where Image comparison testing can be extensively used.

Prerequisite: 

Need to download API dependency, BufferedImage library (Optional – Pointlib and Sikuli ) 

Applications of Image Comparison in Various Domains:

• E-commerce: Ensuring accurate representation of products and their images is crucial for online retailers.
• Advertising and Marketing: Verification of visual advertisements, banners, and promotional materials is essential for maintaining brand consistency.
• Gaming: Testing game graphics, character designs, and visual effects are vital for delivering an immersive gaming experience.
• Healthcare and Medical Imaging: Evaluating medical images for accuracy and precision is critical for diagnostic purposes.
• Automotive: Comparing images of vehicle designs, safety features, and user interfaces helps ensure optimal user experiences.

Image comparison cannot be directly performed using Selenium WebDriver alone. However, when there is a specific need for image comparison, we can rely on third-party APIs to achieve this functionality. One such API is AShot, which allows us to compare two images. In this blog, I will explain how to compare two images using the AShot API.

Sometimes during automation, we need to compare two images for verification. We can compare two images using Java selenium with the help of Ashot API as the web driver does not support image comparison. 

Step-by-Step Implementation Guide:

1. We need to capture the screenshot of a particular element and store it in the framework of the project during execution.
2. Then compare the captured image with the expected image which was already stored in the project.

To capture the image during automation Selenium has to take a screenshot interface which allows us to take the screenshot of the whole screen. The code snippet to take screenshots is explained below

TakesScreenshot scrShot =((TakesScreenshot)webdriver);

File SrcFile=scrShot.getscreenshots(OutputType.FILE);

But when there is a need to take a screenshot of a particular element or image then there are various methods available in Selenium like BufferedImage, PointLib library, and external libraries like Sikuli.

While doing image comparison some things need to be kept in mind such as both images should have the same dimensions and if images are grid images then both images must be grid images otherwise they won’t be recognized as the same image.

Java ImageIO class:

This is a final class that belongs to the javax.imageio package. This class provides a convenient method for reading and writing images and performing simple encoding and decoding. The class provides a lot of utility methods related to image processing. Using this class, we can deal with popular image extensions like .jpg, .gif, .png, etc.

BufferedImage class:

This is a subclass of the Image class. It handles and manipulates the image data. A ColorModel of image data makes up a Buffered Image. The bufferedImage class consists of so many things like getHeight, getWidth,getRGB, etc.

In the first Image comparison method, we take both images’ RGB values with the Color class’s help. The Color class is a part of the Java Abstract Window Toolkit (AWT) package. The Color class creates color by using the given RGBA values and has different methods which return the component in the range of 0-255.

Comparison Scenarios: Considered Image Scenarios:

Positive scenario:

Where both the images are the same. For this scenario both the methods mentioned below will give the result as – images are the same.

Negative scenario:

Where one small change is made in the images. one small black dot is added in the image as seen below. For this scenario, the first method will give the result as images are not the same and the second method will give the result as images are the same. So we can confirm that the first method is more accurate to check every small change in the image.

Method 1:

This method of comparing the RGB value is more reliable than the second one. The second method only reflects the difference when there is a significant change in the images.

Here is the link provided for the code of both methods.

ImageComparison/ImageProcessing.java at main · sarmorikar-spurqlabs/ImageComparison (github.com)

Let’s understand the program in detail

1. So here, we use the BufferedImage class to read the images and save them as BufferedImage objects named img1 and img2, respectively.
2. By using the getWidth()and getHeight() methods we are reading the height and width of both the images as the height and width of both the images should be the same otherwise it will not proceed further to find out the difference. And if it is not the same, the program will print “Both images should have the same dimensions”  as we compare them in an if loop.
3. If the images are the same then it will execute 2 for loop for height and width. We are reading the RGB value of both the images by method getRGB. And we are storing that value in integers defined as pixels and pixel integer values are passing values into the Color class.
4. The color class has a method to read the red, green, and blue values of the images and then find the sum of the differences in RGB values of the two images. 
5. From the differences we find out the average and the percentage and if the percentage is equal to 0 then the images are the same and if the rate is more than 0 then the photos are different.
   

Method 2:

Let’s Understand Method 2 in detail

1. Again, we are using the BufferedImage class to read the images, and we are saving them as BufferedImage objects named img1 and img2, respectively.
2. Now we are creating the object of the ImageDiffer class and the ImageDiffer class has a built-in method makeDiff which compares two images. If there is a difference, it returns the ImageDiff class object.
3. Then we are using the hasDiff built-in method to check the value of the diff objects and confirm whether the images are different.

This way we can compare two images whether they are the same or not using Ashot. Here the intention of showing a negative scenario is to make sure that the scenarios are working fine even if there is a small change in the expected image. Method 1 is more accurate as it is comparing the RGB values of the images and when there is a small change in the image also it will give an accurate result.

Conclusion:

Image comparison using the AShot API provides a reliable and efficient method to verify and validate images during automation testing. By using the capabilities of Ashot and implementing the image comparison process, we can enhance the quality and reliability of our automation tests, ensuring that the visual aspects of our applications meet the desired expectations. 

Read more blogs here.

6