Submit visual data via JavascriptExecutor

Below, you can find the steps for submitting visual data via JavascriptExecutor

Step 1: Specify build information in browser options

First, it’s necessary to specify the build information, which is related to a group of images for an application build.
The information should be added to the browser options before starting a browser session.
Here is an example for various programming languages:

public void startDriver() {
        ChromeOptions chromeOptions = new ChromeOptions();
        Map<String, Object> mobitruOptions = new HashMap<>();
        
        Map<String, Object> visualTestingBuildInfo = Map.of(
              "name", "Build 1",
              "project", "Java Automation Demo for JavascriptExecutor",
              "branch", "main",
              "failOnError", false
        );
        mobitruOptions.put("visualTesting", visualTestingBuildInfo);
        
        chromeOptions.setCapability("mobitru:options", mobitruOptions);
        RemoteWebDriver driver = new RemoteWebDriver(new URL("https://" + BILLING_UNIT+":" + ACCESS_TOKEN + "@browserhub-us.mobitru.com/wd/hub"), chromeOptions);
    }
def start_driver():
    options = webdriver.ChromeOptions()
    mobitru_options = {
        'visualTesting': {
            'name': "Build 1",
            'project': "Python Automation Demo for JavascriptExecutor",
            'branch': "main",
            'failOnError': False
        }
    }
    options.set_capability('mobitru:options', mobitru_options)
    cloud_url = f"https://{BILLING_UNIT}:{ACCESS_TOKEN}@browserhub-us.mobitru.com/wd/hub"
    driver = webdriver.Remote(cloud_url, options=options)
it('browser session init', async function () {
    const mobitruOptions = {
      'mobitru:options': {
          'visualTesting': {
                      'name': "Build 1",
                      'project': "JS Automation Demo for JavascriptExecutor",
                      'branch': "main",
                      'failOnError': false
                  }
        }
    }
    let driver = new Builder()
        .withCapabilities(mobitruOptions)
        .forBrowser(Browser.CHROME)
        .usingServer(`https://${BILLING_UNIT}:${ACCESS_TOKEN}@browserhub-us.mobitru.com/wd/hub`)
        .build()
});
[SetUp]
public void Setup()
{
    var browserOptions = new ChromeOptions();

    var mobitruOptions = new Dictionary<string, object>();

    var visualBuildInfo = new Dictionary<string, object>
            {
                { "name", "Build 1" },
                { "project", "C# Automation Demo for JavascriptExecutor" },
                { "branch", "main" },
                { "failOnError", false }
            };
    mobitruOptions.Add("visualTesting", visualBuildInfo);

    browserOptions.AddAdditionalOption("mobitru:options", mobitruOptions);
            
    var seleniumHubUrl = $"""https://{ProjectName}:{AccessKey}@{SeleniumHost}/wd/hub""";

  driver = new RemoteWebDriver(new Uri($"{seleniumHubUrl}"), browserOptions);
}

Step 2: Add snapshots to build

A new build will be created automatically after starting a browser session.
After that, visual snapshots can be submitted to perform the comparison.
The following metadata can be provided for a snapshot:

  • 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 testName, String suiteName) {
        if (driver instanceof JavascriptExecutor) {
            Map<String, Object> snapshotData = Map.of(
                    "name", snapshotName,
                    "testName", testName,
                    "suiteName", suiteName
            );
            ((JavascriptExecutor) driver).executeScript("mobitru:visualCheck", snapshotData);
        }
    }
def submit_snapshot(driver, result_name, test_name, suite_name):
    snapshot_data = {
        'name': result_name,
        'testName': test_name,
        'suiteName': suite_name,
    }
    driver.execute_script('mobitru:visualCheck', snapshot_data)
async function submitSnapshot(driver, name, testName, visualSuiteName) {
    const snapshotData = {
        "name": name,
        "testName": testName,
        "suiteName": visualSuiteName,
    };
    await driver.executeScript('mobitru:visualCheck', [snapshotData]);
}
 private void SubmitSnapshot(RemoteWebDriver driver, String name, String testName, String suiteName)
        {
            var snapshotData = new Dictionary<string, object>
            {
                { "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.
The finish action will be automacially performed after call the driver.quit() method

Scroll to Top