It is Protractor Tutorial for end-to-end Testing for beginners. The protractor is an end-to-end testing framework for web applications and built on top of WebDriverJS.

Do you know what is protractor and how it works for end-to-end test framework? let’s discuss end-to-end testing and protractor.

What is End-to-End Testing?

The purpose of carrying out end-to-end tests is to check system dependencies.

It is done to ensure that the right information is passed among all application components.

It checks a complete flow of the application.

How End-to-End Test Works?

Work Flow of End-to-End Tests.

What is Protractor?

Let’s talk about Protractor.

Developed by Julie Ralph in 2013, (same team as Angular) at Google.

The protractor is an end-to-end test framework for AngularJS applications as well as Non-Angular applications.

as well as Non-Angular applications. It uses Jasmine framework for its syntax as default framework.



The protractor is built on top of WebDriverJS.

WebDriverJS provide the browser-specific native event libraries.

In process, Selenium server work as Interpreter.

How Protractor came into Picture?

Common issue 1: ElementFinder issues

In Complex UI applications, It becomes hard to find an element by CSS and id. So at the end, developers use XPath, that is unreliable.

Common issue 2: Synchronization issue.

As you know, Almost web application uses javascript as its primary component and Javascript is asynchronous in nature.



Solution for Issue 1: Protractor have the power to make custom locators

Custom locators are element finders those are defined by the developer itself for some specific tag of HTML.

With Protractor, You can make custom-locators.

So Protractor uses angular models, binding, expressions as element finder, that makes End-to-End testing more promising.

Solution for Issue 2: Protractor use promises to maintain control flow

For Angular apps, Protractor will wait until the Angular Zone stabilizes. This means Protractor waits until there are no pending asynchronous tasks in your Angular application. This means that all timeouts and HTTP requests are finished.

Protractor Installation Process

Let’s install protractor. Also, read how to install artillery load testing tool.

The protractor is a Node.js program . To run, you will need to have Node.js installed. After installation, check your node version in command-prompt as

node -v 1 node - v



. To run, you will need to have Node.js installed. After installation, check your node version in command-prompt as Protractor use Selenium to control browser automatically, this needs Java.

WebDriver-Manager keeps track of browser-specific drivers(i.e. chrome-drivers(Google Chrome).

So It is a good practice to run the command “web driver-manager update” before running your test-suites once, It will update your browser-drivers.

Why use the protractor?

These are the reasons why to use the protractor? let’s discuss.

Support for Angular Apps

Protractor supports Angular-specific locator strategies by default, which allows you to test Angular-specific elements without any setup effort.

Automatic Waiting

Protractor uses a control flow internally to lineup all your driver commands(Commands you use to perform operations on the browser).

You don’t need to worry about the asynchronous behavior of your application. You can run them in a synchronous fashion because Protractor takes care of them by using Control Flow.

Page Object

Page Objects are set of small functions Which provide reusability to your test.

For Example- There is a textbox, that you use taking input mostly. So You can make a page object for that.

In HTML-

<input ng-model="companyName" class="form-control" type="text" > 1 < input ng - model = "companyName" class = "form-control" type = "text" >

In Protractor-

Let’s make a page object.

function inputUserName(companyName){ element(by.model("companyName")).sendKeys(companyName); } Inside TestCase- inputUserName('HabileLabs'); 1 2 3 4 5 function inputUserName ( companyName ) { element ( by . model ( "companyName" ) ) . sendKeys ( companyName ) ; } Inside TestCase - inputUserName ( 'HabileLabs' ) ;

Now you can reuse this page object for any test case.

Support for Selenium Server without it

Protractor provides support for chrome and firefox browser with web driver-manager. So you can start running end-to-end without starting Selenium Server, with help of chrome-drivers(In case of Google Chrome) or gecko-drivers(In case of Firefox). That makes test fast.

This is only supported by Google Chrome and Mozilla Firefox.

The concept of the Custom locator

You can make element-locator specific to your language. Once you made a custom locator, It will help you throughout all your test-cases.

Understanding your first Protractor Test

For Demo purpose, I am going to use the same angular project used by Julie Ralph. This is a good project to start for understanding Protractor. You can clone from this project link.

After cloning the project, you probably get a folder with following structure.

->protractor-demo-master

->app folder

->test folder

->LICENSE file

->package.json file

->README.MD file

I am assuming that you have followed Protractor installation process described above.

So First you have to start your app, which is inside app folder. but before that, you need install all libraries that are needed by the angular app.

Just Go inside root folder(protractor-demo-master), ->open command-line -> type npm install -> hit Enter

Now, wait for library dependencies to be installed.

Now to start your app, Just Go inside app folder-> open command-line -> type node express server -> hit Enter

This command will start your angular app server running at http://localhost:3456. You can access Calculator app on this URL.

Now in test Folder, you will see two files as conf.js and spec.js.

A conf.js file contains the script related configuration of Protractor.

For Example-

Which browser are you going to use?

How many numbers of instances do you want to run at the single time?

Which framework do you want to use among Jasmine, Mocha, and Cucumber?

Which port will run selenium server?

When you open conf.js file, you will get following snippet-

exports.config = { directConnect: true, framework: 'jasmine2', specs: [ 'spec.js' ], capabilities: { 'browserName': 'chrome' }, }; 1 2 3 4 5 6 7 8 9 10 exports . config = { directConnect : true , framework : 'jasmine2' , specs : [ 'spec.js' ] , capabilities : { 'browserName' : 'chrome' } , } ;

Inside export.config block-

directConnect: true, denotes that you are not interested in starting Selenium server and just want to run your test directly.

This above line will only for those who are using either Google Chrome or Mozilla Firefox. Otherwise, It will throw an error.

If you want to run without worrying about a browser, then you should start a standalone selenium server.

You can do that by describing address for server like following-

seleniumAddress: 'http://localhost:4444/wd/hub'; 1 seleniumAddress : 'http://localhost:4444/wd/hub' ;

Now for starting selenium server, you need to open another command-line inside test folder

-> type "webdriver-manager update" -> Hit Enter 1 -> type "webdriver-manager update" -> Hit Enter

It will update your browser related drivers. So It might take some time.

Now start selenium server as in command-line

-> type "webdriver-manager start" -> Hit Enter 1 -> type "webdriver-manager start" -> Hit Enter

It will start selenium server.

Now, Back to Conf.js, specs property describe an array of test files.

Capabilities property define the browser related property like browser name, number of instances of browser etc.

Now Coming to test file, spec.js.

In Jasmine framework, A unit test is defined by an “it block” and a test-suite(Integrated Test) is defined by ‘describe block’.

You can have any number of “it blocks” inside a “describe block”, but It is preferred to categorize them by test-suites.

You can also have nested described blocks as per your requirement.

When you open the spec.js file in any text-editor, you will find “it blocks” inside a “describe block”.

For running end-to-end tests, Go inside test folder–> Open Command Prompt

type "protractor conf" -->hit Enter 1 type "protractor conf" -- > hit Enter

This command will open a new window of browser and run your test-suites one by one.

Habilelabs is a premier software development company and delivering high-quality web app development and mobile app development services.

It is a protractor tutorial for end-to-end testing for beginners. Hope you found this blog helpful.

How you use a protractor for an end to end testing for your projects, Share in comments. Don’t forget to share with friends.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]