Request a Call Back
X
Fields marked with an * are required
Protractor Tutorial for end-to-end Testing for beginners - Habilelabs

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.
  • 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  

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

 

In Protractor-
Let’s make a page object.

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-

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-
Now for starting selenium server, you need to open another command-line inside test folder It will update your browser related drivers. So It might take some time.
Now start selenium server as in command-line 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

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.

What others say about us

quotes icon

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again."

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!."

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

iSEEit

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Siquo

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Tableluv

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Denthub

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again"

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!"

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

KCRW

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu