Automatic verification of e-commerce experiences

By Francisco Moreno Sanz

The main goal of any e-commerce business is to sell products to users. It may sound obvious but it’s not always easy. This is especially true when we’re talking about large brands whose websites have to be able to respond to situations like high-traffic volumes, user peaks, multi-region sales by countries, support for multiple devices, constant changes in the product catalog, price updates, offers, changes in image galleries, etc. These examples offer a glimpse into how complex maintenance and operations can be.

At the SNGULAR QA Team, we implement the best technological solutions to providing the seamless, relevant user experience. We help our clients avoid errors that can harm their e-commerce business.

The challenge

In scenarios where you have complex websites and processes, the chances of introducing errors increase considerably. These errors can lead to lost sales and reputational damage. That’s why having both preventive measures and an alert system in place that provides fast and reliable information on the status of the system is necessary.

Here, we would develop a set of automatic tests that verify the correct operation of e-commerce and the real shopping experience on multiple devices.

The solution

When production errors that put business goals at risk are detected as soon as possible, the necessary measures can be taken before it's too late. A range of automatic tests has been developed to simulate the actions of real users and validate that the buying experience is working correctly.

At the same time, using visual testing techniques, you can verify more than just the sale element. They can also verify that the layout of the web is corret. This point is really important in e-commerce where the brand image is key and where strict compliance with the established designs is prioritized.

To facilitate validations with different browsers and real devices, we rely on the BrowserStack cloud solution. This system allows the execution of tests on multiple real mobile devices and combinations of web browsers and operating systems. This allows us to greatly increase the coverage of the tests, helps us detect uncommon issues and adapt to the experience of the end users.

Another advantage of this tool is the quality and detail of the reports. Thanks to the video recording of executions, evidence capture and log generation, the work of correcting errors is made a lot easier.

By implementing a process of daily automatic tests, we’ve been able to reduce the impact of errors. This has also brought about an optimization of the manual testing process, which had been a bottleneck in the delivery process. With this approach, we’ve increased the speed and reliability of deployments and improved the quality of manual testing since it is no longer used in routine repetitive verifications but instead to test special scenarios.

Development with the client

Collaboration with this client began with a technical team that had been developing functionalities on its main website. This SNGULAR team, led by Raúl Gundín, gained the trust of the people in charge. Raúl saw the instability of the main website, and advised them about the need to have people specifically focused on testing.

As a result, we presented the SNGULAR QA Team’s DKCs (Digital Key Capabilities) and told them how we could solve some of their problems. At this meeting, a small proof of concept was developed as a demo, showing our approach to the website and real production applications.

This was what finally convinced the client.

Our QA team continues to work very closely with the client in an agile way. There is a framework of trust and constant collaboration through internal chats, daily meetings, retrospectives, etc.

Test automation

Test automation is a complex process that requires constant maintenance. That’s because the tests start to fail after any change on the web. Therefore, it’s especially important to apply design patterns and testing techniques that make the test suite reliable, robust, and maintainable.

"Early error detection wards off reputational damage and business goals from being compromised.”

Francisco Moreno

We relied on the BrowserStack tool to provide a device cloud upon which to execute tests. Its main advantages are in the generation of automatic reports and its use of real mobile devices.

The goal of these tests is to ensure that the web is behaving correctly in production at both a functional and visual level. That’s why it’s important to use automation tools that replicate, in the most reliable way possible, the interactions that a real user would make on the e-commerce site.

With this in mind, we opted to use WebdriverIO as a base tool to direct the web navigations. In the context of this project, it was important to maintain a certain technological homogeneity and not introduce new programming languages ​​or platforms. WebdriverIO is a great option if you want to stay within Javascript technologies. At the same time, it’s an established tool that has several plugins that automatically generate reports and allow integrations with Cucumber, BrowserStack and VisualTesting tools.

Once the appropriate library was selected to direct the navigations, given the characteristics of the users it was important to be able to carry out the validations on different browsers, operating systems and mobile devices so that we could cover the widest range of possible interactions. For this, opting for cloud providers that offer these services was the most efficient in terms of effort and infrastructure cost. Browserstack is one of the most established options on the market. This platform allows both manual and automatic testing on a wide range of browsers and real mobile devices. It also has a reporting system and generates videos of the executions, which greatly facilitates the task of debugging.

Now, the tests are launched automatically, every morning through a jenkins pipeline that is also responsible for sending a summary report with the test results.

Team Collaboration

Collaboration between the QA and Cloud teams was especially important in this project since it was necessary to develop a Jenkins pipeline that runs the tests automatically every morning, and sends a report with the results to the customers and people involved.

We worked with the client and remotely from Cáceres, Madrid and Oviedo. But the distance was never a problem since the team usually works remotely while always remaining attentive to the client and vice versa.

We are not only happy with the development of this project, but also that the team has learned. We are now on our way to exporting this approach to automatically validate the operations of both Android and iOS mobile apps.

Photo by Kit Suman on Unsplash