Test Automation for Angular Apps Using Protractor

The protractor is an end-to-end test framework for Angular and AngularJS applications.  It was built by Google and released to open source.
The protractor is basically a Node.js program, using Jasmine test framework for its testing interface. Protractor is built on top of WebDriverJS and includes important improvements tailored for AngularJS apps. Protractor runs tests against your application running in a real browser, interacting with it as a user would. Protractor is a framework for automation of functional tests.
Why Protractor?

• It’s a wrapper around Selenium WebDriverJS and Selenium Server
• Having new locator strategies and functions specifically for Angular apps
• Can take advantage of the Selenium grid to run multiple browsers at once
• Can run test on both real and headless browsers
• Can use Jasmine or Mocha or Cucumber to write your test

How does it work?

• Jasmine helps to create the test
• Protractor helps to run the test
• Selenium Server helps to manage browsers
• Selenium WebDriver helps to invoke browsers APIs

Applications getting built on Angular technology are on a rise and so to automate these applications a dedicated tool/framework is required. Birth of the Protractor provides new locator strategies for Angular Applications. Protractor also enables to automate Non-Angular website as well.
As Protractor is made specifically for Android Apps,  Synerzip built a POC using Protractor and here are the findings:
Architecture –
The POC was designed to automate basic navigation on Angular Website ‘https://angularjs.org/’. The Synerzip team has built a basic framework in Protractor to do so.
This POC was built on the architecture of the Protractor as shown below:

Fig 1: Protractor Architecture

Fig 2: Protractor installation

Fig 3: Sample package.json file contents

Fig 4: Sample protractor.conf.js file contents

Fig 5: Update webdriver-manager

Fig 6: Start Webdriver-manager to execute your tests

Workflow –
The different components of the framework are shown in the diagram below:

Fig 7: Framework Components

The components are explained below:
Main Program – Contains tests (methods) which get executed sequentially.
Data Repository – Contain data that will be consumed by tests such as URL, Login information etc.
Common Functions – Contains functions such as click(), clickandwait(), sendkeys() etc. that will be used multiple times across test cases.
Common Libraries – Contains libraries related to Protractor and Selenium.
Object Repository – Contains XPATHS for objects.
Reporting & Logging – Contains Jasmin reports and loggers.
Framework Working

1. Start with a basic script to launch a browser and hit the URL for which automation needs to be performed.
2. Identify XPaths of the web-elements and include those in test specification (data repository file) file.
3. Add tests to this file as functions (common methods) which would perform sequential steps in every test case, to verify a test scenario/test case.

Fig 8: Contents of Common functions file

4. Make sure that individual spec file gets executed without any error.
5. If the above execution is completed successfully, we can add different components like parameter files, library files, loggers, reports etc, within the framework.

Fig 9: Contents of parameters.js file

6. Perform verifications/assertions for each method by using expect() functional calls.
7. This will create a single test case which will verify specific test scenarios.
8. All such tests will be added to .spec file. User can have multiple .spec files as part of the test suite.

Fig 10: Contents of the specification file

9. Mention this .spec file in conf.js file, which executes all test specs within the same.

Fig 11: Contents of conf.js file

10. Use a library file/class to include all common methods that can be used commonly in the .spec file such as click, sendkeys, wait etc.
11. Create a parameter file in which XPaths of web-elements can be included

Advantages of using Protractor –

• Easy installation and setup.
• Easily readable jasmine framework.
• Support Data-Driven test.
• Include all advantages of Selenium WebDriver.
• Auto-Synchronization.
• Support parallel testing through multiple browsers.
• Excellent speed.

Conclusion –
Though Protractor is only a UI – frontend testing tool, and would not a give a very detailed test report like others, it still has a very easily understandable framework.
With a bunch of customizations from Selenium, it can easily create tests for AngularJS applications. Also as it is based on AngularJS concepts, it is easy to learn, if you already know AngularJS.
The Protractor project is made public in Github. You can follow the issues in the project, add issues you think are interesting, comment on issues opened by others and help build the community.

Resources –

• http://www.protractortest.org/
• http://www.protractortest.org/#/tutorial
• https://github.com/bcaudan/jasmine-spec-reporter
• https://www.guru99.com/protractor-testing.html