E2E Setup for Internal Tooling

The client combines multiple savings portals in over 20 countries, most of them in Europe. There is a need for more vouchers/deals to be created on a daily basis because the main income comes from the vouchers and deals. Even though there are many different clients and each of them has a different frontend design, the background for all of them is basically the same. 

For this matter, we developed our own product where we create and modify the vouchers. This management tool is developed in Angular, taking advantage of the framework’s ability to organize the code in different modules. This is essential because different teams can easily maintain the application, even though its purpose is to serve the company’s internal users – the editors. Users can manipulate multiple pages which on the other hand can be complex containing a significant number of controls.

What is Automated testing and what is E2E testing?

Automated testing is a software testing technique where data entered is to be checked, then tested, the expected and actual results are compared and finally, a detailed report is generated. Testers use appropriate automation tools to develop test scripts and validate software. The goal is to complete the test in a time period that should be as short as possible. Automated testing relies entirely on a pre-scripted test that works automatically to compare the actual result with the expected results. This helps the tester to verify that the application is working as expected. Automatic testing is used to test repetitive tasks, tasks that are more difficult to check manually, or tasks that take more time.

E2E testing (also known as UI testing) is software testing that validates software along with its integration with external interfaces. The purpose of E2E testing is to achieve a complete scenario from start to finish as the actual flow of the application would look like. E2E testing uses real-time data from the production base as well as a test environment to simulate real-time settings.

Challenge

Even though the project architecture may look simple, and creating/editing vouchers seems pretty straightforward when you already have the panel, the project itself is pretty complex and huge. The significant number of clients with different requirements makes the possibility of a lot of case combinations. In order to successfully create vouchers that will be valid for the consumer, one needs to make a lot of checks. For this matter, our dashboard has a lot of modules that are either independent or related to each other so it leaves room for some complicated user journeys. 

For a user to create any kind of content in the dashboard a lot of fields need to be checked and validated. In order to cover as many cases as possible and to encounter problems fast without clicking through screens, we started implementing automation tests. With E2E testing, you can go through the GUI as a user does. 

We tried to cover as many cases as possible, giving priority to the tests that were most important for our business and the repetitive cases that can prolong the manual QA process. There are some crucial things without which the platform can’t work so we make sure to detect errors as early as possible. We have a daily execution where we check for small bugs that might happen during the previous day. Then, before every deployment, we are executing the tests so we know it’s safe to deploy on production.

Solution

For testing our application we are using the Protractor framework. It can integrate several technologies such as NodeJS, Jasmine, Selenium, and others. Protractor is an E2E testing framework specially designed to perform automation testing on Angular-based web applications like this project. It simulates a user interacting with the website by filling out forms, clicking on elements, page navigation, and other functionalities. Because the application is developed on top of Node, Protractor benefits from the huge number of available npm packages. Node is required in order to perform a test with Protractor. To download the Protractor package, npm is used, which comes as part of Node.js. 

Jasmine is the default test framework when Protractor is installed. Protractor allows tests to be organized based on Jasmine (framework for testing JavaScript code) and it runs on real browsers and headless browsers. The decision was made to go with Protractor because it has all the features, and methods that are available in Selenium 2.0, with additional commands, locator strategies, and functions that are specific to Angular, thus making it very easy to automate Angular applications.

The Protractor install includes the following:

• protractor command-line tool
• web driver-manager helper tool used to easily get instances from Selenium Server.
• Protractor API (library)

Two files are required to perform the Protractor tests:

• spec file – containing the logic and locators to interact with the application;
• configuration file – helping the protractor to locate the test files (specs.js) and to talk with the Selenium server (Selenium Address) and specifying the default browser for Protractor (in our case Chrome).

A test scenario or test case is any situation or functionality that can be tested. As QA developers, we have to think from an end-user perspective and look at possible scenarios that would occur in production. The number of test scenarios depends on the importance of the module being tested.

Result

The more we expand test coverage, the more we reduce the chances of failure and risks in the future.

E2E testing reduces error recurrence, which means the application doesn’t require undergoing repeated testing.

This considerably reduces testing costs and time while helping to achieve better productivity. E2E tests allow us to cover sections of the application that unit tests and integration tests don’t cover and let us quickly respond to changing business needs.