Cover Image of the Story

Member-only story

Visual Testing & Tools

--

Visual testing: obstacle that every tester had so far..

It’s a common obstacle that every tester has, to check the UI manually. The tester must have a keen eye, in order to point out the tiny alignment changes of the front-end web elements. And it’s a test case that misses the test automation scope as it is impossible to do with traditional test automation aspects. In order to address this problem, visual testing came up with Image Processing!

What is Visual Testing?

Visual testing is how you ensure that your app appears to the user as you intended! It is the automated process of detecting and reviewing visual UI changes.

In today’s world, in the world of HTML, web developer create pages that appear on a mix of browsers and operating systems. Because HTML and CSS are standards, frontend developers want to feel comfortable with a ‘write once, run anywhere’ approach to their software. Which also translates to “Let QA sort out the implementation issues.” QA is still stuck checking each possible output combination for visual bugs — definition by Applitools

Hope now you have an idea what visual testing is.. right? Then..

Why do Visual Testing?

Because visual issues happen more frequently than you might expect and it’s a test case that’s missing in your test automation scope. Let’s have a look on the following issue from a sponsored Instagram ad..

visual issue (mis-aligned web elements) in an instagram sponsored advertisement

OMG..! This is in production! How did they miss it? They would probably have run test automation and all the elements and texts are there in the DOM, so the test has passed. But visually, can you let this pass?

Even if you run unit tests and integration tests each time you’re deploying, visual bugs can still make their way into production. Functional tests can’t detect changes caused by rendering subtleties or CSS changes–visual testing does. That’s why we must move on with Visual Testing.

Is visual testing for pages or components?

--

--

S Chathuranga Jayasinghe
S Chathuranga Jayasinghe

Written by S Chathuranga Jayasinghe

SDET @ Trackman | Ambassador of Cypress

No responses yet

Write a response