End-to-end testing is an advanced methodology that helps to control the process of development and deliver a qualitative product.

In this article, we want to share our experience with end-to-end testing for the online marketplace. You will learn about the tools we`ve used, the process of testing, and practical examples.

What is end-to-end testing

End-to-end testing is a type of software testing that automatically checks the entire flow of application from the user`s side. E2E testing identifies the performance of all system dependencies and components as well as its interaction with external systems in a real-life scenario.

Source: Guru99

To skip the theory you can find on the Internet, we want to provide you with the real-life example that proves a power of E2E testing.

We've used the external payment system in one of the online marketplaces. During E2E testing, the system has identified changes in the payments system APIs. The case was that the system started to require validation of data, that wasn't compulsory before. Such testing helped us to detect bugs, caused by the сhange in external services and significantly save developers` time.

Here are other reasons for why we used end-to-end testing for the mobile marketplace app:

It verifies end-to-end process flow

Helps to prevent bugs in early stages of development

Reduces risks

Checks the system performance after any changes in code

Increases confidence in clean software product

Simplifies developer`s life :)

Now let's get straight to our approach to E2E testing, its process, and practical examples.

Tools for end-to-end testing. What tools we have used and why

The first step we made was to choose the advanced and convenient tools for end-to end-testing. The main goal was to pick the tools that work with any technologies and are easy to set up.

Chimp is a JavaScript-based tool for automated tests writing. It automatically sets up the necessary technologies, saves time and allows developers to focus on quality. Its other main benefits include:

Meteor support

As the project we worked on was built with Meteor, we were looking for a tool that supports this technology and also offers Meteor-specific features. When Chimp is used with Meteor, it allows to run code within the client or server and test deep within the Meteor context.

A unique watch mode

The watch mode keeps you focused on one task at hand and reruns only the spec you tag. You work on a scenario through to completion, and then move the @watch tag to the next spec you are working on. It comes handy when conducting a great number of tests and having a need to check a certain test one more time without waiting for completion of others.

Synchronous style

With Chimp, you don't have to deal with promise chains or callback hell, as you can write tests in a synchronous style.

Full Continuous Integration support

We have used Circle CI - continuous integration and delivery platform.

Mocha is an open-source test framework that runs on Node.js and in the browser. It provides a lot of plugins, extensions, and libraries. It is enriched with different features, which makes testing simple, flexible, and fun.

WebdriverIO

Webdriver is a feature-rich open source testing utility for Node.js. It lets you write asynchronous commands, manages the Selenium session, and provides a variety of hooks (e.g. possibility to stop the test process to take screenshots or modify the test procedure). With Webdriver you can write easy Selenium tests in a testing framework that suits you best.

Chai

Chai is a BDD/TDD assertion library you can use with any JavaScript testing framework. It provides a set of custom plugins and several interfaces, that allow developers to choose the most comfortable ones.

In this article, we will show a step-by-step process of end-to-end testing for event booking feature.

Before starting E2E testing, we need to choose the user functions and conditions.

User functions

Check the event

Navigate to the event page

Click the button “book this meal”

Choose the number of guests

Accepts the terms and conditions

Confirm the booking

Choose the payment option

Enter the address

Confirm the payment

Redirect to the payment service

Fill in the data for payment

Click the button “make a payment”

Conditions based on user functions

Each user function implies different use cases. For example, let's take the function “Filling in the data for payment”. It may contain the following cases:

Successful redirect to the payment page

Error message (invalid username or address)

End to end testing process

Now we will describe the process of automated testing for the steps, mentioned above. We run the tests every time the new code gets pushed to the project to ensure the smooth flow of the application and prevent any bugs.

Check the event and navigate to the event page

Before navigating to the event page, a user has to create an event first. However, the spec for event creation in testing takes a lot of time. That's why we have created a test event (fixtures) via DDP method.

Fixtures.createEvent is a simple Meteor method that looks like this:

This method is defined in the file event. app-test.js, so it will be available only after we install Meteor in full app mode.

The first argument for before () hook is the callback, which is called before the first “it”.

Before () hook contains

Navigation to the main page of application, where we can implement DDP method

Creation of the test user and event

Test user log-in

Navigation to the event page

Now we have all the necessary data for automated testing.

Click the “book this meal” button

At this stage, we test the performance of the application after clicking on the “book this meal” button.

Now we check the existence of the button “book this meal” with the help of the element waitForExist

Then we click the button and check whether it will redirect us to the event booking page.

We use the custom helper click for this purpose.

Choose the number of guests

Now we test the drop-down field with the number of guests. Total price should be changed when we change the number of guests.

Agree to the terms and conditions

Now we test if the error message will appear when a user doesn`t agree with the terms and conditions.

Click the button “book a meal”

Then we test the performance of the app after clicking on button “book a meal”. After clicking on the button, a user has to be redirected to the event details page.

Choose the payment method

Fill-in the address and confirm the payment. After this, a user has to be redirected to the payment service page.

Filling-in the credit card data, click the button “confirm a payment” and return to the result (success/error)

Result display

Here we test the payment status. First, we see the loading icon, after which the status of the payment (success or error) should appear.

Now let`s see the whole process of end-to-end testing for the event booking feature.

Wrapping up

End-to-end testing for the online marketplace has helped us to ensure the clean performance of the application across different environments. It has improved app`s workflow and productivity, automated repetitive tasks, and, as the result, reduced the development time and costs.