BitBar

About BitBar

BitBar is a flexible, cloud-based, mobile and web application testing platform that allows you to perform live (manual) or automated testing against desktop browsers (Windows, macOS, and Linux) and real iOS and Android devices. BitBar supports Selenium-based web app testing frameworks and most native mobile test automation frameworks, across languages, such as Java, Python, and JavaScript. Free trial here.

Once enabled, all automated BitBar test runs that contain VisualTest screenshots will show a preview thumbnail that links to the relevant VisualTest test runs:

Tip

It is not essential to integrate BitBar and VisualTest, as the two products can work as separate stand-alone tools. The integration simply enables screenshots to appear conveniently within BitBar.

Getting started

Head to Profile in VisualTest and copy your API key:

Then, log in to BitBar. Go to My account, and click the API VisualTest tile:

Getting started with VisualTest in BitBar

This opens the below window. Paste in the copied API key where it says Update VisualTest API key and click Update. Your updated key will show in the Stored VisualTest API key dialog with some identifying characters visible and the sliding button set to Yes. Now create your first Project.

Set up BitBar Capabilities

In BitBar’s Automation Capabilities Creator, select your desired capabilities to connect to your desired browser configuration. It looks like this:

Set up VisualTest SDK

In the same scripts where you’ve set up the BitBar capabilities, insert the following code snippet to initialize the VisualTest SDK:

# Use the below code, copying BitBar API Key and VisualTest Project Token into the file:

import unittest
import time

from selenium import webdriver
from sbvt import VisualTest

BB_API_KEY = 'INSERT_BITBAR_APIKEY'
PROJECT_TOKEN = 'INSERT_PROJECT_TOKEN'

class TestSmartbearHomePage(unittest.TestCase):

   import warnings
   warnings.simplefilter("ignore") # turn off tracemalloc socket warnings

   caps = {
      'platform': 'Linux',
      'osVersion': '18.04',
      'browserName': 'firefox',
      'version': 'latest',
      'resolution': '2560x1920',
      'bitbar_apiKey': BB_API_KEY,
   }

   hubUrl = 'https://us-west-desktop-hub.bitbar.com/wd/hub'
   driver = webdriver.Remote(command_executor=hubUrl, desired_capabilities=caps)
   print(
      f'Launching webdriver for {caps["platform"]} {caps["osVersion"]} {caps["browserName"]} {caps["version"]} ')

   # load the url
   url = 'https://www.smartbear.com'
   print(f'Opening URL: {url}')
   driver.get(url)
   time.sleep(5)


   settings = {
      'projectToken': PROJECT_TOKEN,
   }
   visualTest = VisualTest(driver, settings)
   # full page screenshot
   fullPageScreenshot = visualTest.capture('Home Page')

   # viewport screenshot
   viewportScreenshot = visualTest.capture('viewport', {'viewport': True})


if __name__ == '__main__':
   try:
      unittest.main()
   except Exception as e:
      print(f'Error starting test {e}')

// This Sonatype page provides snippets and POM files for various dependency managers. Copy the below code to add the
// Java jar file into your project, inserting the BitBar API Key and VisualTest Project Token into the file:import com.smartbear.visualtest.VisualTest;
import com.smartbear.visualtest.models.ScreenshotResponse;
import org.openqa.selenium.By
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;

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

public class VisualTestExample {
   public static final String PROJECT_TOKEN = "<INSERT_VISUAL_TEST_PROJECT_TOKEN>";
   public static final String TEST_RUN_NAME = "<INSERT_TEST_RUN_NAME>";
   public static final String BITBAR_API_KEY = "<INSERT_BITBAR_API_KEY>";
   public static void main(String[] args) throws IOException {
      URL hubURL = new URL("https://eu-desktop-hub.bitbar.com/wd/hub");
      DesiredCapabilities capabilities = new DesiredCapabilities();
      capabilities.setCapability("platform", "Linux");
      capabilities.setCapability("osVersion", "18.04");
      capabilities.setCapability("browserName", "firefox");
      capabilities.setCapability("version", "107");
      capabilities.setCapability("resolution", "2560x1920");
      // Setting the api key
      capabilities.setCapability("bitbar_apiKey", BITBAR_API_KEY);

      WebDriver driver = new RemoteWebDriver(hubURL, capabilities);
      driver.get("https://www.smartbear.com");
      VisualTest visualTest = new VisualTest(driver, PROJECT_TOKEN, TEST_RUN_NAME);

         // FULL PAGE SCREENSHOT
         try {
            ScreenshotResponse result = visualTest.capture(String.format("Test__%s__%s__2", "fullpage", "firefox"));
         } catch (Exception e) {
            e.printStackTrace();
         }

         // ELEMENT SCREENSHOT
         try {
            WebElement element = driver.findElement(By.xpath("//div[@class='hero__content']"));
            ScreenshotResponse result = visualTest.capture(String.format("Test__%s__%s__2", "element", "firefox"), element);
         } catch (Exception e) {
            e.printStackTrace();
         }

         // VIEWPORT SCREENSHOT
         try {
            ScreenshotResponse result = visualTest.capture(String.format("Test__%s__%s__2", "viewport", "firefox"), true);
         } catch (Exception e) {
            e.printStackTrace();
         }
   }
}

Integration results

Once your tests run on the real devices in the BitBar Cloud, you’ll receive back console logs as usual; in addition to whatever outputs you’ve programmed in, you’ll also receive a URL link from the VisualTest SDK where users may navigate and review any visual differences found in the images during the functional UI test run.