Transcripted Summary
Hello everyone and welcome back. In this chapter, I want to start by giving you an introduction to visual testing.
In this first example we have a form that is asking the user if they enjoyed their meal.
Upon inspection of the form we can see that the response is either a yes or a no.
However, the labels and the radio buttons do not match up together. It then becomes very difficult for the person seeing this to differentiate between the two options.
We can classify this as a visual bug because the layout creates a problem for the end user due to the misaligned elements.
Now let’s take a look at the second example.
We can see that on one device the login label [“Account Login”] is correctly positioned inside the form and on the second device the login label is pushed outside the form.
This is a visual bug that is most likely related to the responsiveness of the site and is one of the more common visual bugs that you will run into.
In Example 3 we can see that the password field is overlapping a section of the email field, this is a visual bug because the two elements are unintentionally overlapping each other.
# So why is it that these kinds of visual bugs happen?
Well this can be due to many factors, one of the primary ones being that the time required to test software has changed a lot throughout the years, and this is mainly due to how fast new software is being developed and deployed. While traditional web automation does help significantly to test software, it still cannot capture everything 100% and needs to be updated every time a new addition is made to the UI.
What you then need is a test automation tool that lets you visually validate all your apps on all the browsers and devices that your customer uses.
Applitools allows such flexibility in that you write less code, spend less time and deliver more quality. When you combine the automated AI capabilities that Applitools provide with a web testing framework such as WebdriverIO, that then allows us to get the maximum effort and potential out of our testing to help us eliminate visual bugs within our apps.
In the next video I will be showing you what you need to start integrating Applitools into your current WebdriverIO projects.
