Protractor – an overview

Protractor is an end-to-end test framework for Angular applications that is built on top of WebDriverJS (Selenium wrapper), which uses native events and browser-specific drivers to interact with the application as an user would. Protractor is a Node.js program that supports two behavior driven development (BDD) test frameworks out of the box: Jasmine and Mocha. Also, Cucumber can be integrated with Protractor with the custom framework options. It can also be integrated with  task manager like Gulp, Grunt and continuous integration tools like Jenkins.

This protractor tool has overloaded advantages that makes it most suitable for angular application automation and this article explains about all these advantages and how protractor supported well to meet our requirements and achieve automation of one of our Angular application.

Project requirements

Angular specific requirements

Our angular application works completely based on AJAX calls which demands efficient synchronization handling without compromising the execution speed.

Angular application has its own set of element locators like ”ng-model,” “ng-bind,” “ng-repeat,” etc., which are not available with other applications.

A tool that can handle synchronization seamlessly and also provide support for Angular-specific locators was required.

Other technical requirements

Apart from the Angular specific requirements, other requirements also had to be considered while making a choice of tool and framework which are listed below,

Concurrent access of browser windows: Accessing different user sessions in different windows of the same browser and validating the data reflection in real time concurrently was a requisite.

Parallel execution: Parallel execution was preferred for an increased execution speed.

non-Angular application Support :  Support for non-Angular applications that are integrated with this angular application was required.

DB Connection: Feasibility to establish database connection and query the database from the automation code .

HTTP request: Support for http request was needed to fire search engine query(Solr).

Reporting: Continuous integration and automatic email of Test execution report to the team was also required. Integration with Gradle and Jenkins was preferred to maintain consistency with our other automation projects.

Resource availability

With the already available selenium webdriver automation engineers in the team, a tool that is similar to selenium webdriver with simple scripting language that is easy to adopt and would meet all the above mentioned requirements was the need of the hour for an uninterrupted and increased productivity.

Protractor – overloaded features

 Handling Ajax

Waits and sleeps are no longer required to be added to test Ajax applications. Protractor wisely handles this by running the subsequent steps in the test the moment the pending tasks are finished, thus handling the test to sync with the webpage automatically.

Protractor actually runs asynchronously, but it takes care to synchronize the test steps with the application, so that they will be executed properly and at the right time, only when the application is ready and has processed the previous step.

“After each step (promise),  waitForAngular()  will be automatically called and it is not required to mention it explicitly.”

Angular app specific elements locator strategies

Protractor supports Angular-specific locator strategies, which allows to test Angular-specific elements without any additional setup effort. This is as simple as using an id, class, name or css selector available in WebDriver.

Switching between Windows

With Protractor, opening new windows and switching between windows in the browser is very simple and effective.

Need to create a new browser instance and refer this browser instance to perform any actions on window2 whereas the default browser and web element refers the first window by default

Sample code:

Support for non-angular application:

Protractor can also be used to test non-Angular applications, just by setting the below parameter to true. By default this parameter will be set as false which is required for Angular  pages whereas in the case of an non-Angular application, Protractor keeps waiting for the promise to be returned and ultimately fails. So, this parameter needs to be set as true for testing non-Angular pages

Inherited power of Webdriver

Protractor is a wrapper around Webdriver and inherits different capabilities of Webdriverjs which are listed below,

Inherited WebDriverJS Syntax

Protractor’s global objects protractor and browser are more or less same as the webdriver and browser objects, respectively.So, QA engineer already familiar with WebDriver code, can easily get adopted to the protractor code.

The most basic way to start writing Protractor code is just to replace webdriver with protractor

WebDriver Syntax Protractor Syntax
webdriver.By by
browser.findElement(…) element(…)
browser.findElements(…) element.all(…)
browser.findElement(webdriver.By.css(…)) $(…)
browser.findElements(webdriver.By.css(…)) $$(…)

Also, Protractor’s browser object inherits the  WebDriver’s different methods and apis. The Complete list of protractor apis is available here 

Support native WebDriver locator strategies

Along with the Angular specific locators, the Selenium webdriver specific locators can also be used (id, css , class ,name , xpath, etc.).

Test Like a User 

As Protractor is built on top of WebDriver, which uses native events and browser-specific drivers, it runs tests against the application running in a real browser, interacting with it as a user would

Parallel execution – made simple

Parallel execution is effortless with Protractor just by adding “multiCapabilities” in the ‘config’ file.

Execution faster-compared to Selenium

Protractor also speeds up the testing as it avoids the need for a lot of explicit “sleeps” and “waits” in the tests, optimizing sleep and wait times.

Integration with Cross browser testing tool

To avoid the overhead of maintaining multiple version of browsers in local machine, any automation tool should support remote execution in cloud. Protractor can be integrated with such cross browser testing tools including Saucelabs and LambdaTest.

Running tests on Sauce Labs is simple with protractor which can be achieved just by configuring sauceUser and sauceKey in the protractor configuration and using the capabilities to configure a particular test browser with the feasibility to add all preferred browsers to multiCapabilities.

Support Client side performance testing

Protractor not only supports functional testing but also captures performance metrics and ensures the performance stays within the threshold limit.

This can be achieved using Protractor-perf which records website runtime rendering metrics like frame rates, layout times, expensive event handlers, etc

Protractor-perf is very simple which can be used by invoking $ protractor-perf conf.js instead of $ protractor conf.js , with little code to indicate start and end range of performance test and assertions to ensure that the recorded performance metrics are within the expected range.

Added benefits of node js features

Since Protractor is a Node.js program, it enjoys different benefits of node js. A wide variety  of packages are available and can be installed as and when needed, for instance, integration with Database or making http requests from protractor automation code is possible by installing MYSQL and protractor-http-client modules respectively.

Integration with DB

Database connection can be established by installing the respective  node js MYSQL or node-postgres module depending on the application database , importing the module into protractor code and providing the required connection details. Below is sample code for connecting with MSQL,

Support Http calls

Http requests could be useful to fetch or create testdata or to validate dataflow with the integrated third party applications. For instance, in our project, there was need to make http call from automation code for firing solr queries for fetching testdata.

This can be achieved in protractor using the utility protractor-http-client which allows to call http services before, after or during interactions within the browser.

A standard approach for unit and E2E testing

Protractor comes with the default support for Jasmine framework and also, Jasmine‘ is being used by our product developers for their unit testing,So, we decided to go with ‘Jasmine‘ framework for our E2E testing for easy maintenance and improved productivity.

In addition to Jasmine, Protractor also has limited support for Mocha framework and can also be integrated with Cucumber that would require custom framework options. 

Please refer this link to know more about the configurations for different frameworks.

Easy and time efficient code development

Jasmine‘ is a BDD framework which is more readable and easy to develop with simple syntax. This reduces the development time significantly.

Support for Page Objects

Just like any other Java framework, Page object is supported by Protractor which helps in writing a cleaner code by encapsulating the element information of the web application with easy code maintenance as it is modularised and scalable.

To know more, Please visit page object using Protractor.

Continuous integration

Continuous integration can be achieved by integrating with Jenkins. There are different ways of integrating Protractor code with the Jenkins ,

  1. Trigger the execution as a batch command from Jenkins
  2. Using Jenkins gulp extensions
  3. Execute the protractor commands with other task streamer like grunt
  4. Integrating Protractor code with Gradle and Gulp and in turn with Jenkins

We achieved the integration with Jenkins using the 4th approach i.e., Gradle and Gulp to maintain consistency with all our other automation projects whereas we can adopt any one of the above mentioned approaches based on the project needs.

To know more about the 4th approach, please visit protractor-gulp-gradle-ci-jenkins

Opensource – support

It is an opensource tool with lot of help and support available through forums and blogs. The Google team follows up and answers the queries at once.  This massive support makes the project setup and maintenance easy. 

Conclusion:

Protractor is a very useful evolution from Selenium Webdriver and with all the above mentioned advantages and key features of Protractor, we were able to achieve automation of our Angular application in a most efficient way.

In addition to the capabilities of the webdriver, there are also other features and a wide varieties of api with massive support, improved execution speed and added benefits of Node js features that makes it a perfect choice for angular application automation. Though it was primarily designed for automating Angular application, it is not limited only to Angular apps alone but can also be used for non-Angular applications,but,  I would recommend using your existing Selenium webdriver framework for non-Angular web application taking into consideration of existing QA skillset and other factors which would be discussed in a different article.

I will write a separate article that explains about our in-house Protractor framework that can be readily consumed for any angular application automation project.

If you wish to get started with protractor, please visit this tutorial .Happy learning !!!