Blog

This chapter gives you an introduction to Protractor, where you will learn about the origin of this testing framework and why you have to choose this, the working, and the limitations of this tool.

What is Protractor?

Protractor is an open-source end-to-end testing framework for Angular and AngularJS applications. It was built by Google on top of WebDriver. It also serves as a replacement for the existing AngularJS E2E testing framework called “Angular Scenario Runner”.

It also works as a solution integrator that combines powerful technologies such as NodeJS, Selenium, Jasmine, WebDriver, Cucumber, Mocha, etc. Along with testing of AngularJS application, it also writes automated regression tests for normal web applications. It allows us to test our application just like a real user because it runs the test using an actual browser.

The following diagram will give a brief overview of Protractor −

Observe that in the above diagram, we have −

• Protractor − As discussed earlier, it is a wrapper over WebDriver JS especially designed for angular apps.
• Jasmine − It is basically a behavior-driven development framework for testing the JavaScript code. We can write the tests easily with Jasmine.
• WebDriver JS − It is a Node JS bindings implementation for selenium 2.0/WebDriver.
• Selenium − It simply automates the browser.

Origin

As said earlier, Protractor is a replacement for the existing AngularJS E2E testing framework called “Angular Scenario Runner”. Basically, the origin of Protractor starts with the end of Scenario Runner. A question that arises here is why do we need to build Protractor? To understand this, we first need to check about its predecessor – Scenario Runner.

Protractor’s Inception

Julie Ralph, the prime contributor to the development of Protractor, had the following experience with Angular Scenario Runner on another project within Google. This further became the motivation to build Protractor, especially to fill the gaps −

“We tried using Scenario Runner and we found that it really just couldn’t do the things that we needed to test. We needed to test things like logging in. Your login page is not an Angular page, and the Scenario Runner couldn’t deal with that. And it couldn’t deal with things like popups and multiple windows, navigating the browser history, stuff like that.”

The biggest advantage to the Protractor was the maturity of the Selenium project and it wraps up its methods so that it can be easily used for Angular projects. The design of Protractor is built in such a way that it tests all layers such that web UI, backend services, persistence layer, and so on of an application.

Why Protractor?

As we know that almost all applications are using JavaScript for development. The task of testers becomes difficult when JavaScript increases in size and becomes complex for applications due to the increasing number of the applications themselves. Most of the time it becomes very difficult to capture the web elements in AngularJS applications, uses extended HTML syntax to express web application components, by using JUnit or Selenium WebDriver.

The question here is that why is Selenium Web Driver is not able to find AngularJS web elements? The reason is that AngularJS applications are having some extended HTML attributes like ng-repeater, ng-controller, and ng-model, etc. which are not included in Selenium locators.

Here, the importance of Protractor comes into existence because Protractor on the top of Selenium can handle and control those extended HTML elements in AngularJS web applications. That is why we can say that most of the frameworks focus on conducting unit tests for AngularJS applications, Protractor are used to do testing of the actual functionality of an application.

Working of Protractor

Protractor, the testing framework, works in conjunction with Selenium to provide an automated test infrastructure for simulating a user’s interaction with an AngularJS application that is running in a browser or mobile device.

The working of Protractor can be understood with the help of the following steps −

• Step 1 − In the first step, we need to write the tests. It can be done with the help of Jasmine or Mocha or Cucumber.
• Step 2 − Now, we need to run the test which can be done with the help of Protractor. It is also called test runner.
• Step 3 − In this step, Selenium server will help to manage the browsers.
• Step 4 − At last, the browser APIs are invoked with the help of Selenium WebDriver.

Advantages

This open-source end-to-end testing framework offers the following advantages −

• An open source tool, Protractor is very easy to install and setup.
• Works well with Jasmine framework to create the test.
• Supports test driven development (TDD).
• Contains automatic waits which means we do not need to explicitly add waits and sleeps to our test.
• Offers all the advantages of Selenium WebDriver.
• Supports parallel testing through multiple browsers.
• Provides the benefit of auto-synchronization.
• Has excellent testing speed.

Limitations

This open-source end-to-end testing framework possesses the following limitations −

• Does not uncover any verticals in browser automation because it is a wrapper for WebDriver JS.
• Knowledge of JavaScript is essential for the user, because it is available only for JavaScript.
• Only provides front-end testing because it is a UI driven testing tool.