Visual test output

When a visual test runs in the cloud, the test output includes the following:

• Screenshots and logs: Similar to browser test output, visual tests update the test output page with screenshots and logs in real time.
• Visual changes: mabl processes each screenshot to detect visual changes. If mabl detects a visual change for a particular page in the test, the visual change appears on the test output page.

Visual test output

Screenshots and logs

Every time a visual test runs in the cloud, the mabl-generated flow "Visual Smoke Test" visits each URL and completes the following actions:

• Capture a screenshot of the page
• Collect test diagnostics:
  • Check that the page returns a 200 response
  • Capture network activity on the page
  • Capture a DOM snapshot

Visual changes

It takes two runs for mabl to identify visual changes in a visual test.

• On the first plan run, mabl establishes a visual baseline.
• On subsequent runs, mabl compares each page to its visual baseline.

The comparison to the visual baseline is a static comparison between the current run and the visual baseline. Each pixel is compared and considered a match if the exact same color is in the the exact pixel location of both screenshots. Then, differences are clustered and related to the full DOM information captured during the runs. Finally, components encompassing regions of individual pixel changes are identified and marked as visual changes.

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:

• Highlight the regions of the page that appear different
• Flag the step as a visual change in the test output
• Report a visual change insight in your workspace