Skip to main content

Comparing web-page against a mockup image

Yarden Naveh
Updated

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.

 

Related articles

Comments

0 comments

Article is closed for comments.