VisualTest

VisualTest is a testing platform that ensures that your applications under test look and feel good.

We provide an SDK-based product that integrates with your existing functional UI test scripts to automate design QA, catching visual bugs in every test run, commit, and build.

VisualTest can capture full-screen, viewport, and component-level screenshots. It then detects and notifies your team of any visual changes that have occurred, to ensure that only intentional changes to the UI are pushed out to production.

Getting started

You have the possibility to use VisualTest while working with BitBar. To do that, go to the VisualTest app and log in to your VisualTest account with single sign-on or SmartBear ID.

In the VisualTest app, go to Profile 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

In the appearing window, paste the copied API key in the Update VisualTest API key dialog and Update it. Your updated key will show in the Stored VisualTest API key dialog with some last figures visible and the sliding button set to Yes.

Create Project

Once you have updated your API key, you can continue to create your project in VisualTest. To do so, go to Projects, click Create Project, name your project, and again click Create.

You can then copy Your Project Token and later paste it in your script.

Set up BitBar Capabilities

In BitBar’s Automation Capabilities Creator, select your desired capabilities to connect to your desired browser configuration.

Note

Make sure you integrated VisualTest into your UI test. For more information, see the VisualTest documentation.

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 BitBar Project Token in the file:

import unittest
import time
from selenium import webdriver
from sbvt import VisualTest

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': 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 BitBar Project Token into the file:import com.smartbear.visualtest.models.ScreenshotResponse;
import com.smartbear.visualtest.VisualTest;
import org.openqa.selenium.By
import org.openqa.selenium.Element
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxOptions;

import java.io.IOException;

public class Main {
   public static final String PROJECT_TOKEN = "<INSERT_VISUAL_TEST_PROJECT_TOKEN>";
   public static final String TESTRUN_NAME = "<INSERT_TEST_RUN_NAME>";
   public static final String BB_API_KEY = "<INSERT_BITBAR_API_KEY>";
   public static void main(String[] args) throws IOException {
      URL hubURL = new URL("https://us-west-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", "104");
      capabilities.setCapability("resolution", "2560x1920");
      // Setting the api key
      capabilities.setCapability("bitbar_apiKey", BB_API_KEY);
      driver = new RemoteWebDriver(hubURL, capabilities);

      driver.get("https://www.smartbear.com");

      VisualTest visualTest = new VisualTest(driver, PROJECT_TOKEN, TESTRUN_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();
         }
   }
}

Now, start your test run. For more information on VisualTest’s integration with BitBar, go here.

Results

When your test run is over, go to BitBar’s Projects, find your project, and click Go to results.

In the Device Session Browser, you can see the results of the VisualTest test run in the Artifacts section under the VisualTest tab.

By clicking an image or a link under the image, you will be redirected to the Comparisons screen in VisualTest. Here you can check differences and work with your project. For more information, see Using VisualTest.