Applitools is a visual validation tool that compares images from any source against a pre-existing baseline.
As such tool Applitools can support comparing web pages against mockup images.
To achieve such a comparison first the mockup image should be set as the baseline, second, the actual web site should be compared against it.
Here is a quick and easy way to conduct such a comparison.
Prepare the mockup image as part of an HTML File
First, create an html page with the image as follow:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Mockup</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
}
</style>
<body>
<script>
function addImage(path, width){
document.body.innerHTML = "<center><img src='"+path+"' width='"+width+"'></center>";
}
</script>
</body>
</html>Conduct the Comparison using Selenium and Applitools
Next, Use selenium SDK to capture the mockup image and save it as baseline and then validate the web page against this baseline:
import com.applitools.eyes.BatchInfo;
import com.applitools.eyes.MatchLevel;
import com.applitools.eyes.RectangleSize;
import com.applitools.eyes.selenium.StitchMode;
import com.applitools.eyes.selenium.fluent.Target;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.rmi.UnexpectedException;
import java.util.ArrayList;
public class Mockup {
private static WebDriver driver;
private static CompareEyes eyes;
private static String appName = "My Application Name";
private static String testName = "My Test Name";
private static RectangleSize viewPortSize = new RectangleSize(800, 600);
private static String htmlFileLocation = "file:///Users/john/Desktop/mockup.html";
private static ArrayList<String[]> dataBase = new ArrayList<>();
public static void main(String[] args) {
try {
driver = new ChromeDriver();
initEyes();
eyes.setEnableComparison(true);
initDataBase();
eyes.open(driver, appName, testName, viewPortSize);
uploadMockups();
eyes.switchToComparisonMode(driver);
runTest();
eyes.close();
driver.quit();
} catch (UnexpectedException e) {
e.printStackTrace();
}finally {
driver.quit();
eyes.abortIfNotClosed();
}
}
public static void initEyes(){
/* Create CompareEyes instance */
eyes = new CompareEyes();
/* Set API key */
eyes.setApiKey(System.getenv("APPLITOOLS_API_KEY"));
/* Set batch */
eyes.setBatch(new BatchInfo("My Batch"));
/* Set match level to Layout */
eyes.setMatchLevel(MatchLevel.LAYOUT);
/* Enable full page screenshot with CSS stitching */
eyes.setForceFullPageScreenshot(true);
eyes.setStitchMode(StitchMode.CSS);
}
public static void initDataBase(){
/* Creating a database of URL<->Mockup pairs. */
dataBase.add(new String[]{"http://www.applitools.com", "/Users/john/Desktop/Applitools.png"});
dataBase.add(new String[]{"https://help.applitools.com", "/Users/john/Desktop/Support.png"});
}
public static void uploadMockups(){
String width;
String getWidthCommand = "function getWidth() { var scrollWidth = document.documentElement.scrollWidth; var bodyScrollWidth = document.body.scrollWidth; return Math.max(scrollWidth, bodyScrollWidth);}; return getWidth();";
String hideScrollbarCommand = "document.body.style.overflow = 'hidden';";
/* Taking screenshots of the mockups */
for (String entry[]:dataBase) {
driver.get(entry[0]);
eyes.setHideScrollbars(true);
((JavascriptExecutor) driver).executeScript(hideScrollbarCommand);
width = ((JavascriptExecutor) driver).executeScript(getWidthCommand).toString();
driver.get(htmlFileLocation);
((JavascriptExecutor) driver).executeScript("addImage('" + entry[1] + "','" + width + "');");
eyes.check(entry[0], Target.region(By.cssSelector("img")).timeout(0));
}
}
public static void runTest(){
/* Taking screenshots of the URLs */
for (String entry[]:dataBase) {
driver.get(entry[0]);
eyes.check(entry[0], Target.window());
}
}
}The above example is using CompareEyes class (Download it from here) and is able to validate multiple URLs/mockups in a single run.
To run this example:
1. Download the following files:
- Test.java
- CompareEyes.java (Download from here).
- mockup.html
2. Place the html file on your machine.
3. Edit the htmlFileLocation parameter in the Test.java file.
4. Edit the URL<->mockup pairs database in Test.java file with your data.
5. Edit the app name, test name, viewport size in Test.java. (optional)
5. Run the test.