Visual change learning

In mabl, you can use visual change learning to detect changes in the appearance of your web application. When you enable visual change learning for a plan, mabl uses machine learning to create a dynamic visual model of your application UI over many plan runs. The model ignores areas with dynamic content, such as banner ads, product listings, videos, and animations. If there is a visual change outside of the dynamic content areas, mabl generates a visual change insight.

This article explains how mabl builds a dynamic visual model and detects visual changes.

Building a dynamic visual model

To manage visual change learning for a plan, edit the plan and go to Browser device settings > Additional settings. When you toggle on visual change learning, mabl starts to build a dynamic visual model to detect changes during test runs.

To build a dynamic visual model for a browser test, the following conditions must be met:

1. The test passed 10-12 times when run in the plan: ad-hoc test runs do not contribute to the dynamic visual model.
2. The passing plan runs were in the same environment: dynamic visual models are created per environment.
3. The passing plan runs occurred within 10 days: dynamic visual models require a frequency of 10-12 passing runs within 10 days.
4. The plan was run on Chrome or Edge: dynamic visual models are created per browser.
5. The test runs are from the same test version: every time you update a browser test, its version changes and the dynamic visual model is reset.

After these criteria are met, it can take from 30 minutes to 24 hours to complete the dynamic visual model.

Default visual comparisons

While the test is still collecting data or building the dynamic visual model, mabl uses the default visual comparison. The default visual comparison uses the screenshot from the previous plan run in the same environment as the baseline.

The default visual comparison starts at the pixel level. Each pixel is compared and considered a match if the exact same color is in the exact pixel location of both screenshots. Differences are clustered and related to the full DOM information captured during the runs. If the differences between the two screenshots meet the minimum visual change threshold, which is roughly the size of a blinking cursor, mabl does the following:

• Highlights the regions of the page that appear different.
• Includes a baseline and side-by-side comparison. The baseline screenshot is from the previous plan run in that environment.
• Flag the step with a “visual change” label on the test output page.

Detecting visual changes

After the dynamic visual model is built, mabl uses it as the baseline. If a visual change is detected in the current plan run compared to the baseline, mabl does the following:

• Highlight the regions of the page that appear different
• Include a baseline and side-by-side comparison to the dynamic visual baseline
• Flag the step with a “visual change” label on the test output page
• Generate a visual change insight

The following side-by-side comparison in test output shows how mabl represents visual changes. Dynamic content is highlighted in gray diagonal lines, while visual changes are highlighted in pink:

Detecting visual changes