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 blueprint that can take a company of any maturity level all the way up to enterprise-scale continuous delivery using a combination of Automic Release Automation, Automic’s 20+ years of business automation experience, and the proven tools and practices the company is already leveraging.

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.

Download the ‘Practical Blueprint to Continuous Delivery’ to learn how Automic Release Automation can help you begin or continue your company’s digital transformation.

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