Protractor Tutorial for end-to-end Testing for Beginners

October 31st, 2017 . 7 minutes read
Blog featured image

It is a 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 an 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 the complete flow of the application.

How End-to-End Test Works?

Work Flow of End-to-End Tests.

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 the Jasmine framework for its syntax as the default framework.
    Syntax of Protractor
  • The protractor is built on top of WebDriverJS.
  • WebDriverJS provide browser-specific native event libraries.
  • In the process, the Selenium server works as an 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 in the end, developers use XPath, which is unreliable.

Common issue 2: Synchronization issue.

Common issues in Protractor

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

Solution for Issue 1:

Protractor has the power to make custom locators. Custom locators are element finders that are defined by the developer itself for some specific tag of HTML.
With Protractor, You can make custom-locators.
So, the protractor uses angular models, binding, expressions as element finder, that makes End-to-End testing more promising.

Solution for Issue 2:

Protractors use promises to maintain control flow. For Angular apps, Protractor will wait until the Angular Zone stabilizes which 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 Installation Process

  • 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 Protractor-
Let’s make a page object.

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

Support for Selenium Server

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.

You can make an element-locator specific to your language. Once you make 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.
->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.

  • Meanwhile, if you want to run without worrying about a browser, then you should start a standalone selenium server. You can do that by describing the address for the server as given below-

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

It will update your browser-related drivers. Therefore, it might take some time.
Now start selenium server as in command-line

It will start the selenium server.
Now, Back to Conf.js, the specs property describes an array of test files.
Capabilities property defines the browser-related property like browser name, the number of instances of the browser, etc.

Now coming to the test file, spec.js.

In the Jasmine framework, A unit test is defined by an “it block” and a test-suite(Integrated Test) is defined by ‘describe block’. Furthermore, you can have any number of “it blocks” inside a “describe block”, but It is preferred to categorize them by test-suites.

Also, you can get as many nested ‘describe blocks’ as you require.

Whenever 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 the test folder–> Open Command Prompt

This command will open a new window of the 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.


Author: ahir