Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Download “The DevOps Journey - From Waterfall to Continuous Delivery” to learn learn about the importance of integrating automated testing into the DevOps workflow, brought to you in partnership with Sauce Labs.

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.

Installation

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.

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 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.

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 with $ protractor conf.js.

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

protractor-result

Fell free to ask me any question regarding automation testing.

Discover how to optimize your DevOps workflows with our cloud-based automated testing infrastructure, brought to you in partnership with Sauce Labs

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

Published at DZone with permission of manoj mathpal, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}