Selenium /JAVA image comparison

Question

Currently, my Code takes some screenshot for some resolution.I want to comare image all image with last captured image.

My code for taking the screenshot.Now I want to do something where compare with the last list of resolution folder and current image folder and generate image where program will mark what is the different.Any help will be apprisiated.

@Test   
public void testResolution() throws InterruptedException 
{
    this.url = "https://www.google.com";
    driver.get(this.url);
    driver.navigate().to(this.url);
    String[] resulutions = { "1366x768" , "360x640" , "768x1024" , "375x667" , "1920x1080" , "320x568" , "1600x900" , "1280x800" , 
            "1440x900" , "1536x864" , "414x736" , "1280x1024" , "1280x720" , "1440x900" , "1680x1050" , "1024x768" , "1920x1080" ,
            "1280x800" , "1024x768" , "1280x800" , "412x732" , "320x534" , "320x570" , "1093x614", };

            // add resolution

    for (String resulution : resulutions) 
    {       
        String[] parts = resulution.split("x");     
        // Screen resolution
        Dimension screenRes = new Dimension(Integer.parseInt(parts[0]), Integer.parseInt(parts[1]));                    
        // Set browser resolution
        driver.manage().window().setSize(screenRes);
        driver.navigate().refresh();
        Thread.sleep(3000);
        this.takeScreenShot(resulution);
    }
}

/**
 *
 * @param fileName
 */

private void takeScreenShot(String fileName) 
{       
    File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    try {
        //FileUtils.copyFile(screenShot, new File("Old"+fileName+"/"+fileName+ ".png"));
        //FileUtils.copyFile(screenShot, new File("E:\\Faysal_test/"+fileName+"/"+fileName+ ".png"));
        FileUtils.copyFile(screenShot, new File("D:\\Automation/VRS/vrs-resolution/Screenshot/new/"+fileName+"/"+fileName+ ".png"));

    } catch (IOException ioe) {
        throw new RuntimeException(ioe.getMessage(), ioe);
    }
}

@Test

public void testResolutionold() throws InterruptedException 
{

    this.url = "https://www.rentalhomes.com/property/extended-stay-america-billings-west-end/BC-517037";
    driver.get(this.url);
    driver.navigate().to(this.url);
    String[] resulutions = { "1366x768" , "360x640" , "768x1024" , "375x667" , "1920x1080" , "320x568" , "1600x900" , "1280x800" , 
            "1440x900" , "1536x864" , "414x736" , "1280x1024" , "1280x720" , "1440x900" , "1680x1050" , "1024x768" , "1920x1080" ,
            "1280x800" , "1024x768" , "1280x800" , "412x732" , "320x534" , "320x570" , "1093x614",};
            // add resolution       
    for (String resulution : resulutions) 
    {

        String[] parts = resulution.split("x");

        // Screen resolution
        Dimension screenRes = new Dimension(Integer.parseInt(parts[0]), Integer.parseInt(parts[1]));


        // Set browser resolution
        driver.manage().window().setSize(screenRes);
        driver.navigate().refresh();
        Thread.sleep(3000);
        this.takeScreenShotold(resulution);
    }

}

/**
 *
 * @param fileName
 */

private void takeScreenShotold(String fileName) 
{

    File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    try {
        //FileUtils.copyFile(screenShot, new File("Old"+fileName+"/"+fileName+ ".png"));
        //FileUtils.copyFile(screenShot, new File("E:\\Faysal_test/"+fileName+"/"+fileName+ ".png"));
        FileUtils.copyFile(screenShot, new File("D:\\Automation/VRS/vrs-resolution/Screenshot/old/"+fileName+"/"+fileName+ ".png"));

    } catch (IOException ioe) {
        throw new RuntimeException(ioe.getMessage(), ioe);
    }
}

Answer 1

Check out the OpenCV library. You can find there what you need. Take a look here for example of how to compare images.

Answer 2

Check this link:

https://www.frontendtest.org/blog/screenshot-comparison/

These guys made their own library for comparing images and it has functionality you are talking about.

To use whole thing, little refactoring is needed but you can check how they generate new images base on original one with changes marked using red rectangles.

Below code draws a red rectangle on image cooridnates: X 100px, Y 100px (from top left corner); rectangle size: width 50px, hegiht 50px;

    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import javax.imageio.ImageIO;

    public boolean drawRectangle(BufferedImage img, String pathOut) throws IOException {                            
        imgOut = imageToBufferedImage(ImageIO.read(new File(img)));
        Graphics2D outImgGraphics = imgOut.createGraphics();
        outImgGraphics.setColor(Color.RED);
        outImgGraphics.drawRect(100, 100 , 50, 50);
        saveImage(imgOut,pathOut);
    }

    private BufferedImage imageToBufferedImage(Image img) {
            BufferedImage bi = new BufferedImage(img.getWidth(null),
                img.getHeight(null), BufferedImage.TYPE_INT_RGB);
            Graphics2D g2 = bi.createGraphics();
            g2.drawImage(img, null, null);
            return bi;
    }