Over a million developers have joined DZone.

Automation Testing of AngularJS Applications With Protractor

DZone's Guide to

Automation Testing of AngularJS Applications With Protractor

Protractor is a a combination of Selenium WebDriver, NodeJS, Jasmine, and Cucumber that can help automate the testing of AngularJS applications.

· DevOps Zone ·
Free Resource

Do you need to strengthen the security of the mobile apps you build? Discover more than 50 secure mobile development coding practices to make your apps more secure.

Protractor is testing framework for AngularJS applications. It plays the important role of checking the Angular application. It's a combination of Selenium WebDriver, NodeJS, Jasmine, and Cucumber.

These days, most applications use JavaScript, which increases the amount of difficult to test applications. So basically when we use the selenium its difficult to us to identify the web element.

Protractor is a NodeJS program that is written in JavaScript, so it can easily identify web elements in an Angular JS application. The Angular JS application extends the HTML attribute and some extra attributes like (ng-model, ng-repeater, etc.), which is not included in Selenium WebDriver locators. So, Selenium is not able to identify these locators. That's why we use the Protractor for AngularJS applications.

So, for the Automation of angular applications, we need Selenium WebDriver and NodeJS.


For Protractor installation, we type some commands.

sudo npm install –g protractor installs the Protractor in your system. We can check the Protractor version, $ protractor –version.

After that, we will install WebDriver manager with sudo npm install -g webdriver-manager.

We just update the WebDriver manager using webdriver-manager update and start the web driver manager with 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 files. One is the configuration file, which describes which file will be run and the Selenium server address. The other file is the main file, where we describe locators which will interact with the application. Protractor, by default, uses Chrome driver for automation.

So, we will make two files: conf.js and filename.js.


exports.config = {
    seleniumAddress: ‘http: //localhost:4444/wd/hub’,
        specs: [‘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 with $ protractor conf.js.

It will open the Chrome browser, run the application, and show the results in terminal.


Fell free to ask me any question regarding automation testing.

Check out tips for blazing the way from agile to DevSecOps with security built into your mobile app toolchain.

devops ,automated testing ,javascript ,protractor ,webdriver ,angular ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}