Run sample Playwright Java 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 preparing the config, you can run your first web test

package com.mobitru;


import com.microsoft.playwright.*;
import com.mobitru.visual.VisualBuildData;
import com.mobitru.visual.VisualBuildInputData;
import com.mobitru.visual.VisualSnapshotInputData;
import org.testng.annotations.AfterSuite;
import org.testng.annotations.BeforeSuite;
import org.testng.annotations.Test;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.util.*;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

public class PlaywrightVisualDemo {
    private static final String PROJECT_NAME = "<TEAM_CODE>";
    private static final String API_KEY = "mobitru_ak_...";
    private static final String BROWSER_HUB = "browserhub-us.mobitru.com";
    private static final String BROWSER_NAME = "chrome";
    private static final String PW_VERSION = "1.54.0";

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

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


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

    @Test
    public void demoTest() throws IOException {
        String wsEndpoint = String.format("wss://%s:%s@%s/playwright/%s/playwright-%s?headless=false&enableVideo=false",
                PROJECT_NAME, API_KEY, BROWSER_HUB, BROWSER_NAME, PW_VERSION);
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().connect(wsEndpoint);
            Page page = browser.newPage();
            page.navigate("https://www.mobitru.com/");
            assertThat(page.locator("button[class*='request-demo']")).isVisible();
            submitSnapshot(browser.browserType().name(), "after_open", VISUAL_TEST_NAME, page);
            browser.close();
        }
    }

    private void submitSnapshot(String browser, String name, String testName, Page page) throws IOException {
        Path tmpFile = Files.createTempFile("screenshot", ".png");
        page.screenshot(new Page.ScreenshotOptions()
                .setPath(tmpFile));
        VisualSnapshotInputData snapshotInputData = VisualSnapshotInputData.builder()
                .buildId(visualBuildData.getId())
                .testName(testName)
                .browser(browser)
                .name(name)
                .suiteName(visualBuildData.getProject())
                .image(tmpFile.toFile())
                .build();
        visualTestingService.submitSnapshot(snapshotInputData);
    }

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

}

Scroll to Top