Selenium Visual Element Comparison with Ashot API

We often wanted to check if visual alignment and presentation of our elements is correct or not also we wanted to make sure elements should not be overlapped with eachother, There is lot of importance when there is UI bug, because it is easily visible to the end user.

Functional testing and API testing is important but we should have smoke checks around the UI elements look and feel.

Selenium has its library to capture the screenshot and Ashot is libarary that help specificaly in capturing screenshot.

Take an example of this Amazon logo, I wanted to compare both the images.

vs

What is Ashot:

WebDriver Screenshot utility

• Takes a screenshot of a WebElement on different platforms (i.e. desktop browsers, iOS Simulator Mobile Safari, Android Emulator Browser)
• Decorates screenshots
• Provides flexible screenshot comparison

The below steps of code can be easily used to compare, also, with getsubimage function, you can actually compare the particular size and structure as well.

Step 1:

Just add below dependency in your Maven project.

<!-- https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot -->
<dependency>
    <groupId>ru.yandex.qatools.ashot</groupId>
    <artifactId>ashot</artifactId>
    <version>1.5.3</version>
</dependency>

Step 2: Capturing the WebElement

One can take a screenshot of particular WebElement(s). Just specify the element(s).

WebElement myWebElement = webDriver.findElement(By.cssSelector("#my_element"));
new AShot()
  .takeScreenshot(webDriver, myWebElement);

Step 3.: Use ImageDiffer to find a difference between two images.

ImageDiff diff = new ImageDiffer().makeDiff(myScreenshot, anotherScreenshot);
BufferedImage diffImage = diff.getMarkedImage(); // comparison result with marked differences

The complete program in Java TestNG: give it a try:

package SampleScreenShot;


import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.net.MalformedURLException;
import java.net.URL;


import javax.imageio.ImageIO;


import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Platform;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.interactions.internal.MouseAction;
import org.openqa.selenium.interactions.touch.ScrollAction;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.remote.ScreenshotException;
import org.testng.annotations.Test;


import junit.framework.Assert;
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;
import ru.yandex.qatools.ashot.coordinates.WebDriverCoordsProvider;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;


public class ScreenShotCompare {
	@Test
	public  void testScreenShot() throws IOException, InterruptedException {


		DesiredCapabilities dc = new DesiredCapabilities();
		System.setProperty("webdriver.chrome.driver", "C:\\Automation\\chromedriver.exe");
		String current = System.getProperty("user.dir");


		ChromeOptions options = new ChromeOptions();


		WebDriver driver = new ChromeDriver(options);


		// Selenium Script
		driver.get("https://amazon.com");
		driver.manage().window().maximize();
		WebElement logoImageElement = driver.findElement(By.xpath("https://a[@aria-label='Amazon']"));
		Screenshot logoImageScreenshot = new AShot().coordsProvider(new WebDriverCoordsProvider())
				.takeScreenshot(driver, logoImageElement);


		ImageIO.write(logoImageScreenshot.getImage(), "png",
				new File("C://Users/anand/Documents/ActualAmazonlogo.png"));


		BufferedImage expectedImage = ImageIO.read(new File("C://Users/anand/Documents/ShareX/ExpectedAmazonlogoWrong.png"));
		BufferedImage actualImage = logoImageScreenshot.getImage();


		ImageDiffer imgdiffer = new ImageDiffer();


		ImageDiff imgdiff = imgdiffer.makeDiff(expectedImage, actualImage);


		Assert.assertFalse("Images are Different", imgdiff.hasDiff());


		// driver.close();
	}
}

If images are different you can get below output: