What is Protractor? How is it different from Selenium?

Protractor is an end to end functional Automation framework which is built on Selenium WebDriver and automates web applications developed with AngularJS /ReactJS. Protractor uses Javascript to communicate with Selenium using WebDriverJS. You can use Protractor to automate applications which are built using non-AngularJS as well. One reason to use Protractor with AngularJS is that Protractor handles asynchronous calls very well. The user does not have to give specific waits for the objects/webpage to get loaded which can be painful to handle in Selenium synchronous calls. It provides additional web element locators with Selenium. So basically, Protractor is a wrapper for WebDriverJS so we get all the features of WebDriverJS (Selenium classes and methods) as well as additional features of Protractor.

Similarities and differences between Protractor and Selenium with Java/C#

Protractor and WebDriver architecture


  1. Install Node.JS
  2. Install Protractor using command: npm install protractor -g
  3. Install/Update webdriver manager: webdriver-manager update
  4. Install latest version of NetBeans/phpStorm

Set up conf.js file

Conf.js file is the configuration file which controls the execution, where reports can be configured, environment details and browsers can be configured for a run. It looks something like this:
Object Locators

Apart from the usual element by XPath, by id, name, CSS etc, Protractor offers additional bindings like by model, repeater, buttontext, bindings and by partialbuttontext

Usage: (Click here to get the list)


In script:

Handling Multiple elements:

Let’s assume the page has multiple elements with the same definition which user has to verify/use in the script

In script
// element.all returns a promise. We’ll discuss about promises further section

Executing Events

Let’s take the same example of button and textbox in the application.

Example 1


In script:

Example 2


In script:

Writing first test case using Jasmine

I’m using an example of a sample application https://confr.com/ mentioned in conf.jsFile

Save this as testcase1spec.js and place it under a folder called as spec

The test case would look something like this:

Running the test case

  1. Open the terminal
  2. Start webdriver Manager:
  3. Run webdriver Manager start in the terminal
  4. Execute test case using the configuration file

Handling promises

This is the tricky part of Asynchronous programming.

Behind the scenes of WebDriver, every call that interacts with the browser, such as get(), element(), sendKeys(), and click(), isPresent() is being scheduled and pushed onto the WebDriver ControlFlow allowing us to worry about using .then() on the resulting promises (unless we specifically want the result returned by the call).

Calls like

would return promise. So, the user can use:

What truly happens in the above example:

Control flow

Any time an asynchronous call is invoked, it’s put in the queue where it will wait for all previous commands to complete prior to execution.

Since control flow acts like a cashier in fast food where he serves multiple customers one after the other (there’s no scope for small talk). The control takes the order, promise to serve the order and asks the customer to move aside to take the next customer’s order. Eventually, each customer gets served in the order queue.

Basically the method element(by.XPath(‘//a[text()=”Register”]’)) would only run once the browser.get() promise is resolved. More details can be found here.

Will explain Page object model in future blogs


There are considerable advantages of using Protractor over Java/Selenium. They are as follows:

  1. Typecasting: This can be a major headache in object-oriented programming. When a function/method returns something, the calling function needs to handle the datatype.
  2. Asynchronous Programming: Though it might be a little tricky to understand at first, once the user gets the hang of it, it’s simple. The control doesn’t have time for small like
  • What’s your data type?
  • Have you converted the data?
  • Can you send me only the type of object I want?

It can become a huge headache sometimes. This makes the execution faster.

  1. The user does not have to write explicit/implicit waits. The control flow waits for the page to load (rest calls to finish).
  2. Simple to code and you need to create objects, initialize it as static. Everything is managed internally so that memory is utilized. Come to think of it as, programmers who are bored with OOP.
  3. Thousands of NPM modules available to utilize. Ex-reporter, name and password generators which can be used in data generation.


Please enter your comment!
Please enter your name here