Introduction To Protractor

Introduction

Protractor is an E2E UI automation testing tool for Angular or Angular JS and it is very similar to Selenium Webdriver. Angular has some extra web elements, like ng-model and ng-if so we can’t test Angular applications without protractor. Protractor is built on the top of WebDriverJS that uses native events and browser-specific drivers to interact with web application.

Before jumping into Protractor, we should have a little background knowledge. As all of us know, AngularJS is developed using JavaScript. In simple words, we need to know JavaScript for AngularJS application development. Angular is an advanced version of AngularJS. For the development of any application in Angular, we use TypeScript. So, if we need to write a test case in Protractor, we can use JavaScript or TypeScript.

Environment Setup

One more bit of information before we start the setup. We need to know about npm or Node Platform Manager which is a very important platform on which we can install Protractor. NPM is the platform that is mandatory to exist on your machine to get Protractor to work on your machine. The simplest way to know whether the node or npm is available or not is to go to the command prompt or terminal and type command

If node or npm is not available, then please visit node.org and download the latest version and install.

After installation of npm or node, you can install Protractor.

Command to install Protractor from command line or terminal:

npm install -g protractor

Command to add/update webdriver

webdriver-manager update

Now, start up a server with:

webdriver-manager start

Application setup and development environment

There is N number of IDE’s available like Sublime text, Visual Studio code, Eclipse, or Netbeans etc. These all are open source tools. Also, there are some paid IDE's too.

There are two programming language options that we can use for development.

In this document, all samples are developed using TypeScript because TypeScript is easier.

If anyone is not aware of TypeScript, then please visit https://www.typescriptlang.org/

TypeScript is very similar to JavaScript.

Use the following command for installing Angular CLI.

Try ng --help to get help

Follow the steps to create a new application.

Now, we can go with the required files and folders one by one.

These three files are very important for automation. The rest of the files and folders are used for developing the Angular application. In node_module, all the dependencies are stored.

Package.json