Getting Started with Protractor

What is Protractor:

Protractor is an end-to-end testing framework it is open source and specially designed framework for Angular and AngularJS applications. It was developed by Google using the existing concepts of WebDriver. There are many other test frameworks available for the same but Protractor is unbeatable. Protractor is powerful enough to replace many existing AngularJS end to end testing frameworks like “Angular Scenario Runner”.

Protractor is a solution integrator that can combine many powerful technologies like NodeJS, Selenium, WebDriver, Jasmine, Mocha, and Cucumber, etc. Along with testing of AngularJS application, we can write 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.

Let’s throw some light on the origin of the Protractor. In fact the the origin of Protractor starts with the issues with Angular Scenario Runner. Julie Ralph, the prime contributor to the development of Protractor, had some bad experiences with Angular Scenario Runner on some projects within Google. This further became the motivation to build Protractor, specially to fill the gaps – and the gaps were that the Angular scenario runner was uncapable of testing the typical scenarios related to JS content.

How to install and configure:

Protractor is a NodeJs application so we need to install the nodejs first. Go to nodejs.org and download it. Before we start to download it, first check if we have it already there in our system. Type the command node -v in the command prompt and it will show the installed version if it is already installed otherwise it will show some error message.

Then check if we have node package manager so type the command npm -v. If node package manager is not there it is nothing to worry about, it will be installed with node.js automatically. If node package manager is already there, it will show the version installed(see the figure below)

Now let's install the nodejs type the command npm install -g Protractor. The protractor will get installed. Now check protractor version type the command in cmd protractor --version

Now let's go to the webdriver manager. WebDriverManager automates the browser setup in the Selenium code. By default, it downloads the latest version of the browser binary and also the binary for the appropriate platform. It supports various browsers like Google Chrome, Firefox, IE, Edge, Opera, etc. So we have to update the Web driver manager. The web driver manager is used for running the tests against the angular web application in a specific browser. After Protractor is installed, the web driver manager needs to be updated to the latest version. This can be done by running the command in the command prompt.

Type webdriver-manager update in cmd and hit enter it will update the browser specific software to run the test scripts in the browser. It will update the chrome driver, geckodriver and selenium server standalone jar automatically. To check the software installed throughout the process we have to go to the location

C:\Users\admin\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\selenium

Here we can see the chromedriver and geckodriver selenium server standalone jar etc.

Chromedriver and geckodriver are the browser drivers and selenium server standalone jar is the jar file which tiggers the selenium server to run the test scripts in the browser you want.

Environment setup in visual studio code:

Open the visual studio code and download some support files what these files are:

Support for javascript and type script for this lets go to extensions and search search the ESLint which enables the visual studio code to support the java script. Click install button and wait for the installation to complete. Similarly support for typescript we have TypeScript Hero, select it and click the install button. We are all set with the setup of the environment.

Now let's look into the test script and it's different parts. A test script is divided into three parts as follows:

1. Specs

2. Config

3. Test data files

We need locators to identify the web elements on the page. There are two types of locators available in protractor

1. Angular Specific

2. Locators inherited from webdriver

There are two functions which are used to identify the webElements, we need to pass the locators to them and they finds the weElements for us.

1. element: finds a single element

2. element.all: finds multiple elements

Angular Specific locators:

1. ng-model attribute is an angular specific attribute and it locates the element by model attribute value given.

Element(by.model(‘model attribute value’));

2. binding: ng-binding is an angular specific locator it locates the element by using bind attribute value given. It does a partial match so the element bound to the variables containing the input string will be returned.

element(by.binding(‘value of ng-bind attribute’));

3. Exact binding: It also locates the element by using bind attribute value given but with exact string value.

element(by.exactbinding(‘value of ng-bind attribute’));

4. buttonText: Used to locate a button by it’s label or text value.

element(by.buttonText(‘value of button label or button text));

5. ng-repeat: An angular specific locator, it locates the webelements using ng-repeat attribute. It is used to locate the elements which are in groups or collection like table which contains multiple rows.

<tr ng-repeat = ‘prod-info’>
<td {{prod.id}}>
<td {{prod.name}}>
<td {{prod.type}}>
</tr>

let elemId = element(by.repeater(‘prod-info’).row(0)); // will select first row

6. cssContainingText: It locates the elements with text in it using cssSelector.

element(by. cssContainingText (‘value of text’));

7. Option: It locates the elements using the attribute ng-options. It is also used to locate the collective element like dropdown list etc.

<select ng-option = ‘options in list’>
<option value = “0”> Option 0 </option>
<option value = “1”> Option 1 </option>
<option value = “2”> Option 2 </option>
</select >
let alloptions = element.all(by.options(‘options in list’));
expect(allOptions.count()).toEqual(3);