Submit visual data via API and JavascriptExecutor

Below, you can find the steps for submitting visual data using a mixed approach, where a Build is managed via API and snapshots are submitted via JavascriptExecutor.

Step 1: Create a build item

First, it’s necessary to create a build, which will contain the general information about a group of images for an application build.
Here is an example of a cURL request for this:

curl --location 'https://visual.mobitru.com/billing/unit/<BILLING_UNIT>/api/v1/builds' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <ACCESS_KEY>' \
--data '{
    "name": "Build 1",
    "project": "Test Automation Demo",
    "branch": "main"
}'

Below you can find a sample of the response with the ID of the created build:

{
    "id": "6251a5a8-2060-4714-bf23-dfb67080c424",
    "name": "Build 1",
    "project": "Test Automation Demo",
    "branch": "main",
    "status": "running",
    "createdAt": "....",
    "updatedAt": "...."
}

Step 2: Add snapshots to build

After a new build is created via API, visual snapshots can be submitted to perform the comparison.
The following metadata can be provided for a snapshot:

  • buildId – the ID of the created build, which is retrieved from the API response on the previous step.
  • name – a keyword, which will identify the uploaded image
  • testName – a test name, which will be used as an additional image identifier
  • suiteName – a suite name for a group of tests.

Here is an example of a JavascriptExecutor request for submitting a single snapshot:

public void submitSnapshot(String snapshotName, String buildId, String testName, String suiteName) {
        if (driver instanceof JavascriptExecutor) {
            Map<String, Object> snapshotData = Map.of(
                    "buildId", buildId,
                    "name", snapshotName,
                    "testName", testName,
                    "suiteName", suiteName
            );
            ((JavascriptExecutor) driver).executeScript("mobitru:visualCheck", snapshotData);
        }
    }
def submit_snapshot(driver,  build_id, result_name, test_name, suite_name):
    snapshot_data = {
        'buildId': build_id,
        'name': result_name,
        'testName': test_name,
        'suiteName': suite_name,
    }
    driver.execute_script('mobitru:visualCheck', snapshot_data)
async function submitSnapshot(driver, buildId, name, testName, visualSuiteName) {
    const snapshotData = {
        "buildId": buildId,
        "name": name,
        "testName": testName,
        "suiteName": visualSuiteName,
    };
    await driver.executeScript('mobitru:visualCheck', [snapshotData]);
}
 private void SubmitSnapshot(RemoteWebDriver driver, String buildId, String name, String testName, String suiteName)
        {
            var snapshotData = new Dictionary<string, object>
            {
                { "buildId", buildId},
                { "name", name},
                { "testName", testName},
                { "suiteName",suiteName}
            };
            driver.ExecuteScript("mobitru:visualCheck", snapshotData);
        }

A web page screenshot will be taken automatically and assigned to the Build.
The following information will be, also, collected automatically and added to the snapshot:

  • browser – a keyword, which will be related to some browser type, like chrome
  • browserVersion – a keyword, which will be related to some browser version, like latest

Step 3: Finish the build

After uploading of snapshots, it’s necessary to finish the build to trigger the comparison.

Here is an example of a cURL request:

curl --location --request POST 'https://visual.mobitru.com/billing/unit/<BILLING_UNIT>/api/v1/builds/<BUILD_ID>/finish' \
--header 'Authorization: Bearer <ACCESS_KEY>'

Below you can find a sample of the response, which indicates that the build is finished and the comparison process is triggered:

{
    "message": "Build finished successfully"
}

Scroll to Top