What is Protractor and relevant description

Protractor is known mostly for end 2 end testing, as an open source automation framework that was designed by Google for Angularjs applications.

Protractor is an end to end framework that tests your application just like a user would. You can build the tests around your tests cases. What happens if an user clicks a specific button? What is the next step? What happens if a user adds a negative value into a field? Is an error shown? Does it goes to the next step ? If you have the tests cases, or the business logic in a document, you can write tests around that. The recommended way when coding end to end tests, is to write tests around the functionality.

Protractor it was released in July 2013 as a prototype for Angular JS testing framework. Later it evolved in what we currently know as protractor.

Protractor is a wrapper build around Selenium with webdriverio.
It supports angular specific locators (for example repeaters id’s, ng-click, ng-if etc)
It supports PageObjects (Page object represents an Object Pattern Design) – helps on writing more clean and readable code.
It can use the same Framework integration for unit and end to end tests.
It supports fast development (you do not need to use sleep or wait, because it communicates with Angular directly)
It is based on Angular’s concepts, therefore it’s quite easy to test your own code.

Basically, it’s a framework build with JavaScript bindings(you will still use selenium at the base) that communicates with Angular’s framework and knows when Angular has finished rendering the DOM. With Angular, mostly you do not need to set a specific wait time in order to wait for an element to be rendered.
Protractor (just like angular) works with promises and expects.
A promise in Protractor works just like a queue control. Of like a control flow if you will.

Expects – is something that protractor needs to get.
For example:
Expect “title” to be “Protractor tests”. But first, you have to get the element where the title is stored, then read the title.

element(by.tagName('h2')).getText().then(function(txt){
expect(txt).toMatch('Protracto tests');
});

Antother cleaner option to write this, can be as follows:

var myElement = element(by.tagName('h2'));
myElement.getText().then(function(txt){expect(txt).toMatch('Protracto tests'))});

You can easily improve the development flow using runners and compilers. For example grunt. You can set grunt in order to run everytime you save the spec file.

For protractor you can use Jasmine or Mocha, Cucumber to write tests for BDD Behaviour Driven Development.
There is an integrations (not recommended) for headless testing with PhantomJS headless browser.
You can also use Karma for unit tests.

How can a newbie learn protractor? The best way to learn protractor is to do few tutorials. Then, dive a bit into JavaScript. You will need this, I promise you that. A very recommended way to learn JavaScript is through freecodecamp’s lessons.

Published by

Ed Llinac

JavaScript and programming enthusiast. I love automating this, and I love make this do themselves. With the expertise gained over the years I can help seeing the bigger picture.