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 org.junit.jupiter.api.*;
import org.openqa.selenium.MutableCapabilities;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.AbstractDriverOptions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.openqa.selenium.support.ui.WebDriverWait;

import java.io.File;
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.junit.jupiter.api.Assertions.assertEquals;
import static org.openqa.selenium.By.className;
import static org.openqa.selenium.OutputType.FILE;
import static org.openqa.selenium.support.ui.ExpectedConditions.presenceOfAllElementsLocatedBy;


public class SeleniumVisualDemoTest {

    private static VisualTestingService visualTestingService = new VisualTestingService();
    private static VisualBuildData visualBuildData;

    private static final String PROJECT_NAME = "--------- BILLING_UNIT -----------";

    private static final String API_KEY = "--------- YOU API KEY -----------";
    private static final String SELENIUM_HUB = "browserhub-us.mobitru.com";

    private final AbstractDriverOptions<? extends MutableCapabilities> options;

    private RemoteWebDriver driver = null;

    public SeleniumVisualDemoTest() {
        options = new ChromeOptions();
    }

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


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

    @BeforeEach
    public void before() throws Exception {
        URL connectionUrl = new URL(format("https://%s:%s@%s/wd/hub", PROJECT_NAME, API_KEY, SELENIUM_HUB));
        driver = new RemoteWebDriver(connectionUrl, options);

        driver.manage().timeouts()
                .pageLoadTimeout(ofMinutes(1));
    }

    @Test
    public void demoTest() {
        final String openUrl = "https://mobitru.com/";
        driver.get(openUrl);
        new WebDriverWait(driver, ofMinutes(1), ofSeconds(1))
                .withMessage("Page was not loaded")
                .until(driver -> presenceOfAllElementsLocatedBy(className("get-access")));
        assertEquals(openUrl, driver.getCurrentUrl(),
                "Current url is incorrect");
        assertEquals("Mobitru: Real Devices, Browsers & AI - in One Enterprise Testing Platform", driver.getTitle(),
                "Page title is incorrect");
        submitSnapshot("after_open", VISUAL_TEST_NAME, driver);
    }

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

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

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

Scroll to Top