Run sample web app visual test

Step 1: Setup environment

Requirements

  • JDK (Highly recommended to use JDK 8 SE)
  • Java build framework
  • Access key
    • You can generate an Access key using the following instruction – Access key
  • Billing unit
    • The billing unit is your team’s unique identifier, or just the word “personal” in the case of an individual account.
      More information can be found here.

Step 2: Add the interaction with visual testing API

After setup up the environment, you need to add the interaction with the visual testing API: 

package com.mobitru.visual;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;


@Data
@JsonIgnoreProperties(ignoreUnknown = true)
public class VisualBuildData {

    private String id;
    private String name;
    private String project;
    private String branch;
    private String status;
}

package com.mobitru.visual;

import lombok.Builder;
import lombok.Data;

@Data
@Builder
public class VisualBuildInputData {

    private String name;
    private String project;
    private String branch;
}


package com.mobitru.visual;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;

@Data
@JsonIgnoreProperties(ignoreUnknown = true)
public class VisualSnapshotData {

    private String id;
    private String name;
    private String buildId;
    private String testName;
    private String suiteName;
    private String browser;
    private String browserVersion;
    private String operatingSystem;
    private String operatingSystemVersion;
    private String device;
}

package com.mobitru.visual;

import lombok.Builder;
import lombok.Data;

import java.io.File;

@Data
@Builder
public class VisualSnapshotInputData {

    private String name;
    private String buildId;
    private File image;
    private String testName;
    private String suiteName;
    private String browser;
    private String browserVersion;
}


package com.mobitru;

import com.mobitru.visual.VisualBuildData;
import com.mobitru.visual.VisualBuildInputData;
import com.mobitru.visual.VisualSnapshotData;
import com.mobitru.visual.VisualSnapshotInputData;
import io.restassured.RestAssured;
import io.restassured.config.SSLConfig;
import io.restassured.specification.RequestSpecification;

import static io.restassured.http.ContentType.JSON;
import static java.net.HttpURLConnection.HTTP_CREATED;
import static java.net.HttpURLConnection.HTTP_OK;

public class VisualTestingService {

    private static final String VISUAL_TESTING_HOST = "visual.mobitru.com";
    private static final String VISUAL_TESTING_PROJECT_NAME = "--------- BILLING_UNIT -----------";
    private static final String VISUAL_TESTING_BASE_URL = String.format("https://%s/billing/unit/%s/api/v1/", VISUAL_TESTING_HOST, VISUAL_TESTING_PROJECT_NAME);
    private static final String VISUAL_TESTING_API_KEY = "--------- YOU ACCESS KEY -----------";


    public VisualBuildData createBuild(VisualBuildInputData inputData) {
        return buildBaseSpec().log().all()
                .contentType(JSON)
                .body(inputData)
                .post("/builds")
                .then()
                .statusCode(HTTP_OK)
                .extract()
                .as(VisualBuildData.class);
    }

    public void finishBuild(String buildId) {
        buildBaseSpec().log().all()
                .contentType(JSON)
                .post("/builds/{buildId}/finish", buildId)
                .then()
                .statusCode(HTTP_OK);
    }

    public VisualSnapshotData submitSnapshot(VisualSnapshotInputData data) {
        return buildBaseSpec().log().uri()
                .formParam("name", data.getName())
                .formParam("testName", data.getTestName())
                .formParam("suiteName", data.getSuiteName())
                .formParam("browser", data.getBrowser())
                .multiPart("image", data.getImage(), "image/png")
                .post("/builds/{buildId}/snapshots", data.getBuildId())
                .then()
                .statusCode(HTTP_CREATED)
                .extract()
                .as(VisualSnapshotData.class);

    }

    private RequestSpecification buildBaseSpec() {
        return RestAssured.
                given().
                config(RestAssured.config().sslConfig(new SSLConfig().relaxedHTTPSValidation())).
                baseUri(VISUAL_TESTING_BASE_URL).
                auth().oauth2(VISUAL_TESTING_API_KEY);
    }


}

Step 3: Run sample test

After setup up the environment and integrating the visual testing API, you can run your first web visual test

package com.mobitru;


import com.mobitru.visual.VisualBuildData;
import com.mobitru.visual.VisualBuildInputData;
import com.mobitru.visual.VisualSnapshotInputData;
import io.appium.java_client.AppiumDriver;
import io.appium.java_client.ios.IOSDriver;
import io.appium.java_client.ios.options.XCUITestOptions;
import io.appium.java_client.remote.options.BaseOptions;
import org.openqa.selenium.MutableCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.*;

import java.io.File;
import java.io.IOException;
import java.net.URL;

import static java.lang.String.format;
import static java.time.Duration.ofMinutes;
import static java.time.Duration.ofSeconds;
import static java.util.Optional.ofNullable;
import static org.openqa.selenium.By.cssSelector;
import static org.openqa.selenium.OutputType.FILE;
import static org.testng.AssertJUnit.assertTrue;

public class AppiumWebVisualDemo {

    private VisualTestingService visualTestingService = new VisualTestingService();
    private VisualBuildData visualBuildData;
    
    private static final String PROJECT_NAME = "--------- BILLING_UNIT -----------";

    private static final String ACCESS_KEY = "--------- YOU ACCESS KEY -----------";
    private static final String APPIUM_HUB = "app.mobitru.com";
    private static final String PLATFORM_VERSION = "18.5";
    private static final String BROWSER_NAME = "safari";
    private static final String DEVICE_NAME = "IPHONE iPhone16,2";

    private static final String VISUAL_TEST_NAME = "Java Web Appium Automation Demo";

    private final BaseOptions<? extends MutableCapabilities> capabilities;

    private AppiumDriver driver = null;

    public AppiumWebVisualDemo() {
        capabilities = new XCUITestOptions();
        capabilities.setCapability("platformVersion", PLATFORM_VERSION);
        capabilities.setCapability("browserName", BROWSER_NAME);
        capabilities.setCapability("deviceName", DEVICE_NAME);
    }


    @BeforeSuite
    public void createVisualBuild() {
        VisualBuildInputData data = VisualBuildInputData.builder()
                .name("Build 1")
                .project("Java Automation Demo")
                .branch("main")
                .build();
        this.visualBuildData = visualTestingService.createBuild(data);
    }

    @BeforeMethod
    public void before() throws Exception {
        driver = new IOSDriver(
                new URL(format("https://%s:%s@%s/wd/hub", PROJECT_NAME, ACCESS_KEY, APPIUM_HUB)), capabilities);

        // For devices with low performance
        driver.manage().timeouts()
                .pageLoadTimeout(ofMinutes(5))
                .implicitlyWait(ofSeconds(90));
    }

    @Test
    public void demoTest() throws IOException {
        final String openUrl = "https://www.mobitru.com/";

        assertTrue(format("Focus is not on '%s'", BROWSER_NAME), driver.isBrowser());

        driver.get(openUrl);

        new WebDriverWait(driver, ofMinutes(1), ofSeconds(1))
                .withMessage("Page was not loaded")
                .until(driver -> ExpectedConditions.visibilityOfAllElementsLocatedBy(cssSelector("button[class*='request-demo']")));

        submitSnapshot(BROWSER_NAME, "after_open", VISUAL_TEST_NAME, driver);
    }

    private void submitSnapshot(String browser, String name, String testName, RemoteWebDriver driver) {
        File screenshot = driver.getScreenshotAs(FILE);
        VisualSnapshotInputData snapshotInputData = VisualSnapshotInputData.builder()
                .buildId(visualBuildData.getId())
                .testName(testName)
                .browser(browser)
                .name(name)
                .suiteName(visualBuildData.getProject())
                .image(screenshot)
                .build();
        visualTestingService.submitSnapshot(snapshotInputData);
    }

    @AfterMethod
    public void after() {
        ofNullable(driver).ifPresent(RemoteWebDriver::quit);
    }

    @AfterSuite
    public void finishVisualBuild() {
        visualTestingService.finishBuild(visualBuildData.getId());
    }

}

Scroll to Top