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


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.


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


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.


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:‘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,


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,


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,


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.


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 :


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

The following two tabs change content below.

Nithin Kumar C N

Passionate Senior Software Developer, Expert in PHP, Laravel, JQuery, Angular, With 6 years of experience in web development, he strongly committed himself in delivering authentic applications. Also, he continuously update himself with new technologies & features which drives him to come up with blogs on unique topic.

Leave a Reply

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

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call