Automation Testing of AngularJS Application with Protractor

Table of contents

Reading Time: 2 minutes

Protractor is testing framework for AngularJS application .It play the important role to check the angular application.Its a combination of selenium webdriver,nodejs,Jasmine, Cucumber.

Now a time most of the application are using javascript so due to using of javascript it increases tester difficulty to check the web application.So basically when we use the selenium its difficult to us to identify the web element.

Protractor is nodejs program which is written on javascript so it can easily identify web element in angular js application.Angular js application extends the HTML attribute and some extra attribute like ng-model,ng-repeater etc which is not include in selenium webdriver locators. so selenium is not able to identify these locators thats why we are use the Protractor for angularJs application.

So for the Automation of angular application we need the following things.

1- Selenium web-driver.

2-node js.

Installation:

For Protractor Installation we type some commands.

sudo npm install –g protractor

It will install the protractor in your system and we can check the protractor version.

$ protractor –version

After that we will install web-driver manager by following command.

sudo npm install -g webdriver-manager

We just update the webdriver manager using following command.

webdriver-manager update

Then we will start the web driver manager.

webdriver-manager start

If we type the url like http://localhost:4444/wd/hub/static/resource/hub.html

it will give you the session page.

So for running the angular js application we need two file one is configuration file which is describe which file will be run and selenium server address and other file is main file where we describe locators which will be interact with the application.Protractor by default using chrome driver for automation.

So we will make two file conf file and filename.js

conf.js

exports.config = {
seleniumAddress: ‘http://localhost:4444/wd/hub’,
specs: [‘filename.js’]
};

filename.js

describe(‘angularjs homepage todo list’, function() {
it(‘should add a angular’, function() {
browser.get(‘https://angularjs.org’);
element(by.model(‘todoList.todoText’)).sendKeys(‘please fill you first test’);
element(by.css(‘[value=”add”]’)).click();
expect(browser.getTitle()).toContain(‘AngularJS’);
});
});

Now we run the application.

$ protractor conf.js

It will open the chrome browser and run the application also show the result in terminal.