Site icon Learn Automation

Protractor Testing Tool for AngularJS Applications

Ajeet Kumar Maurya
Protractor Tutorial

Hello Friends, In this tutorial, we will see what is Protractor testing tool, How to install Protractor on Windows, How to setup Protractor project in Visual Studio code, Locators in Protractor etc..

What is Protractor?

Protractor is an open source end-to end testing framework for AngularJS applications and works as solution integrator combining powerful technologies like Selenium, Jasmine, Node.js, Webdriver etc.

Protractor supports both Angular and Non-Angular applications.

Note: AngularJS is a Javascript based open source frontend web framework maintained by Google.

 

Why we need Protractor?

Sometimes It is very difficult to capture webelements in AngularJS applications using Selenium.

Protractor is a NodeJS program which is written in JavaScript and run with node to identify webelements in AngularJS applications.

AngularJS applications are using some locators which is not supported by Selenium like ng-repeater, ng-model, ng-controller. Selenium is not identified webelements using Selenium code. Here Protractor supports those locators which are used in AngularJS applications.

How To Install Protractor on Windows

Protractor is a NodeJS application so we have to install NodeJS first.

Step1: Download NodeJS using this link – Download

 

After download NodeJS installer we can install it.

Step2: Set NodeJS path in System variable.

Step3: Check whether NodeJS install or not.

Open command prompt and Type node  –v

Here npm package is also installed with NodeJS. We can check npm version also.

Open command prompt and type npm –v

 

Step4: Now we will install Protractor using command in command prompt.

Use npm to install Protractor globally with command:

npm install –g protractor

This will install two tools protractor and webdriver-manager.

Using below command verify protractor install or not-

Protractor –version

Step4:  Webdriver-manager is a helping tools which is responsible for running the tests against the angular web application in a specific browser. We have to update webdriver manager using below command.

webdriver-manager update

After this we will start the webdriver using below command.

Step5: Start the webdriver manager. This step will run the webdriver manager in background and will listen out test which we run via protractor.

webdriver-manager start

 

How To Setup Protractor in Visual Studio Code

Visual studio code is an IDE where will write our Protractor test cases. First we need to download visual studio from official website.

Step 1: Download and install Visual studio code.

Download

After click here it will download visual studio code exe file. After click on .exe file we can install it.

Step 2: Open Visual Studio code.

Step 3: Install support for Javascript and TypeScript.

  1. Click on Extensions

2. Search Javascript and Typescript and install it.

 

How To Write First Test Case

Step 1: Create a new folder and open it in VS code explorer.

Now open created folder into Visual Studio explorer.

  1. Click on File — > Click on Open Folder –> Select folder from local

Step 2: Now under this folder we will create two folder, one is conf and second is testcases.

 

Step 3: Now we will create two files conf.js and spec.js under these two folders.

Step 4: Now we will write some code in both files.

Conf.js File:

// conf.js
exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js']
  }

Spec.js file

// spec.js
describe('Protractor Demo App', function() {
    it('should have a title', function() {
      browser.get('http://juliemr.github.io/protractor-demo/');
  
      expect(browser.getTitle()).toEqual('Super Calculator');
    });
  });

Note: In above conf.js and spec.js files I have used different terminology like describe, it, spec. These are Jasmine terminology. Jasmine is a behavior-driven development Javascript testing framework tool to test any kind of Javascript application.

describe – It is like test suite (describe function is for grouping related test cases)

it – It is test case.

spec – Test file  // Java class file

Now run the program.

How To Run Protractor Program

Open terminal from visual studio code.

Run this command: protractor conf\conf.js

After run, terminal will show like this.

Locators in Protractor

To identify the web-elements or object we need to use locators.

Protractor provides two global functions which takes Locator and will return an ElementFinder.

element: find a single element

element.all: finds multiple elements

But in above functions we need to pass locators.

There are two types of locators present in Protractor

  1. Angular specific locators
  2. Locators inherited from web driver

To identifying any web element we will use locator along with global function.

Angular specific Locators:

  1. model: ng-model is one of the html attributes which is using in angularJS applications as a locator.

//usage of locator

element(by.model(yourName));

In below screen we can see the locator of text box.

 

2. binding: ng-bind is also an angular locator. Binding locator is used to locate the element using bind attributes value given.

var eleName = element(by.binding('person.name')); 
expect(eleName.getText()).toBe('Robert');

We can also use a sub string for a partial match using by binding.

var eleName = element(by.binding('name')); 
expect(eleName.getText()).toBe('Robert');

3. exactBinding: It is also used for locating element using ng-binding locator, but with exact string/value.

element(by.exactBinding(‘person.email’));

4. buttonText(): It is used to locate an element using the text on button tag.

// HTML Code

<button>Save</button>

//usage of locator

element(by.buttonText(‘Save’));

5. partialButtonText(): It can locate the element using the partial text present in the button.

// HTML Code

<button>Save As</button>

//usage of locator

Element(by.buttonText(‘Save’));

6. repeater: ng-repeater is angular locator. Repeater locator is used to locate the elements with ng-repeat attributes in it.

//HTML Code

<tr ng-repeat="product info">    

<td>

{{prod.id}}</td>

<td>

{{prod.name}}</td

<td>

{{prod.quantity}}</td>

</tr>

 

//usage of locator

var eleID = element(by.repeater(‘product info’).row(0));

var eleID1 = element(by.repeater(‘product info’).row(1));

7.exactRepeater: It locates element with ng-repeat attributes with exact string present in it.

// HTML code

<li  ng-repeat=”emp in employee_names”></li>

//usage of locator

Element (by.exactRepeater(‘emp in employee_names’));

8. cssContainingText: It locates the element with text in it using css selector.

// HTML Code 

<ul>

<li class=”name”>Mike</li>

   <li class=”name”>Linda</li>

</ul>

//usage of locator

element(by.cssContainingText(‘.name’, ‘Mike’));

9. Options: It locates the element with ng-option attributes in it.

// HTML Code

<select ng-options="options in list">   
<option value="0">Option 1</option>   
<option value="1">Option 2</option>   
<option value="2">Option 3</option> 
</select>

// Usage of locator

Var alloptions = element.all(by.options(‘options in list’));

Expect(alloptions.count()).toEqual(3);

 

Till here what we have discussed these locators are angular specific locators.

Now we will discuss locators which are inherited from webdriver.

These are common locators used in Selenium and same we can use with protractor.

Examples:

element(by.id(“”));

element(by.name(“”));

element(by.className(“banana”));

element(by.tagName(“”));

etc..

 

I hope you have enjoyed this tutorial. Happy Learning 🙂

 

 

Exit mobile version