Image Comparison in Selenium





Image Comparison in selenium will discuss about how to compare two images in selenium. Practically speaking image comparison is not possible with selenium web driver but when there is a specific need then we can depend on third party API to achieve this functionality. AShot is of the API’s we can use to compare two images.

To compare two images, we need to capture the screenshot of the particular element and we can store it somewhere in the project folder structure and we can capture same image dynamically while automating the application and we can compare this image/screenshot with the image/screenshot which we captured and placed in the folder structure for the reference(i.e. expected).

As we already saw how to capture the screenshot of a particular web element using AShot in one of our previous blogs. Will use the same approach to capture the screenshot and will use the same to compare the images/screenshots.  

Here will take two examples; one is positive scenario (will take the screenshot and will compare the same thing dynamically captured screenshot); in this case test script should PASS. And another one is negative scenario ( will add small pixel to the captured(i.e.expected) screenshot and compare the same thing dynamically captured screenshot); in this case test script should FAIL.




Below is the sample program to capture the web element screenshot (i.e. expected image/reference image):

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import javax.imageio.ImageIO;
import java.io.File;
 
public class TakeWebElementScreenshot
{
   public static void main(String args[]) throws Exception
   {
       System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
       WebDriver driver = new FirefoxDriver();
 
       driver.get("http://demo.automationtesting.in/Register.html");
       Thread.sleep(2000);
 
       WebElement webElement = driver.findElement(By.cssSelector("#imagetrgt"));
 
       Screenshot screenshot = new AShot().takeScreenshot(driver,webElement);
       ImageIO.write(screenshot.getImage(),"PNG",new File(System.getProperty("user.dir") +"\\Images\\ElementScreenshot.png"));
 
       Thread.sleep(2000);
       driver.quit();
   }
}





Below is the sample code for Positive scenario. Here we will compare two images which are same:

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.Assert;
import org.testng.annotations.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.comparison.ImageDiff;
import ru.yandex.qatools.ashot.comparison.ImageDiffer;

public class ImageComparisonPositive 
{
    WebDriver driver;
    
    @Test
    public void imageComaparision() throws IOException
    {
        System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
        driver = new FirefoxDriver();
        driver.get("http://demo.automationtesting.in/Register.html");
        
        WebElement logoImage = driver.findElement(By.cssSelector("#imagetrgt"));
        
        BufferedImage expectedImage = ImageIO.read(new File(System.getProperty("user.dir") +"\\Images\\ElementScreenshot.png"));
        Screenshot logoImageScreenshot = new AShot().takeScreenshot(driver, logoImage);
        BufferedImage actualImage = logoImageScreenshot.getImage();
                
        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage);
        Assert.assertFalse(diff.hasDiff(),"Images are Same");
                
        driver.quit();
    }
}




Below is the sample code for Negative scenario. Here we will compare two images which are NOT same:

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.Assert;
import org.testng.annotations.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.comparison.ImageDiff;
import ru.yandex.qatools.ashot.comparison.ImageDiffer;

public class ImageComparisonNegative {
    
    WebDriver driver;
    
    @Test
    public void imageComaparision() throws IOException
    {
        System.setProperty("webdriver.gecko.driver", "D:\\Selenium\\geckodriver.exe");
        driver = new FirefoxDriver();
        driver.get("http://demo.automationtesting.in/Register.html");
        
        WebElement logoImage = driver.findElement(By.cssSelector("#imagetrgt"));
        
        BufferedImage expectedImage = ImageIO.read(new File(System.getProperty("user.dir") +"\\Images\\ElementScreenshotWithPixle.png"));
        Screenshot logoImageScreenshot = new AShot().takeScreenshot(driver, logoImage);
        BufferedImage actualImage = logoImageScreenshot.getImage();
                
        ImageDiffer imgDiff = new ImageDiffer();
        ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage);
        Assert.assertFalse(diff.hasDiff(),"Images are Same");
                
        driver.quit();
    }
}

This way we can compare two images which are same or not using Ashot. Here the concept of showing negative scenario is to make sure that the scenarios working fine even there is a small change in the expected image.

By using this we can compare company logos and some important images which should not change.

Please watch the youtube video for better understanding.



Related Posts