Learning targets 🧠

In this video, you will see how to: 

• Define and describe visual testing
• Enable visual testing for your app
• Review visual testing output

Review our documentation: Visual Testing

Key Benefits of Visual Testing 🗝

• Functional testing is important, but Visual Testing is a very important complementary feature that can ensure there are no issues with the look of the application.
• Visual Testing helps identify visual changes in static sections of the app.
• mabl not only shows you the visual changes, but can also provide insights about visual changes, as well as highlighted side-by-side comparison of differences.
• Beyond complementing functional testing, many of our users leverage Visual Testing to monitor their production environment without impacting application performance.

Overview 🗻

There are two types of visual change detection for trainer-created tests in mabl:

1. Machine Learning-based change detection - mabl learns to differentiate expected visual changes from the unexpected using an established baseline, where visual change Insights are triggered. (Note: applies only to tests where Visual Change Learning is enabled in the Plan - you'll learn how to do this in this lesson).
2. Run-by-run change detection - mabl notices any and all changes between the current test run and the previous (this the default setting when Machine Learning is NOT enabled in the Plan).

Getting Started

How does Machine Learning-based visual testing work? 🧐

• Using machine learning, mabl creates a visual model of your app’s UI to help you identify visual changes in static sections of the app.
• We create a fixed baseline after ~10 test executions for a Plan. That baseline can easily be updated to adjust for intended changes (check out how to rebaseline here).
• Since mabl knows what’s dynamically changing (ads, animations, videos, alternating images for products/offerings, etc...) we alert you with notifications and include insights and highlighted comparisons of those differences.

Quick disclaimers before we get started

1. Visual changes do not impact the pass or fail of a test (however, you will be notified of any visual changes that can be reviewed under Insights)
2. To create visual tests that check for correct loading (as well as visual changes, broken links, JavaScript errors and network activity issues across browsers), you'll want to create Visual Smoke Tests, which are covered in a separate lesson in this series, but in the meantime, click here to learn more about creating Visual Smoke Tests

How to get started with Visual Testing ✍️

It's almost too easy to get started: just create any Test under a Plan and enable Visual Change Learning. That's all you have to do, then mabl takes care of the rest

Once that Test executes, machine learning automatically creates a visual model of your app’s UI (some of these screenshots will appear in the test output).

Any additions, deletions or edits of steps (including Flows) in the test will automatically be detected and mabl will adjust the visual model of the UI

It's important to note: detected visual changes will not fail a test - they are treated as warnings and displayed in test output.

mabl decides what changes are important and generates insights for those changes.

Insights are in a few places: 🏃‍♀️

On the left-hand navigation pane, you'll find the Insights bell icon.

From there you can filter by "Insight Type" to only see Visual changes and click through to the Test Output, or you can click the "Visual changes" tile at the top of the page to be taken to the Visual Explorer that will automatically apply the Visual changes filter. These will be explained in the next few pages.

Please note: a link to this Insights page is also included in an emailed Report that you can configure in the app (Reporting is covered in another lesson)

Let's take a look at the Test Output 👀

To get there from the Insights page, click the More actions ellipses (three dots) on the right side, then select View Insights Details, then Results.

When you get to the test results page, mabl will automatically filter the steps to show ones that have the corresponding visual changes.

Here you can see the Current or Baseline version, or a side-by-side comparison. The differences will be highlighted.

As shown in the accompanying image, you have the option to 

(A) see where mabl identified dynamic content areas (if available) by clicking the Highlighting dropdown and selecting Dynamic content

(B) you can choose to rebaseline the current step, or all steps, or download a screenshot for further review/distribution by clicking the Actions dropdown.

Visual Explorer 🚀

If you click the Visual changes tile at the top of the Insights page, you'll be taken to the Explorer page (which can also be accessed by clicking the Explorer icon on the left side of the app) and the Visual changes filter will be automatically applied.