One of our goals at Valido is to help clients to raise the quality of their ecommerce site.
By detecting anomalies in the user experience, we can help with quick resolution of issues that may occur and in that way increase the ecommerce’s ROI (return on investment). The way Valido detects these anomalies is through the tests that can be created in the app. We can split the types of tests into two:
- Visual-only tests
- Functional tests
The visual-only tests are simple to create and configure, since they only require a URL. When the test is executed by Valido, it simply loads the URL and validates the resulting page. The functional tests, however, allow us to test user interactions with the web page. This clearly brings a whole lot of complexity to the table as we must instruct Valido how to interact with the page.
Our team has been working on this challenge for the last few weeks and we are pleased to introduce the brand new Test Creation Wizard!
The purpose of the new Test Creation Wizard is simple: to make it easy to create and configure tests for Valido.
The wizard takes you through a series of steps that guide you through the test creation process.
In this post, we are going to create a test for an imaginary ecommerce site called Wizardry, which specializes in items related to the art of magic. Let’s have a look at the steps involved!
1. Select a template
Valido offers a set of templates for the most important user stories for a given ecommerce site to choose from. More templates will be added in the future, but for now the following are available:
- Single Page
- Navigation
- Registration
- Checkout
Let's create a test for Wizardry’s checkout process. To do so, we select the Checkout template and click next.
2. Add properties and countries
In this next step, we need to define certain test properties like the device, test name, execution frequency, and the regions where we want to run the test. In this example, we will be adding just a single region, USA.
The final thing we need to define on this step is the starting URL for the test. We want to buy a magic wand, so we provide a URL that takes us to the product page for the magic wand.
3. Content
In this step, we define the actions that Valido needs to perform in order to complete the checkout process.
The Checkout template provides us with three behaviors that we must implement:
- Add to Cart
- Go to Cart
- Do Checkout
Note: If you have also selected mobile as a device to test, you would also need to define the specific actions for mobile, i.e. a separate step will appear for Content Mobile
Let’s have a look at how to implement the Add to Cart behavior. We must understand what actions we need to take to add the magic wand product to our shopping cart. On Wizardry’s site, it only requires clicking the Add to Cart button. So we will have to find the xpath that uniquely identifies the Add to Cart button on the product page. With that xpath we can define the UI element in Valido and create the first action to click that element.
We follow a similar process for the other two behaviors to finish the configuration of the test.
4. Summary
The last step of the wizard provides us with a summary of the specific ecommerce flow test that we have configured. If everything looks correct, we can finalize the process and confirm the test creation by clicking Finish.
Once a test has been created, all we have to do is wait for Valido to execute it according to the frequency that was set in the first step. If any visual changes or errors are detected, Valido will immediately report them on the dashboard and through web push notifications (click here to find out how to enable notifications).
So there you have it - our review of the new test creation wizard features. Valido's aim is to make visual UI testing much more accessible to the wider audience - not just for developers and QA specialists, but also for the commercial teams, digital marketers and business leaders. So stay tuned as we bring you more updates on how Valido can help improve the sales and user experience of your ecommerce.
