Visual / UI Test Automation using Selenium and Applitools Eyes

Visual / UI Testing is a methodology for validating the multiple visual aspects of Websites, Mobile apps and Desktop apps across multiple browser, resolution and OS combinations.

Visual / UI Testing is very important these days as more and more applications are getting web enabled. (i.e more of the standalone applications are being converted into websites) & most of the websites are eyeing on 'Responsive Web Design' to create a single website across multiple resolutions.The mobile apps designed for a platform has to support multiple screen resolutions or devices.

This type of testing is usually performed manually. However, now you can automate these type of tests using different automation tools available in the market. One such automation tool is Applitools Eyes which has the advantage of validating visual aspects within the existing Selenium scripts.


Both Functional Testing & Visual Testing can go hand-in-hand without having to maintain separate set of scripts.

As part of visual testing one can test multiple visual aspects like the color, font, wire frames, images, alignment, complete layout in different resolutions, pixel level oneness among multiple browsers & resolution combinations etc...and the list goes on...

Steps: 

Step 1: 

Register for Applitools Free Account to get the API Key @ Applitools.com.

Step 2:

Download the Eyes Java SDK from the below link.

https://store.applitools.com/download/eyes_selenium_java/

Extract and add it as dependencies to the java project.

Step 3:

Create a class file & add the below code snippet to test functionality & visual aspects in parallel.

public static void main(String[] args) throws URISyntaxException,InterruptedException {

System.setProperty("webdriver.chrome.driver","path/chromedriver.exe");

// Required for firefox in Selenium 3 

System.setProperty("webdriver.gecko.driver","Path/geckodriver.exe");

//WebDriver driver = new FirefoxDriver();

WebDriver driver = new ChromeDriver();

// Initiate Eyes Class & Set the API key for auth. (Register Free & get your own API Key)

Eyes eyes = new Eyes();

eyes.setApiKey("adsdsadGET_YOUR_API_KEYRo6WW2GZ");

try {

// To set the baseline Name.

eyes.setBaselineEnvName("BaseImages");

// To force full screenshot in all browsers

eyes.setForceFullPageScreenshot(true);

// To check only the Layout rather pixel level difference

eyes.setMatchLevel(MatchLevel.LAYOUT2);

//Set the wait time before taking screenshot

eyes.setWaitBeforeScreenshots(2000);

//Can set desired view port or let eyes set it to default.

driver = eyes.open(driver, "Google", "BaseImages");

//driver = eyes.open(driver, "Google", "BaseImages",new RectangleSize(1000, 600));

driver.get("https://www.google.co.in");

// Visual validation #1

eyes.checkWindow("Home Page");

// Enter Search String & click on Search icon

driver.findElement(By.xpath("//*[@id='lst-ib']")).sendKeys("Seleniumhq");

driver.findElement(By.xpath("//*[@id='sblsbb']/button[@class='lsb']")).click();

// Visual validation #2

eyes.checkWindow("Search Results Page");

// Click on search result

driver.findElement(By.xpath("//h3/a[contains(text(),'Downloads - Selenium')]")).click();

// Visual validation #3

eyes.checkWindow("Download Selenium Page");

// End Visual Testing.

eyes.close();

} finally {

// Abort test in case of an unexpected error.

eyes.abortIfNotClosed();

driver.close();

}

}

Step 4:

Execute the above code snippet, Applitools would provide the results link in the console for direct viewing. Else the UI validation results are stored in Applitools account for reference.

Sample Result View:

Difference b/w Baseline & Actual side-by-side

Reference Links:

https://applitools.com/features/

https://applitools.atlassian.net/wiki/display/Java/Selenium+-+Java