Comparing and re-sizing images using Selenium

While automating a web application some of us have to deal with the test to check that an image has been successfully uploaded or not.And that the uploaded image matches with the actual one or not. To automate this test, there are certain things that we need to achieve:

1. Saving the image that has been uploaded for comparison with the original image.
2. Handling the re-sizing and re-formatting of the image by the web application itself.
3. Logic to compare images.

1. Saving the image.
Selenium does not support any direct way to actually store/get an image. But there are other ways like "right-click" and "Save as" option using which you can save the image on firefox and chrome. Once you get an image you can move further with the second step that is checking size of the image.

2. Handling the re-sizing and re-formatting of the image by the web application itself.
Whenever we upload an Image to a web-app it internally re-size and re-format the image while storing or rendering to save space and improve performance. So if you save an uploaded image from your web-app  and want to compare it with the original image, it will fail. The reason being the image that you had downloaded from the web-app has been modified and may not match with the original image in terms of format, size and clarity. The solution to it can be achieved by getting the logic from the development team for re-sizing or re-formatting of image that they use inside their code. You can use then use the same code in you automation test to re-size and re-format your original image and then compare it with the downloaded image to check whether both matches or not.
Following code will give you a general idea on how to re-size an image.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

public BufferedImage resize(BufferedImage img, int newW, int newH) { //Getting the width and height of the given image.  int w = img.getWidth();   int h = img.getHeight(); //Creating a new image object with the new width and height and with the old image type   BufferedImage dimg = new BufferedImage(newW, newH, img.getType());   Graphics2D g = dimg.createGraphics();   g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,     RenderingHints.VALUE_INTERPOLATION_BILINEAR); //Creating a graphics image for the new Image.   g.drawImage(img, 0, 0, newW, newH, 0, 0, w, h, null);   g.dispose();   return dimg;  }

3. Logic to compare images.
Once you had completed the above two steps you can go ahead with comparison of the images.
Following is a  java code using which you can actually match two images pixel by pixel.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.image.BufferedImage; import java.awt.image.Raster; import java.io.File; import java.io.IOException; public void compareImage() {   boolean ret = true;   try {    original = ImageIO.read(new File(      "originalFile"));    copy = ImageIO.read(new File("copyFile"));    ras1 = original.getData();    ras2 = copy.getData(); //Comparing the the two images for number of bands,width & height.    if (ras1.getNumBands() != ras2.getNumBands()      || ras1.getWidth() != ras2.getWidth()      || ras1.getHeight() != ras2.getHeight()) {       ret=false;    }else{    // Once the band ,width & height matches, comparing the images.    search: for (int i = 0; i < ras1.getNumBands(); ++i) {     for (int x = 0; x < ras1.getWidth(); ++x) {      for (int y = 0; y < ras1.getHeight(); ++y) {       if (ras1.getSample(x, y, i) != ras2.getSample(x, y, i)) {      // If one of the result is false setting the result as false and breaking the loop.        ret = false;        break search;       }      }     }    }    }    if (ret == true) {     System.out.println("Image matches");    } else {     System.out.println("Image does not matches");    }   } catch (IOException e) {    System.out.println(e);   }  }