Comparisons

VisualTest allows you to choose between two comparison modes:

If the site under test has frequent content updates, such as an online banking, news or shopping site, Layout mode may be more suitable.

However, for sites with stable content, such as landing pages, choose Detailed mode.

The below gives an example of a VisualTest comparison in Detailed mode. It flags content diffs in the top and bottom elements.

The below is an example of the same VisualTest comparison, but in Layout mode at 'high' sensitivity. VisualTest finds four regions to compare and flags one layout diff as failing. Only small-sized areas are considered when looking for differences.

The below is as above, but at 'medium' sensitivity. VisualTest finds three regions to compare and passes all of them, as only medium-sized areas are considered when looking for differences.

Lastly, the below is as above, but at 'low' sensitivity. VisualTest finds two regions to compare and passes them both, as only large areas are considered when looking for differences.

By default, test runs execute in Detailed mode. You can change this in Settings. Your choice determines what diffs are found in the test run and flagged for review.

Note

Switching between modes in the UI, as in the image below, only shows you what would have been flagged if you had run your test in the other mode. It does not:

• change the comparison's results

• update the choice of comparison mode in Settings

You might want to combine both Detailed and Layout modes in your test runs, across your various screen captures. For this, you can customize your SDK to over-ride the default setting on a capture-by-capture basis. See examples in the SDK customization sections: Java, Python, and Cypress.

If you find that VisualTest keeps flagging valid dynamic content as potential bugs, see our Screenshot Consistency section for tools to address this.

Use the global image search to find and review specific images, enhancing your ability to navigate through visual content with ease.

With the Share button, you can opt to share either a specific test comparison or the entire test run. This functionality enables seamless distribution of your visual testing results via easily generated shareable links, facilitating streamlined collaboration, professional presentation, and the collection of valuable feedback.

Additionally, you have the option to revoke shared links with a simple click on the Revoke Shared Link button for enhanced control over your shared content.

The Accessibility feature allows you to check your website for any visual accessibility violations that are compatible with the Web Content Accessibility Guidelines (WCAG).

Accessibility checking

Click to display accessibility violations.

Note

If there are no accessibility violations, the Accessibility button is inactive.

All accessibility violations will be marked with red boxes. When you hover the cursor over an accessibility violation, its red box becomes thicker.

Click an accessibility violation to see its details.

You can filter out the violations based on their impact. To do that, click next to and select from Minor, Moderate, Serious and Critical impact categories.

'wcag2a', 'wcag2aa', 'wcag2aaa', 'wcag21a', 'wcag21aa', 'wcag22aa', 'best-practice', 'wcag2a-obsolete', 'ACT', 'section508', 'TTv5', 'EN-301-549', 'experimental', 'wcag***', 'section508.*.*', 'TT*.*', 'EN-9.*', 'cat.*'

wcagTags: ['wcag2aa', 'wcag2a']

wcagTags: 'wcag2aa'

module.exports = {
    projectToken: 'xxxxxxxxxxxxxx',
    wcagTags: ['wcag2aa', 'wcag2a']
}

visualTest = VisualTest(self.driver, settings = {
                'projectToken': 'xxxxxxxxxxxxxx',
                'wcagTags': 'wcag2aa'
            })

visualTest = VisualTest(self.driver, settings = {
                'projectToken': 'xxxxxxxxxxxxxx',
                'wcagTags': ['wcag2aa', 'wcag2a']
            })

VisualTest visualTest = new VisualTest(driver, new HashMap<String,Object>(){{
    put("wcagTags", "wcag2aa");
    put("projectToken", "PROJECT_TOKEN")
}});

VisualTest visualTest = new VisualTest(driver, new HashMap<String,Object>(){{
    put("wcagTags", Arrays.asList("wcag2a", "wcag2aa"));
    put("projectToken", "PROJECT_TOKEN")
}});