grunt and protractor: for beginners

Small app using protractor and grunt, available for free on github with install instructions.


I created a demo github testing repository, wanted to go with protractor for angular website.

After putting the code together, I started looking for a huge angular website for writing test cases and getting to work. Surprise. With all this fuss, there really aren’t so much websites using angular. There are few, but not as much as their competition.

I decided to go with protractor’s API. It has a demo on pretty much most of the Angular’s development features, so we can use this website as testing point (if I’ll find any bugs, I’ll point it out)
For a first lesson, I’ve set a git repository, with protractor 5.1.1 with grunt and a JSON reporter.
In order to get started, feel free to get the repo, and install it.

#initialise git, and get project

$ git init
$ git pull

#install dependencies

$ npm install -g Protractor
$ npm install -g grunt
$ npm install

#run project

$ grunt e2e

Basically, this project does not do much yet, for the first lesson but it will do for future lessons.

Protractor docs can be found here.
Grunt docs can be found here.


Why I Grunt over gulp or webpack?

Grunt is great for simple built in tasks. (one way or another using any runner you can get the job done)
Grunt is easier to learn (it takes about 5 lines of code before is up and running.
Grunt has a bigger community (if you don’t believe me, go and check their github).

Why I choosed Protractor over nightwatch or vanilla selenium ?

Progractor is integrated with webdriver (it gives me Selenium)
protractor knows to wait until Angular finishes rendering DOM (basically the technologies are communicating with each other and Javascript tells protractor that it finished, it can continue with queue tasks)

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.