Visual change detection for browser tests

When a browser test runs as part of a plan, mabl checks for visual changes in the application UI. Visual change detection is useful for monitoring your app and ensuring there are no issues with the overall appearance.

📘

Chrome and Edge plan runs only

Visual change detection only works for browser tests that run on Chrome and Edge browsers and run as part of a plan.

Visual change detection is managed in the Plan Edit page in Advanced options using the visual change learning toggle.

This guide explains the two modes for visual change detection:

• Default visual comparison: when visual change learning is toggled off, mabl compares screenshots in the current plan run to the same screenshots in the previous plan run in the same environment
• Visual change learning: when visual change learning is toggled on, mabl compares screenshots in the current plan run to a dynamic visual model created over many plan runs in the same environment.

📘

Note

When you enable visual change learning, mabl uses the default visual comparison until the dynamic visual model is ready.

To learn more about how many plan runs are needed to create a dynamic visual model, see the section on building a dynamic visual model.

Default visual comparison

When visual change learning is turned off, browser tests that run in a plan compare screenshots from the current plan run to the previous plan run in the same environment. This mode of visual change detection is the default setting for plans.

If a screenshot for a step in the current plan run is not identical to the same step in a previous plan run, mabl does the following:

• Highlight the regions of the page that appear different
• Include 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

📘

Note

Mabl does not generate visual change insights if visual change learning is turned off.

Visual change learning

If you enable visual change learning on the Plan Edit page, mabl starts creating a dynamic visual model.

Dynamic visual model

Mabl uses machine learning to create a dynamic visual model of your application UI that ignores areas with dynamic content, such as banner ads, product listings, videos, and animations.

If mabl detects a visual change in the current plan run compared to the dynamic visual model, 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

👍

Configuring notifications for visual change insights

You can configure the mabl integrations for both Slack and Microsoft Teams to send notifications for visual change insights.

Building a dynamic visual model

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

• The test passed 10 times when run in the plan: ad-hoc test runs do not contribute to the dynamic visual model.
• The passing plan runs were in the same environment: dynamic visual models are created per environment.
• The plan was run on Chrome or Edge: dynamic visual models are created per browser.
• 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.

While the test is still forming the dynamic visual model, mabl uses the default visual comparison: current run to previous run.

📘

Setting a static baseline

You can configure another type of visual change detection with the Deployment Events API: set_static_baseline.

When you trigger a deployment with set_static_baseline set to true, mabl uses the screenshots from the tests run in the deployment event as the baseline for all subsequent plan runs in that environment.

If a screenshot for a step in a plan run is not identical to the same step in the static visual baseline, mabl highlights the step as a visual change and generates a visual change insight.