With its latest release Kantu learned to see. This can be useful for many things, but the one that this blog post is about is Visual UI testing.

This video explains it:

If you are watching this in the office with no sound, make sure to turn on the captions.

The visual UI testing commands allows you to write automated visual tests with Kantu - this makes Kantu the first and only Chrome and Firefox extension (and Selenium IDE) that has “👁👁 eyes”. A huge benefit of doing visual tests is that you are not just checking one element or two elements at a time, you’re checking a whole section or page in one visual assertion.

Visual UI testing, sometimes also called visual validation testing or visual regression testing, is a quality assurance activity that is meant to verify that UI appears correctly to users. By contrast, the classically Selenium IDE and other tools are used for functional testing tools only.

With VisualAssert and its sibling commands you can make sure that important UI components appear in the right color, shape, position, and size, no broken images, and ensure that a component doesn’t hide or overlap any other UI elements.

UI testing is especially helpful with responsive content at different viewport sizes to ensure changes made at one screen size won’t break a layout on another screen size. And guess what - we added a Resize command as well ;-) As the name suggests, use it to resize Firefox and Chrome to emulate various screen resolutions.

How does the image recognition work?

The image search and image recognition/comparison logic runs locally in your web browser, nothing is uploaded or done in the cloud. Technically we use C++ compiled as WebAssembly (abbreviated Wasm). Wasm is a binary instruction format for a stack-based virtual machine that is inside your Chrome and Firefox browser.

What is the difference between functional and visual testing?

The goal of functional testing is to cover all workflows of the system by automatically completing these tasks.

The goal of visual testing is to catch unintended visual bugs. This activity verifies that the UI appears correctly from the user’s perspective. There is no way to know that a visual component that has been updated breaks by only running a functional automated test. Your Selenium test will never be able to tell of the background image is missing, or if the button is shifted a few pixels to the left since the latest Chrome update. Kantu and its VisualAssert and VisualVerify commands can tell you exactly this.