Visual Testing
- Shuvam Aich
- May 23, 2022
- 3 min read
Visual testing evaluates the visible output of an application and compares that output against the results expected by design. In other words, it helps catch “visual bugs” in the appearance of a page or screen, which are distinct from strictly functional bugs. Visual tests generate, analyze, and compare browser snapshots to detect if any pixels have changed. These pixel differences are called visual diffs (sometimes called perceptual diffs, pdiffs, CSS diffs, UI diffs).
For visual testing, QAs need –
A test runner to write and run tests
A browser automation framework to replicate user actions
The following are some of the free tools that can be used for Visual Testing:
Cypress.io
Cypress gives a stable platform for writing plugins that can perform visual testing.
Typically, such plugins take an image snapshot of the entire application under test or a specific element, and then compare the image to a previously approved baseline image. If the images are the same (within a set pixel tolerance), it is determined that the web application looks the same to the user. If there are differences, then there has been some change to the DOM layout, fonts, colors or other visual properties that needs to be investigated.
This open-source plugin compares the baseline and the current images side by side within the Cypress Test Runner if pixel difference is above the threshold; notice how the baseline image (Expected result) has the label text with the line through, while the new image (Actual result) does not have it.
The following are some of the Plugins that Cypress supports for visual testing:
You can refer to Cypress.io: Visual testing with plugins and Percy.io - YouTube which is a tutorial on cypress-plugin-snapshots and Percy.io
Imagium
Imagium provides AI based visual testing solution for various forms of testing. It makes the job easier for QA Automation, Mobile Testers, DevOps and Compliance teams. It can be integrated with any automation tool (Selenium, Appium, Playwright, Cypress etc.) and any programing language (Java, C#, Python, JavaScript, Groovy etc.)
Imagium is a tool in the Testing Frameworks category of a tech stack.
To see how Imagium works, watch Imagium in action | AI Powered Visual Testing | Free - YouTube
To see a short tutorial on Imagium, watch FREE Automated Visual testing tool - Imagium - YouTube
Ui.Vision Kantu Extension for Web Browsers
UI.Vision RPA combines Visual UI Testing, Data-Driven Testing and Selenium IDE in one browser extension. The visual UI testing commands VisualAssert, VisualVerify, VisualSearch and XClick/XMove allow you to write automated visual tests with UI.Vision RPA - so UI.Vision RPA has its own pair of "👁👁 eyes" now. 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. The image comparison algorithms that we use are error-tolerant, and can ignore resolution, size and position differences.
The visual test commands take a screenshot of the page and search it against the provided image. If the algorithms find the image inside the screenshot, then visualAssert succeeds, otherwise it fails. You can supply a confidence value behind the @ symbol. Its value ranges from 1 (exact match) to 0.1 (almost everything matches). The visual test commands wait !timeout_wait seconds for the image to appear. If the image is not found, an error is triggered (you can overwrite this with !errorignore).
The difference between visualAssert, visualVerify, visualSearch, XClick and XMove is what happens if no image if found:
👁 visualAssert - Macro stops with error if no matching image if found.
👁 visualVerify - Macro logs warning if no image is found, but macro execution continues.
👁 visualSearch - The number of matches is filled into a variable, just like the sourceSearch command does. If no image if found, the number of matches is 0.
👁 XClick/XMove - XClick and XMove commands combine a visualAssert image search with a real-user mouse click. The mouse event hits the center of the found image, but it can also be sent to a position relative to it.
Comments