Protractor – Open Source - End to End testing

I would like to thank each one of you for your responses to all my earlier posts. Let’s continue our journey to open source testing tools.

Recently I got a request to write on Protractor. In one of my earlier projects I got an opportunity to work on Protractor. So I am writing on Protractor in this post.

Protractor is an open source end to end Node.js framework, primarily for Angular.js web applications testing. Before we get into details of Protractor, let’s quickly look at Angular.js.  

To know Angular.js, we must know HTML, CSS and JavaScript. If you have followed my earlier post on BDD then that will help to understand the Angular.js and Protractor.

Typical webserver request – response is as given below -

 

However, the request response will load the network with heavy traffic and will result in slow websites. The solution is instead of requesting for every time for each user action; add little functionality on client side. To achieve this we have JavaScript and one of the client sides JavaScript framework is Angular.js. This way we can have interactive and fast responding webpages.

 

Above diagram simplifies the concept of fast responding web page. Within HTML pages where ever it finds directive (marker of html tag) it tells Angular to run or reference java script code. I need to stop Angular.js here as we are interested to know Protractor.

 However if you are more interested in Angular then please take a free course on Angular.js -

https://www.codeschool.com/search?loc=hero&query=angular

Now let’s move on to Protractor. As we discussed in the beginning, Protractor is an open source end to end testing framework. It will test how users will see the web application, is the communication right between backend and front end etc. This is BDD with more of a white box testing. So as shown in below diagram we will use Cucumber to write high level scenarios. These scenarios will be further using Protractor tests. Protractor tests will then send requests to Selenium server. Selenium server controls the local browser.  

Cucumber

|

  Protractor

          |

Webdriver (Selenium)

|

AngularJS App

Protractor needs following files

          1.  Spec file

          2.  Configuration file

Protractor communicates with Angular.js and waits for browser to finish the task. Hence Protractor does not need to wait or sleep. This makes it most optimized approach for automation.

Protractor allows tests to be organized based on Cucumber, thus allowing you to write both unit and functional tests on Cucumber as discussed in my previous post.

We can use Protractor on real browsers (Chrome, Firefox, and IE etc.) and headless browsers. For Protractor we need to have Selenium standalone server.

Protractor is useful if you want to test end to end however if anything fails during end to end tests, it is difficult to debug and find the issue.  

Protractor basic code is available at-

http://www.protractortest.org/#/