Automation Testing of AngularJS Application with Protractor

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

webdriver-start

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

it will give you the session page.

protractor-session

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.

protractor-result

Fell free to ask me any question regarding automation testing.

Thanks.

Written by 

Joseph Ross is a Principal Consultant at Knoldus Inc. having more than 10 years of experience. Joseph has a passion for identifying challenges and give impactful solutions to the clients. He is a football fan and loves to watch TV series. Joseph has a cross-functional business operations and technology consulting experience. Joseph is familiar with programming languages such as Scala, C++, Java, CSS and HTML.

2 thoughts on “Automation Testing of AngularJS Application with Protractor

Leave a Reply

%d bloggers like this: