Most of us are familiar with common testing practices that apply to ecommerce websites.
As a QA tester or a developer, usability, functional and stress/performance testing comes to mind. Meanwhile, if you are a head of ecommerce or digital marketer for a brand, you may be concerned with the page loading speed for web users. Security is also an important aspect to consider when testing a website.
However, most online businesses may not have considered user experience testing. Manual testing may be done in some cases - sporadically and at very low volume - because of the time and effort involved. For others, they do not recognize the importance of visual testing to their online operations in general. Unfortunately for both groups, they will miss out on the benefits of automated visual UI testing - verifying the actual user experience, catching visual bugs before they impact sales, and much more.
Along with understanding the benefits, what are the important UI and UX features to test on an online store?
User actions producing the expected visual UI result
This first feature is probably the most obvious, yet easily underlooked. It is all about visually testing the visual display (the UI element acted on, the surrounding elements, the entire page, etc.) after a particular user action. The UI elements on a web page should render as expected for the user.
A common example is clicking an add-to-cart button that brings up a mini cart display. Note that user actions can be varied and do not only consist of clicking a button. They can also consist of selecting, scrolling, dragging an element, mouse hovers, or inputting text to a shipping address form.
Verifying the visual result of user actions is the foundation for testing the other important visual features below.
Web page UI renders as intended across different devices and screen sizes
Firstly, it is not necessary for an ecommerce site to have a responsive web design in order for the possibility of having it visually tested. A responsive web design is generally recommended by web developers, but there can be a number of reasons why an online business chooses not to adopt this approach.
The main point here is that regardless of the web design approach, online stores need a way to test the web page UI rendering across different devices and screen sizes, whether desktop, mobile or tablet. This is where visual testing plays a crucial role. So whether the ecommerce website uses a responsive web design, or chooses to have a dedicated mobile site, the job of visual testing is to verify that the webpage UI displays to the online user as intended by the business.
Appearance of visual elements in PLP and PDP navigation
An online store usually consists of several pages with content that are either static or dynamic in nature. A common structure of an ecommerce website is one that contains a homepage, several category pages or product listing pages (PLP), and a greater number of product detail/description pages (PDP).
Of course, there are other pages such as the Contact and About sections that could be important to test. Nevertheless, products and services are what customers are interested in when they visit an ecommerce website (usually). PLP and PDP pages are where we are likely to see more visual changes. It could be expected campaign-related changes, or unexpected changes in the form of a visual error. Hence the UI navigation of product details and prices, are essential to test on a regular basis.
Is the price clearly visible to the online user through the web page UI? Is it correct? Is there an overlap of UI elements affecting the user’s view of the product information? Is there missing information or some unexpected UI element that deters the customer from proceeding further? Valido’s automated visual validation helps detect these types of problems.
Checkout and payment flow
Equally as important as verifying the navigation of an ecommerce store is visually testing the checkout and payment flow. Going back to what we mentioned earlier, it is vital to not only test the functionality of ecommerce flows, but also the visual user experience.
To explain the importance of testing the visual experience of a checkout flow, we look at two examples of visual errors:
- Incorrect shipping charges displayed: If for some reason the shipping charges are miscalculated for certain orders, normal QA functional testing and service monitoring tools may not be able to detect the problem immediately, as the user is likely to just abandon the purchase. Without visual UI testing, the issue can only be detected once a drop in sales is observed or a customer reports the issue.
- The order total is rendered incorrectly in the UI: A visual error of the order total, such as the wrong currency symbol or a strikethrough text, may similarly deter the user from making the purchase, even if the checkout passes functional tests and the correct total is charged to the customer. With visual testing, this error can be detected quickly and before it impacts the customer experience.
Conclusion
This is by no means an exhaustive list of features to test. There are an endless number of scenarios and ecommerce flows that are possible to perform visual testing on. Some brands with a multinational presence may be considering how to test their ecommerce across multiple countries.
Valido, with its visual testing platform, helps ecommerce stores to comprehensively validate their web UI in real-time and at scale. By knowing the essential UI features to test, online retailers can realize the benefits of visual UI validation and extract its full potential for the business.
