Image comparison in Selenium WebDriver using Java

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.

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

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).