7

I am currently working in Selenium WebDriver to compare two images during automation. Currently I am using pixel comparison but the problem comes if the browser size is changed or the system is different on which I run the automation.

I have to compare two images, one is the golden one which is already saved in a location and the other one is the screenshot taken during the automation. As soon as the screenshot is taken, it is compared with the golden image I have, and a pass or fail is asserted accordingly. The problem comes if the browser size or the system resolution is different when the screenshot is taken, because this will affect the resolution of the image which might not be same as the resolution of the golden image I have for reference. Here both the images are same but the pixels might change with the browser size or system change.

So is there any way to compare two images using java in selenium with out using pixel comparison?

Deepak Rai
  • 2,163
  • 3
  • 21
  • 36
aarsha
  • 71
  • 1
  • 1
  • 2

3 Answers3

1

The key thing here is the resolution, you must ensure that resolution is the same for base "golden" images and those you capture during test.

  1. Set size of the browser window to fixed size, eg. (1920x1080),
  2. Make all screenshots in this resolution,
  3. During the test: before each image-comparison check if the window size is (1920x1080) if not I change it temporarily,
  4. Take screenshot,
  5. Compare image with original "golden" img
  6. Do window maximize

Other solution is to capture screenshots of single WebElement rather than whole page, because WebElements often are resolution independent.

Leszek_PL
  • 31
  • 4
0

You can use Huxley by Facebook or Wraith by BBC, both are open source tools. Wraith Selenium integrates Selenium and Wraith. You can read this post for more information

Mesut GUNES
  • 7,089
  • 2
  • 32
  • 49
0

You want to use pixel comparison but instead of taking a screenshot, which may be a different size, compare the actual image to the golden image. The flow would be to navigate to the page, grab the SRC value from the IMG tag and download that file. Compare the downloaded file to the golden image.

Here's some sample code that downloads the google logo.

WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
driver.get("http://www.google.com");
String s = driver.findElement(By.id("hplogo")).getAttribute("src");
URL url = new URL(s);
System.out.println(url);
BufferedImage bufImgOne = ImageIO.read(url);
ImageIO.write(bufImgOne, "png", new File("test.png"));

By downloading the image, you can manually verify the image later if the validation fails. If you don't want to download it, you can probably skip the write() step and just do the comparison (depending on how your pixel comparison code is written).

JeffC
  • 22,180
  • 5
  • 32
  • 55
  • Hi, thank you for the suggestion. But the problem is that, the one which I am comparing is not an image file, it is a java script code which generates a plot in the webpage. i have to compare this plot with the screenshot of the plot already taken and kept aside as golden image. So is there any way to proceed with this? – aarsha Mar 16 '16 at 04:22
  • First I would suggest that you clarify your question. I didn't interpret it in the way you just described. But... yes, you can. It sounds like the biggest issue you are having is the resizing of browsers. For doing image comparisons (and other things) you will want to ensure consistency between runs. You will want to make sure any machine you do a run on is exactly the same (as much as possible). Things to consider are desktop resolution, browser maximized, and so forth. If you are taking a screenshot with the code, making it golden, and then comparing to future screenshots you should be good. – JeffC Mar 16 '16 at 13:43