How to compare images in Selenium Webdriver?

We might encounter scenarios where we must compare or verify images while doing UI automation. There are various third-party tools to achieve this goal, but we will compare and verify images with the help of internal functions in Java and Selenium.

We will first look at a generic program which can compare two images and tell us whether they are identical or not and then we will look at how we can use it in selenium automation.

Let’s assume that we have two images at a certain location which we want to compare

• C:\image1.png
• C:\image2.png

We will use the java.awt.* package in our article to compare the images. So, let’s start…

First, we will have to get the images at the above locations.

String image1Location = "C:\\image1.png";
String image2Location = "C:\\image2.png";

Image image1 = ImageIO.read(new File(image1Location));
Image image2 = ImageIO.read(new File(image2Location));

Now, we will create the PixelGrabber objects for each image we got above.

PixelGrabber image1Grab = new PixelGrabber(image1, 0, 0, -1, -1, false);
PixelGrabber image2Grab = new PixelGrabber(image2, 0, 0, -1, -1, false);

We will compare three things to validate whether both images are identical.

• Comparing the width
• Comparing the height
• And comparing the pixels of both images

Now, PixelGrabber class provides getWidth() to get the width, getHeight() to get the height and getPixels() to get the pixels of an image.

But before getting all these details, we would have to call the grabPixels() method to request the image or ImageProducer to start delivering pixels.

int[] image1Data = null;
int[] image2Data = null;
if (image1Grab.grabPixels()) {
	int image1Width = image1Grab.getWidth();
	int image1Height = image1Grab.getHeight();
	image1Data = new int[image1Width * image1Height];
	image1Data = (int[]) image1Grab.getPixels();
}
if (image2Grab.grabPixels()) {
	int image2Width = image2Grab.getWidth();
	int image2Height = image2Grab.getHeight();
	image2Data = new int[image2Width * image2Height];
	image2Data = (int[]) image2Grab.getPixels();
}

After getting the details, we can compare the images

	if ((image1Grab.getHeight() != image2Grab.getHeight())
			|| (image1Grab.getWidth() != image2Grab.getWidth())) {
		System.out.println("Images mismatched");
	} else if (java.util.Arrays.equals(image1Data, image2Data)) {
		System.out.println("Images Matched");
	} else {
		System.out.println("Images mismatched");
	}

Below is the whole program to compare two images.

import java.awt.Image;
import java.awt.image.PixelGrabber;
import java.io.File;

import javax.imageio.ImageIO;

public class CodekruTest {

	public static void main(String[] args) {

		try {
			String image1Location = "C:\\image1.png";
            String image2Location = "C:\\image2.png";

            File image1File = new File(image1Location);
            File image2File = new File(image2Location);

            Image image1 = ImageIO.read(image1File);
			Image image2 = ImageIO.read(image2File);

			PixelGrabber image1Grab = new PixelGrabber(image1, 0, 0, -1, -1, false);
			PixelGrabber image2Grab = new PixelGrabber(image2, 0, 0, -1, -1, false);
			
			int[] image1Data = null;
			int[] image2Data = null;
			if (image1Grab.grabPixels()) {
				int image1Width = image1Grab.getWidth();
				int image1Height = image1Grab.getHeight();
				image1Data = new int[image1Width * image1Height];
				image1Data = (int[]) image1Grab.getPixels();
			}
			if (image2Grab.grabPixels()) {
				int image2Width = image2Grab.getWidth();
				int image2Height = image2Grab.getHeight();
				image2Data = new int[image2Width * image2Height];
				image2Data = (int[]) image2Grab.getPixels();
			}

			if ((image1Grab.getHeight() != image2Grab.getHeight())
					|| (image1Grab.getWidth() != image2Grab.getWidth())) {
				System.out.println("Size mismatched");
			} else if (java.util.Arrays.equals(image1Data, image2Data)) {
				System.out.println("Matched");
			} else {
				System.out.println("Not matched");
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

The above program will successfully compare the two images and print the corresponding result.

Comparing and verifying Images in Selenium

Normally in selenium automation, we can come across such scenarios where we have to compare an image with a screenshot taken at the time of test execution. So, we will try to do that in a little activity now.

• We will store one image at a certain location ( this will work like an expected image).
• Then we will take a screenshot of the HTML ( this will work like the actual image).
• And lastly, we will compare both images using the above program.

Let’s do it step by step.

Storing the image at a certain location

We will store the below image at the “C:\screenshot.png” location.

Taking a screenshot of the HTML document

        WebElement webElement = driver.findElement(By.tagName("html"));
        File actualFile = webElement.getScreenshotAs(OutputType.FILE);

The above code will take the screenshot of the “html” WebElement and store it in a File. We can take screenshot of any web element that we want. In our example, we are taking a screenshot of the “html” element.

Note: We are using our selenium playground website – https://testkru.com/Elements/TextFields.

Finally, comparing the images

We have our expected and actual images, and now we can compare them using the program above.

import java.awt.Image;
import java.awt.image.PixelGrabber;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class CodekruTest {

	public static void compareImages(File image1File, File image2File) {

		try {
			Image image1 = ImageIO.read(image1File);
			Image image2 = ImageIO.read(image2File);

			PixelGrabber image1Grab = new PixelGrabber(image1, 0, 0, -1, -1, false);
			PixelGrabber image2Grab = new PixelGrabber(image2, 0, 0, -1, -1, false);

			int[] image1Data = null;
			int[] image2Data = null;
			if (image1Grab.grabPixels()) {
				int image1Width = image1Grab.getWidth();
				int image1Height = image1Grab.getHeight();
				image1Data = new int[image1Width * image1Height];
				image1Data = (int[]) image1Grab.getPixels();
			}
			if (image2Grab.grabPixels()) {
				int image2Width = image2Grab.getWidth();
				int image2Height = image2Grab.getHeight();
				image2Data = new int[image2Width * image2Height];
				image2Data = (int[]) image2Grab.getPixels();
			}

			if ((image1Grab.getHeight() != image2Grab.getHeight())
					|| (image1Grab.getWidth() != image2Grab.getWidth())) {
				System.out.println("Images Mismatched");
			} else if (java.util.Arrays.equals(image1Data, image2Data)) {
				System.out.println("Images Matched");
			} else {
				System.out.println("Images Mismatched");
			}

		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Test
	public void imageTest() throws IOException {
		
		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "E:\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		// opening the url
		driver.get("https://testkru.com/Elements/TextFields");

		WebElement webElement = driver.findElement(By.tagName("html"));

		File expectedFile = new File("C:\\screenshot.png");
		File actualFile = webElement.getScreenshotAs(OutputType.FILE);

		compareImages(expectedFile, actualFile);
	}
}

This is it. We hope that you have liked the article. If you have any doubts or concerns, please feel free to write us in the comments or mail us at admin@codekru.com.