googleads
Introduction to E2E Testing In Angular CLI Using Protractor
Technical Web Development

Introduction To E2E Testing In Angular CLI Using Protractor

 

An Overview of Protractor

Protractor, formally known as E2E testing framework, is an open source functional automation framework explicitly designed for AngularJS web applications. Protractor acts as a wrapper around Webdriver JS to automate e2e testing for angular apps. The following figure demonstrates the architecture of it’s process.

Why Do We Need Protractor?

Nowadays, demand for Javascript is very high and is used in almost all web applications. As the applications grow, JavaScript also increases in size and complexity. In such case, it becomes a difficult task for Testers to test the web application for various scenarios.

Protractor is a NodeJS program which is written in JavaScript and runs with Node to identify the web elements in AngularJS applications, and it also uses WebDriver to control the browser with user actions.

How To Install Protractor?

Before Installing Protractor, We should aware of the prerequisites.

You need to have Node.js installed. You can download Protractor package using npm, which comes with Node.js. You can also check the version of Node.js you have by running node –version.

Install Protractor globally by using the npm

npm install -g protractor

The above command will install two new command line tools, protractor, and webdriver-manager. Run that command version to confirm that protractor is installed successfully.

The web driver manager is used to run the tests against the angular web application in a specific browser. After the installation, the web driver manager needs to be updated to the latest version. we can do it by running the following command in the command prompt.

webdriver-manager update

Then we need to start up the server with the following command.

webdriver-manager start

This will start up a Selenium Server and will output a bunch of info logs. Now the test will send requests to this server to control a local browser. You can able to see the status of the server at http://localhost:4444/wd/hub.

Let’s start to write a test using protractor framework.

Open a new command line and create a fresh directory for testing.

we need two files to run, a spec file and a configuration file.

Let’s start with a simple test that navigates to an example Angular application.

Following is the Spec file.

describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register');
element(by.id('firstName')).sendKeys('nithinkumar');
element(by.id('lastName')).sendKeys('123456');
element(by.id('userName')).sendKeys('nithin');
element(by.id('pwd')).sendKeys('123456');
element(by.css('.btn-register')).click();
});
});

This uses the globals element and by. The element function is used for finding HTML elements on your webpage. It returns an ElementFinder object, which can be used to interact with the element or get information from it. In this test, we use sendKeys to type into <input>s, click to click a button, and getText to return the content of an element.
Element takes one parameter, a Locator, which describes how to find the element. The by object creates Locators. Here, we’re using three types of Locators:

by.id(‘firstName’) to find the element with the given id. This finds <input type =”text” id=”firstName”>.
by.css(‘.btn-register’) to find the element with given class. This finds <button class=”btn-register”>.

Run tests with below mentioned command,

protractor conf.js

This will open a new screen in with registration form, it will automaticaly fill all the fields with the given values and the user will get registered.

Now we can try the test with multiple scenarios.

Consider the following spec.js on this case,

describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register');
element(by.id('firstName')).sendKeys('nithinkumar');
element(by.id('lastName')).sendKeys('123456');
element(by.id('userName')).sendKeys('nithin');
element(by.id('pwd')).sendKeys('123456');
element(by.css('.btn-register')).click();
});
it('positive scenario of login credentials', function() {
element(by.id('form-username')).sendKeys('nithin');
element(by.id('form-pass')).sendKeys('123456');
element(by.css('.btn-login')).click();
browser.driver.wait(function() {
browser.driver.getCurrentUrl().then(function(url) {
console.log(url);
});
});
});
});

We can store the ElementFinders for the input variables in a separate file and we can include that file in our spec.js file. So, it will make the code clean which is one of the best practice we can do by following the below steps.

Related: Tips To Optimize Angular Application To Increase The Website Speed

Create a app.po.ts file like below,

import { browser, by, element } from 'protractor';
export class AppPage {
firstName = element(by.id('firstName'));
lastName = element(by.id('lastName'));
userName = element(by.id('userName'));
userPass = element(by.id('pwd'));
regBtn = element(by.css('.btn-register'));
loginName = element(by.id('form-username'));
loginPwd = element(by.id('form-pass'));
loginBtn = element(by.css('.btn-login'));
}

Now we can include this file in our spec.js file, and after making the changes, the above spec.js file will look like below.

import { AppPage } from './app.po';
import { browser, by, element, protractor } from 'protractor’;
describe('Protractor Demo App', function() {
it('new user registration', function() {
browser.get('http://protractor-demo-app.herokuapp.com/register')
firstName.sendKeys('nithinkumar');
lastName.sendKeys('123456');
userName.sendKeys('nithin');
userPass.sendKeys('123456');
regBtn.click();
});
it('positive scenario of login credentials', function() {
loginName.sendKeys('nithin');
loginPwd.sendKeys('123456');
loginBtn.click();
browser.driver.wait(function() {
browser.driver.getCurrentUrl().then(function(url) {
console.log(url);
});
});
});
});

Here “describe”, and “it” is the jasmine framework methods to write the tests easily. We will give a brief description about describe, and it functions.

The describe method is called by passing two parameters into it. First one is a string and the second one is a function. The first parameter string means the name of the spec suite. The second parameter function is which that defines the suite.

We use it function to define specs. Similar to describe function, it also has two parameters, one is a string, and the other is a function. The string means the name of the spec. The function is the spec that defines the code as like how the test is expected to work.

Since describe and it blocks are functions, they can contain any executable code which are necessary to implement the test. JavaScript scoping rules will get applied, so variables declared in a describe are available to any it block which is inside the suite.

Protractor can be used not only for Angular apps. It works pretty well for Non-Angular pages also.

Related: How to make Angular Application SEO Friendly Using Pre Render

Simply set the following flag to true and access the webdriver instance using browser.driver instead of an element as shown below :

beforeEach( function() {
browser.ignoreSynchronization = true;
});
For example, the following code for the angular page
element(by.id(‘elementid’)).click();
would be written as shown below for the non-angular page
browser.driver.findElement(by.id(‘elementid’)).click();

Hope this post would help you to kick start with Protractor, Since it’s just an Introduction of e2e testing with Protractor so in future, will dive into the Protractor world and discuss more about it use cases in coming blogs. Keep an eye on our largest blog portal to get a continuous blog updates & latest posts. For more inquires reach us via info@agiratech.com

Leave a Reply

Your email address will not be published. Required fields are marked *