Nowadays we cover all the functional tests in automation using Selenium and Appium tools. But the question here is, are we doing the Automated GUI Testing right? We would definitely check whether a button is clicked or not. But we might fail to check whether CSS has been applied as excepted and if the button is displayed to the end-user as per the design.
Let’s say an e-commerce website has an ‘Add to Cart’ button that is blue in color and the font is white in color. But what if the font color is also made blue by mistake? The result would be a button that seems to be empty despite having the text. The more serious underlying issue here is that the end-user will have difficulty in making a purchase as they will not be able to find the ‘Add to Cart’ button. In this case, the automation test script will pass even though the issue is a huge business concern that will lead to financial loss.
Another example is having a button that is too small and inconvenient for touch action on mobile devices. These type of issues can’t be spotted until it is tested manually. So, in this blog article, we will be taking a look at how to get automated GUI testing right.
Layout Testing
The above-discussed roadblocks and topics of concern can be overcome if we had the option to check the layout of the GUI elements.
Galen Framework is a great option that will fulfill this need of ours as it enables us to check both the size and alignment of GUI elements on multiple browsers and devices. .spec is the file format of the Galen script and you can write the scripts using the Galen spec language. Specs files can be triggered for execution from JavaScript and Java as well.
Galen is an open-source project. It even lets us perform Selenium actions in order to perform some functionalities on GUI and view certain page components. Parameterization is a critical feature for any test automation framework, and Galen supports parameterization in data tables. We will be able to tag the data table inside the spec file.
Grouping the tests and running a group test using its tag is a must-have feature. We know for a fact that we will not run all the tests in one go every time. Moreover, if you don’t group the tests, the test output (HTML Report) will list all the executed tests in one group instead of showing a segregated output. So it becomes a cumbersome task for an automation tester to analyze the report. Galen also supports mutation testing.
As an automation software testing company, we have used Galen in many of our automation testing projects and detected many responsive and GUI-related issues that would have been overlooked without Galen.
Visual Testing
Visual testing is another viable option we can opt for to detect many UI issues. But what is visual testing? Storing the baseline screenshots of web pages, and capturing the actual images again to compare them with the baseline images is called Visual Testing. As stated earlier, when a Selenium script is used to click a button, the script does not confirm whether the button is displayed as per the design. However, if you compare the web page screenshots, you will unearth many UI issues and have enough time to solve them.
Menu Touring
Menu touring is a type of visual testing and it is exactly what the name suggests it to be. We will write scripts to navigate all the pages from the main menu and all the other available links as well. Once the page is loaded, we can take a screenshot and compare the screenshot with the baseline image. As one of the leading software test automation companies, we set up a menu touring automated test suites as visual smoke tests for our clients. So with the feedback from both the Automated Function Regression testing and Visual regression testing, your team will be able to deploy the application confidently.
Tools for Visual Testing
It is very much possible to create Visual regression test suites without the aid or usage of any visual testing tool. All you would need to know is how to navigate to different web pages/mobile screens and compare the screenshots. However, there are some tools available in the market which are specifically developed for the purpose of visual testing alone and they can come in handy.
Applitools
One can say that Applitools is a quite sophisticated visual testing tool as it supports over 50+ frameworks and languages. Using it you will be able to write tests for web, mobile, desktop, IoT, AR, and even VR apps.
Percy
Once you have written the tests using the above tool, the other aspect is comparing the screenshots and that is where Percy comes into the picture. It can be used to compare the screenshot against the baseline image. You can even run the tests with different responsive widths and even across different browsers.
Functional testing alone is not sufficient. Visual testing is a must to identity GUI issues that could go overlooked during functional testing. So pick the right visual testing tool which fits well with your existing CI/CD pipeline. If a tool is a good fit for your requirement, go ahead and use it instead of reinventing the wheel. Implementing and managing custom frameworks for visual testing is an overhead that should be avoided. As a tester, you must focus on being able to provide quick and accurate feedback at regular intervals. So leave the visual testing to the tool as your job is to create the scripts.
Conclusion
Automated GUI testing is instrumental in deploying your website/apps with the utmost confidence. GUI issues have the potential to bring down your business’ reputation at first sight even before your product has a chance to win the customer over with its functionality. So make sure to catch the GUI issues before they are reported by end-users.
Comments(0)