Get­ting Started with Pro­trac­tor

Pro­trac­tor is an end-to-end test frame­work for An­gu­lar and An­gu­larJS ap­pli­ca­tions. It can run tests for your ap­pli­ca­tions in a real browser, by in­ter­act­ing with it is as a real user.

OpenSource For You - - Developers -

Be­fore get­ting started with Pro­trac­tor, you must know why you are go­ing to use it. An­gu­lar ap­pli­ca­tions have a lot run­ning in the back­ground with­out any vis­i­ble be­hav­iour change in the browser, which makes it dif­fi­cult for Se­le­nium to un­der­stand and syn­chro­nise them. Thus, scripts writ­ten in Se­le­nium have clumsy waits and sleeps. Pro­trac­tor was made by the peo­ple who cre­ated An­gu­lar. It was de­vel­oped to cap­ture this hid­den back­ground be­hav­iour and to test An­gu­lar ap­pli­ca­tions.


Pro­trac­tor is an end-to-end test frame­work for An­gu­larJS ap­pli­ca­tions. It is a wrap­per around We­bDriverJS and sup­ports be­hav­iour-driven de­vel­op­ment frame­works. It acts as an ab­strac­tion layer to au­to­mate write and ex­e­cute eas­ily for An­gu­lar and An­gu­larJS ap­pli­ca­tions. It is used to test whether the flow of an An­gu­larJS ap­pli­ca­tion is as de­signed from start to end, based on the sys­tem de­pen­den­cies or en­vi­ron­ment. It is in­tended not only to test An­gu­larJS ap­pli­ca­tions but also to write au­to­mated re­gres­sion tests for nor­mal Web ap­pli­ca­tions.

When and where to use it

An­gu­larJS ap­pli­ca­tions have some ex­tra HTML at­tributes like ng-re­peater, ng-con­troller, ng-model, etc, which are not in­cluded in Se­le­nium lo­ca­tors. Se­le­nium is not able to iden­tify these Web el­e­ments us­ing its own code. Pro­trac­tor on the top of Se­le­nium can han­dle and con­trol these at­tributes in Web ap­pli­ca­tions. Ba­si­cally, Pro­trac­tor was de­vel­oped for only An­gu­lar ap­pli­ca­tions but has now been en­hanced to sup­port non-An­gu­lar ap­pli­ca­tions also.

Process flow

The work­flow of Pro­trac­tor is quite easy. It just needs two files conf.js and spec.js. The first file pro­vides all that’s re­lated to the con­fig­u­ra­tion, while spec.js is a file that spec­i­fies how and where the test should run.

The high-level work­flow in Fig­ure 1 shows how the com­bi­na­tion of conf.js and spec.js is used by the Pro­trac­tor run­ner class to ex­e­cute the test. It is then run by the Se­le­nium server in the browser, as spec­i­fied in the spec.js file.

Fig­ure 2 de­picts the interaction of Pro­trac­tor with An­gu­larJS.


Pro­trac­tor has no pre­req­ui­sites ex­cept for the knowl­edge of JavaScript, which plays a very sig­nif­i­cant role in Web de­vel­op­ment be­cause it’s the only lan­guage browsers un­der­stand. If you al­ready know An­gu­lar, that is an added ad­van­tage.


The setup is very easy and straight­for­ward. Here is a list of what you need to in­stall.

1. Node.js

2. Pro­trac­tor

Step 1: In­stalling Node.js

Go to and down­load npm which comes with Node.js.

In­stall npm in your sys­tem.

After com­plet­ing the in­stal­la­tion, use the com­mand prompt to en­ter the com­mand:

npm -v.

If npm is in­stalled suc­cess­fully, this com­mand will give you the ver­sion of npm.

To check the ver­sion of Node, en­ter the com­mand:

node –ver­sion or node -v.

Step 2: In­stalling Pro­trac­tor

Open the com­mand prompt and en­ter the com­mand:

npm in­stall -g pro­trac­tor.

This will in­stall Pro­trac­tor with Jas­mine and the web­driver-man­ager. By de­fault, Pro­trac­tor uses the Jas­mine test frame­work for its test­ing in­ter­face. The web­driver-man­ager is a helper tool to eas­ily get an in­stance of a run­ning Se­le­nium server

After Pro­trac­tor is in­stalled, up­date the web­driver­man­ager with the com­mand: web­driver-man­ager up­date …and then start it by us­ing the com­mand: web­driver-man­ager start. Us­ing Pro­trac­tor for An­gu­larJS Let’s start by cre­at­ing a new folder with any name or lo­ca­tion of your choice. In that folder, cre­ate the fol­low­ing two files:

conf.js spec.js

spec.js and conf.js will store the spec­i­fi­ca­tions and con­fig­u­ra­tions re­spec­tively, for ex­e­cu­tion.

conf.js: This is the file in which we de­fine/con­fig­ure the de­tails of the frame­work, Se­le­nium, specs, script time­outs, On­pre­pare() func­tions, ca­pa­bil­i­ties, and re­ports. As soon as Run starts, Pro­trac­tor looks for this file first and tries to ex­e­cute the code writ­ten in that file. It spec­i­fies that we should use Jas­mine for the test frame­work. It will use the de­faults for all other con­fig­u­ra­tions. Chrome is the de­fault browser.

Your conf.js file will con­tain some­thing like what fol­lows:

ex­ports.con­fig = { frame­work: ‘jas­mine’, se­le­ni­umAd­dress: ‘http://lo­cal­host:4444/wd/hub’, specs: [‘spec.js’]


spec.js: spec.js is a file in which you de­fine how Jas­mine, a be­hav­iour-driven de­vel­op­ment frame­work for test­ing JavaScript code, works. spec.js mainly con­tains two func­tions: de­scribe() and it(). de­scribe() is used to de­scribe an ac­tion. It() sim­ply con­tain ac­tual tests with logic to run.

Specs are de­fined by call­ing the global Jas­mine func­tion it(), which, like de­scribe(), takes a string and a func­tion. The string is the ti­tle of the spec and the func­tion is the spec, or test. A spec con­tains one or more ex­pec­ta­tions that test the state of the code. An ex­pec­ta­tion in Jas­mine is an as­ser­tion that is ei­ther true or false. A spec with all true ex­pec­ta­tions is a pass­ing spec. A spec with one or more false ex­pec­ta­tions is a fail­ing spec.

Here is a sam­ple for­mat of spec.js:

de­scribe(‘Pro­trac­tor Demo App’, func­tion() { it(ti­tle of your choice’, func­tion() { browser.get(‘­trac­tor-demo/’); ex­pect(browser.getTi­tle()).toEqual(‘ti­tle of the web­page’);



Us­ing Pro­trac­tor for non-An­gu­larJS ap­pli­ca­tions

Pro­trac­tor is ma­jorly used for cre­at­ing tests for An­gu­lar ap­pli­ca­tions. How­ever, sup­port is avail­able for non-An­gu­lar pages as well. To use Pro­trac­tor for non-An­gu­larJS ap­pli­ca­tions:

1. Use browser.driver in­stead of driver

2. Use browser.driver.ig­noreSyn­chro­niza­tion = true

3. Use browser.wait­ForAn­gu­larEn­abled(true)

Why should we use a dif­fer­ent method for nonAn­gu­larJS ap­pli­ca­tions? In An­gu­lar ap­pli­ca­tions, Pro­trac­tor starts when the whole An­gu­lar con­tent gets loaded on the Web page. The rea­son we use the dif­fer­ent meth­ods is that Pro­trac­tor should not wait for the An­gu­lar com­po­nents to load com­pletely. How­ever, since our pages are nonAn­gu­lar, Pro­trac­tor keeps wait­ing for An­gu­lar to load till the test fails with a time­out. So, we need to ex­plic­itly tell Pro­trac­tor not to wait for An­gu­lar.

By us­ing browser.driver, we tell it that there is no An­gu­lar con­tent to be loaded. So the test should run. browser.driver.ig­noreSyn­chro­niza­tion = true forces Pro­trac­tor not to wait for An­gu­lar to load and fin­ish its tasks. browser.wait­ForAn­gu­larEn­abled(true) is used when you want to load an An­gu­lar ap­pli­ca­tion after load­ing a nonAn­gu­lar ap­pli­ca­tion. After ex­e­cut­ing this line, it will wait for An­gu­lar con­tent to be loaded and start ex­e­cu­tion.

Here is a sim­ple snap­shot of what a non-An­gu­lar test case will look like:

browser.ig­noreSyn­chro­niza­tion=true; browser.driver.get(‘https://yourNonAn­gu­larAp­pli­ca­tionLink’); el­e­ment(‘user­name’)).sendKeys(‘ab’); el­e­ment(‘pass­word’)).sendKeys(‘1234’); el­e­ment(‘clickme’)).click();b browser.wait­ForAn­gu­larEn­abled(true); browser.get(‘https://yourAn­gu­larAp­pli­ca­tionLink’);

By: Astha Sri­vas­tava

The au­thor is a soft­ware de­vel­oper. Her ar­eas of ex­per­tise are C, C++, C#, Java, JavaScript, HTML and ASP.NET. She has re­cently started work­ing on the ba­sics of ar­ti­fi­cial in­tel­li­gence. She can be reached at

Fig­ure 3: In­stal­la­tion

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.