Creation and implementation of a test automation framework for HTML5 application
The client: An international financial services
provider
Industry: Capital Markets
Technologies: AngularJS, Protractor, TeamCity, Git
Ten10 services: Automated Testing
Company Overview:
A global bank operational in over 40 countries, with over 55,000 employees and with £12 Billion in revenues. An international financial services provider operating on the basis of cooperative principles. It offers retail banking, investment banking, private banking, leasing and real estate services.
Background:
The Client was redeveloping a number of applications in HTML5 and was 
keen to implement a more test-driven approach to its UI development strategy.
The client selected an in-house application used for managing, calculating, and publishing curves for the Central Treasury group, as the first project to be developed in this way.
As part of the new QA process for the redevelopment of these applications, the client was looking to automate tests so that they could be integrated into their continuous integration (CI) processes and provide immediate feedback on the stability of new code builds.
Challenges:
- No test automation capability existed beforehand
- System under active development – lots of changes while scripting for test automation
- Lack of a stable environment
- Test data issues were resolved on-demand in collaboration with the dev team
Goals:
- Generate a test automation framework and define an automation process that would form the strategy of all HTML5 UI development going forward
- Analyse screencasts to extract test scripts
- Automate the extracted test scripts using Protractor and the framework
- Integrate the solution into TeamCity
- Handover to the client to take on the work after Ten10’s involvement
Ten10’s approach:
Ten10 developed a proof-of-concept (POC) for the test automation framework based on the application with a view to applying structure to scripting and best practices for the delivery of test automation.
Key elements of the delivered automation framework included:
- Use of Protractor, which couples with AngularJS applications.
- Definition of a structured and easily readable approach to writing test cases.
- Adoption of the PageObject pattern for test automation to improve maintainability.
- Loading of hierarchical test data from a JSON file to allow for test data reuse.
- Integration with TeamCity and Git to provide quick feedback on results.
- Execution of parameterised builds against different environments.
- Creation of reports and screenshots for each run to facilitate the identification of issues.
The POC was then followed by 
the test analysis of the application. Specifically, the client recorded and provided a number of screencasts that described functional tests that are currently performed manually against the application. These were analysed by Ten10 to identify the complexity of automation and to estimate the effort required in the development of the corresponding scripts.
Ten10 proceeded to the delivery of a front-end, UI-level test automation regression pack, that would be integrated with TeamCity and run against the latest release of the application, reporting results directly onto the CI environment.
Test automation framework best practice
The framework designed and implemented by Ten10 uses Protractor, which offers test automation best practices such as; separation of concerns, hierarchical test data loading from JSON files, pageobject model and multi-browser support.
The framework was also used to create an effective regression test pack with training for the client provided by Ten10, enabling them to confidently take on responsibility in-house for their regression testing.
During the engagement, Ten10 worked closely with the development team to ensure stability and test data issues could be raised as early as possible, and avoiding any blockages or delays to the regression pack automation progress.
The results
Ten10 successfully met the client’s goal to establish a departmental UIlevel test automation approach.
Following Ten10’s engagement, test automation has successfully become part of each sprint. The continuously extending coverage of automation scripts has significantly reduced the manual testing effort requirements, increased the speed of testing, and reduced the risk of a critical defect passing into a release.
Due to the demonstrated benefits, the client has now adopted this automation approach and framework across all its development streams, thus underlining the success of the engagement.
