Get Started

To access VisualTest, you can obtain login credentials through these options:

Create an Account

If you are new to VisualTest, you will need a SmartBear ID account. For information on creating one, refer to Creating a SmartBear ID account.

Note

If you already have a SmartBear ID account, you can log in using your existing credentials to access VisualTest.

Log In

To log in to VisualTest:

  1. Open the following link: https://app.visualtest.io and then click Log In.

    VisualTest_screenshot_log_in.png
  2. Log in with your SmartBear ID.

    VisualTest_screenshot_welcome_back.png
  3. Once you successfully log in, you will see the VisualTest application displayed on your screen.

    VisualTest_screenshot_projects.png

    Note

    After logging in to VisualTest for the first time, the Onboarding Wizard will guide you through setup, ensuring a smooth start to using our platform.

    VisualTest_screenshot_onboarding_wizard.png

Configure VisualTest

To configure VisualTest, you need to:

  1. Generate a project-specific token.

  2. Integrate VisualTest into your automated UI tests.

  3. Run VisualTest.

  4. Review differences found.

Generate Project Token

  1. At launch, VisualTest shows the Projects screen. Click on Create Project and name your Project, as shown below:

    VT_Screenshot_GenerateProjectToken_01.png
  2. Choose the Project Type depending on whether you want to take manual screenshots or create automated scripts.

    A screenshot of VisualTest project types with the Manual Screenshots selected.
  3. Choose the Comparison Engine: AI Model or DOM Model.

    A screenshot of VisualTest Comparison Engine selection.
  4. Optionally, choose which comparison modedetailed or layout – you want for your project. This can be changed later in Settings. For more information on comparison modes, see the Comparisons section.

  5. Click Create. VisualTest generates your project and a project-specific token.

  6. Copy your project token, as in the following image. You need this to integrate VisualTest into your functional test scripts.

    A screenshot of the VisualTest project token.

    The following video shows these steps:

If ever you need to find your project token later, it is available from project settings:

Project Settings

Integrate VisualTest into Your UI Tests

To integrate VisualTest into your UI tests:

  1. Install one of the Software Development Kits (SDKs) to add screenshot capture commands where you'd like to add visual coverage.

    The following video gives an example of inserting the project token into your script.

  2. Choose from one of the following capture formats:

    • Fullpage – captures the whole page

    • Viewport – captures the visible portion of the page

    • Element – captures a specific visual element

Run Your Tests

VisualTest is designed to run using your existing functional UI test flows and framework. Simply run your VisualTest integrated test scripts using your test framework’s command of choice, either locally or via any CI/CD systems.

The following video shows an example of running a test.

Regardless of how you run your tests, VisualTest creates a new tile to show any found image differences for your review:

getting-started-tile.png

Review Any Visual Differences

Review found differences in the VisualTest platform. Click on your project to open the Test Run screen:

Test Runs screen

Your team can find all your test runs in any given Project, listed chronologically by default, as in the orange box above.

Each test run presents at a high level all the images that need review, and each review status is timestamped. Any team members who have access to the VisualTest platform can approve or reject any of the visual differences found.

A screenshot of the difference approval screen.

See Also

Publication date: