Visual Testing with Cypress

S Chathuranga Jayasinghe
4 min readDec 31, 2019

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 has to have a keen eye, in order to point out the tiny alignment changes at the front-end elements. And it’s a test case that misses the test automation scope as it is impossible to do with regular 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!

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..

--

--