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.
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.
We’ve decided on the following :
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.
Chimp allows you to choose among the following tools:
- Mocha, Jasmine or Cucumber.js
- Selenium and WebdriverIO
- Chai or Jasmine assertion libraries
We have gone with Mocha, WebdriverIO, and Chai. Here is why.
Mocha
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.
We have conducted end-to-end testing for the online event management marketplace. It was used for the following features:
- Payment system
- Event booking
- Event creation
- Event status check
- Log-in
- Dishes/menu creation
- Search
- Filters
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”
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.
Creation of fixture data in before () hook
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
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.
TechHub