Automation on AngularJs apps using Protractor

Hey folks! we are going to see about Protractor for AngularJS apps, I will try to keep it simple but also informative to get started with Protractor right away.

Using Protractor for past 1 year, and had a good experience working in Js World.

This blog post will have 3 different sections,

  • What is Angular Js?
  • Protractor and WebDriverJs
  • Example setup using Protractor

Angular Js

While its not needed to explain about AngularJs here as a part of this blog post, when you have n number of resources in the web. I will just add a short note just to keep it at one place for the reader’s pleasure.

AngularJs is a JavaScript framework.

  • It lets you to use HTML as your custom designed language to express your apps component.
  • It’s an enhanced version of HTML with AngularJs related attributes. These attributes are called as ng-directive.
  • (ng)Directives are pointers on a DOM element that informs AngularJs compiler to execute certain behaviour to the DOM element.
  • ngDirective’s are prefixed with ng, it also allows the developers to customize their own directive.
  • It has Data Binding and Dependency Injection mechanism

example:

ng – click -> Specifies an expression to evaluate when an element is being clicked.
ng- app -> Defines the root element of an application.

List of directives are mentioned here and a good cheat sheet.

Angular starts parsing the DOM elements suing $compile service when the application bootstraps. More here on the official docs.

Angular is mostly used along the full stack development toolkit, MEAN. It comprises of MongoDB, Express, Angular and Nodejs

Assuming that, the above piece of information is helpful and got a fair understanding of what AngularJs, lets see how Protractor fits in for Angular.

Protractor and WebDriverJs

Protractor is made for AngularJs, you would have read this statement often, so what it really means,

  • Protractor waits for Angular to be bootstrapped
  • Protractor know the structure of Angular and its directive mechanism
  • Protractor knows the dependency injection of Angular.
  • Listens to the internals of Angular, $http and $timeout – helps determine when to proceed to next step.
  • Protractor provides Angular specific locators(that is ng-directives) ng-model, ng-options, ng-binding..

Protractor is built on top of Selenium-WebDriver Js and if you have already worked on selenium API before, Protractor would be easy to pick it up with minimal understanding of JavaScript.

Webdriver Js is completely asynchronous and based on Promises handled by Control Flow
I would leave it to the readers to have a look through and understand it, I would consider a separate blog post itself, if there are any request for it.

Protractor uses Jasmine-WebDriver which wraps around the Jasmine modules. Using Jasmine as a test framework would be an ideal choice.

Here is the typical workflow,

Protractor is a wrapper around WebDriver Js and its asynchronous. Your test scripts send commands to the Selenium Server, which in turn communicates with the browser driver.

Image from Protractor docs:

JsonWireProtocol communication happens between the server and the browser.

Lets see the difference between the WebDriverJs API and Protractor API

WebDriverJS API webdriver.By browser.findElement()
Protractor API by element()

Example setup of Protractor

To be able to run Protractor test, it depends on just two files, a configuration file and a spec file.

Go through this page it gives a good explanation about a spec file and config file. Nothing more is needed.

I have put together a simple Project for a new starter. Feel free to add in tests by sending in PR’s.
Link to repository.

Look out for posts relating to Protractor…!

Am a contributor the Protractor tool too..!!
List of my contributions to the tool

Leave a Comment

Website Protected by Spam Master