Raptor! Trending framework for End to End automation testing of web applications

Technology is moving faster than ever before. To be efficient, we must evaluate technology changes that allow us to accelerate. Test automation is an important area to explore. Key success factors in automation are easy creation and low maintenance.

In today’s time, modern applications are integrated and interconnected with multiple systems within and outside of the enterprise environment. This makes the entire workflow of the application complicated. Testing and diagnosing errors in these complex applications can be challenging. The solution to ensure the complete health of an application from all perspective lies in end-to-end testing.

Automation in ING

End-to-end testing is a process of testing an application from all the layers — Starting with the front-end all the way through the back-end. Performing end-to-end testing ensures that the application is tested from the user’s perspective.

In our organization, our team has really complex use cases (Opening and Closing Savings accounts in the online banking environment) with front end flows and web components, it’s a challenge to come up with one automation framework that will do the job. We were also facing problems of testing our end to end flows in every release.

In ING we have the motto “You take it on and make it happen”. We took the challenge and drilled down to the core of the problem of finding a shadow DOM element. We wanted a solution to easily find an element in the shadow DOM with available algorithm in Chrome browser.
It took 12 nights, 30 Netflix episodes, 50+ Lays chips and bingo Raptor was born.

Raptor Introduction

Raptor is a framework comprised of 4 open-source tools and when combined together enables us to write E2E test cases in minutes. These tools are JSON, Java, WebDriver, and JavaScript.

1. JSON: Used for writing configurable test scripts
2. Java: Used for reading test scripts
3. Selenium WebDriver: Used for initiating browser instance
4. Javascript: Used for finding and executing commands on shadow DOM

Raptor composition and integration with selenium grid

Let’s take a closer look on how each one of them works:

Test scripts: JSON configuration file

In our test script we write simple configurations for all the the actions which we expect a user to do in real life.

Example:

{
 "step": "User navigates to the login page of daily banking",
 "action": "navigate",
 "url": "https://mijn.ing.nl/login/"
,
{
 "step": "User enters his/her user id",
 "action": "input",
 "locator": "document.querySelector(\”#filterProcedure\”).shadowRoot.querySelector(\”#inputFilter\”)",
 "inputValue": "John"
}

What is important to know that above script has attributes like “step”, “action”, “locator”, “url” and “inputValue”. These are configurable and we can add more as per our convenience.

The interesting part of the script is “locator”. We can easily get this value from chrome browser by just clicking on the element and then by copying JS path we will get our “locator”.

Example: login-test.json

Copy JS path from chrome developers tool

Java: Steps Reader

This step reads and parses the test configuration files written by users.

try (FileReader reader = new FileReader(login-test.json))
 {
 //Read JSON file
 testCase = jsonParser.parse(reader, JsonTestCase.class);
 
 } catch (FileNotFoundException e) {
 e.printStackTrace();
 }

Selenium WebDriver: Browser Handling

Opening a browser to test a functionality is handled by selenium web driver. This will take screenshots and collects logs in case of failure or success based on configurations.

Javascript Executor: Execution of commands

This is the engine of Raptor, all actions are being handled by JavaScript executors like click, navigate, etc.
JavaScript executors also encapsulates all the complexity of finding and executing commands in the shadow DOM.

Example:

WebElement element = wait.until(browser -> (WebElement)JavascriptExecutor.executeScript("return " + locator));
JavascriptExecutor.executeScript("arguments[0].click();", element);

Benefits of Raptor

1. Automation of journeys with dynamic test data
2. Easy to setup and maintain, anyone in the team can write test scripts
3. Integration with ING selenium grid test platform
4. Inbuilt multi factor authentication support, example: “OTP”, “TAN”, “MOBILE”
5. Dynamic screens are handled by If/else support.example: cookie screen
6. Capable of re-running a failed test
7. One tool to test any portal in ING which can run in a browser like Daily banking, Iris, Ideal and Febo etc.
8. Inbuilt reporting

In the past we used WebdriverIO which was difficult to maintain and only team members with front end knowledge would be able to change code.

With Raptor we can share responsibilities of overall end to end tests. While we are busy writing scenarios and journeys in a JSON file for our features, Raptor will find the shadow DOM elements, handle optional screens, create reports, and execute tests on the selenium grid.

Let me tell you how easily we can write E2E tests for the Daily banking app. Instead of 2 days it took me 20 minutes to write a test case with help of Raptor and teams from other tribes have already started using Raptor.

Raptor Journey

The journey to write end to end test cases with Raptor is divided into four basecamps or milestones:

Basecamp 1: Setting up the project

Create a simple Spring boot project and add Selenium, JUnit-5 and Raptor dependencies in the pom file.

Maven dependency of Raptor

Now run “mvn clean install” and your base project is ready.

Basecamp 2: Resource Folder

Add a resource folder with ‘application.properties’ file and add below properties:

application.properties

Basecamp 3: JSON Test Scripts

Create a JSON file with steps to complete a journey of a feature and add it to the resource folder in test package.

Test script in JSON format

Basecamp 4: JUnit Test Case

Create a JUnit test class and add a a test for the feature. Pass JSON test script file path and import Raptor.

test

Summit

Finally, run command “mvn test” and you will get the output of the tests. A nice report will also be generated that is easily readable. Set ‘GridEnabled’ property in application.properties file as true and the same test will run on Selenium Grid.

Raptor report of passed and failed test cases

So far we have covered multiple E2E tests for various features with Raptor successfully. We also host sessions on Mastery day to onboard teams on Raptor and spread knowledge of this unique type of testing experience with configuration files.

For more details check out my first article of this series Raptor.

Conclusion

We can proudly say that in a few minutes we were able to write first E2E test with this approach and we hope you can even reduce that further.

Special thanks to Amit Soni and Erik-Jan Kok for reviewing and offering their thoughts. I’d be very interested to hear other developer’s and tester’s views on this subject so please leave a comment or find me on Twitter Salman.