VisualTest

Last modified on November 23, 2022

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.

Copy your API key

Click the image to enlarge it.

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

Getting started with VisualTest in BitBar

Click the image to enlarge it.

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.

Update your API

Click the image to enlarge it.

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.

VisualTest project

Click the image to enlarge it.

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

VisualTest token

Click the image to enlarge it.

Set up BitBar Capabilities

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

BitBar's Capabilities Creator

Click the image to enlarge it.

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}')

COMING SOON!

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.

Project results

Click the image to enlarge it.

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

VisualTest results

Click the image to enlarge it.

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.

See Also

Integrations

Highlight search results