Visual Testing

Now, I'll have to introduce the visual testing. So visual testing is more or less the same as functional and non-functional testing, but with a bit of different term to it.

So you might actually see this as nonjudgmental testing, whereas there is essentially visual testing of measuring visual discrepancies brought to your attention that may or may not be true. Defects at play that may or may not be a scenario.

Again, what we call non-judgmental testing where the user, the tester themselves will make that decision if it is truly a defect, if it's truly an issue that is arising, or if it's something that is passable or okay to have and move forward and then never-ending checklist that is testing with prod engineers.

So as Applitools likes to put it, automated process, it's an automated process of comparing the visual output of an application or website, I guess a baseline image. So you build an app or website with the UI that UI has a visual output across a wide range of different devices and versions of that application or site. So visual testing takes one of the visual outputs as a baseline and then compares that baseline to other visual outputs across the devices, screen sizes, releases, etc. So here we can actually see where artificial intelligence and machine learning can really come into play in the realms of testing.

As machine learning algorithms use that baseline to learn off of and to also bring any discrepancies to the forefront for you. So once again, you have that visual baseline and any visual output thereafter will be compared against that baseline and any differences picked up will be brought to your attention in a more non-judgmental way for the user to decide if that is a true defect or if that is possible. And okay. And there are discrepancies. Again, visual test will identify these. That is visual testing. So visual testing. Why use it? There are a few reasons why visual testing is useful.

So one is the coverage. It can catch certain purely visible issues that traditional functional tests typically would not. So that coverage where you might have your one device that you're testing, but you want to be able to scale that across multiple devices. It'd be pretty lengthy and time-consuming to actually visually test that one by one.

So here you can make use of tools and artificial intelligence that Kobiton offers where once again, you can catch those visual differences in a far faster time. That functional test typically would not catch and coverage continued. Visual tests can catch functional issues that render visually. So say if you have the code and place of rendering your UI and that code actually is rendering the visual UI in a different way than expected, you will be able to catch this via visual testing. Also maintenance of costs.

So visual tests are typically less maintenance heavy as their ability to run isn't wholly dependent on technical identifiers being in the same place. Visual tests are not dependent, such as functional tests, where you are programmatically coding out, say the technical identifier, the button, the object that you're looking to interact with to press. There is no in-depth coding in that way when it comes to automation. For visual testing, it has the ability to run codeless, essentially not dependent on any code, only dependent on the user themselves to say once again, Yes, that's a defect or No, that is possible and that is fine.

So once again, we want to go through functional testing visual testing. So as I was just describing a moment ago, traditional automated functional tests where you have elements with locators that are then needed to be further pressed or clicked. Whereas for an automated visual test there you can see visually the large green button that in place. And for the next application version, maybe that button has removed itself, or maybe the code itself has rendered it white on white and is not visible.

You can see it visually. The automated visual test to be able to detect that and pick that up different from, say, if you were to code that out from an automated perspective, you would still have the technical identifier associated with the button that is now white on white. So it does pass, but as a false pass.

So once again, automated visual testing can really help catch when your code is rendering in a different way or rendering across different screen resolutions and browsers. Again, an automated visual test can allow you to catch those discrepancies without being dependent on code.