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.
Click the image to enlarge it.
Then, log in to BitBar, go to My account, and click the API VisualTest tile.
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.
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.
Click the image to enlarge it.
You can then copy Your Project Token and later paste it in your script.
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.
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}')
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.
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.
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.