ProtractorJS

Protractor Automation Tool Framework:

Protractor – A promising End-to-End automation framework for angular js based applications. Protractor runs test against an application in the real web based browser interacting with it like a user should do.

How can protractor be leveraged for automation of angular js applications?

  1. Test like a user: Protractor is built on top of WebDriverJs which uses native events and browser specific driver to interact with your application as user would normally do.
  2. For Angular JS apps: Protractor supports angular specific locator strategies which allows to test angular specific elements without any additional coding efforts.
  3. Automatic Waiting: Now this is a feature that is very well developed in the application framework. You no longer have to add waits and sleep to your test. Protractor can automatically execute the next step in your test the moment the webpage finishes the pending tasks, so you don’t have to worry about waiting for your test and webpage to sync.
  4. Compatibility with test runners: Protractor is compatible with any test runners it is configured too such as mocha, cucumber, chai etc. It can be easily leveraged to build BDD (Behavioural Data Driven) framework. Protractor by default uses Jasmine as its test runner.

Step-1 Installing protractor on your system

Step-1: You need to have npm (Node Package Manager) installed in your machine. npm will download and install the required packages and dependencies for protractor.

Step-2: To install protractor globally in your system you just type in npm install -g protractor. You will need sudo to be added before because protractor would be needing some additional file permissions to install the required package which would not be possible without sudoer’s permission.

This will install two command line tools within your system. The first one is the CLI for protractor and the second is the CLI for web driver manager. To ensue that protractor is installed in the system just type in protractor –version. This will indicate the latest version of protractor installed in your system. Web driver manager is a helper tool that will start an instance of the selenium server. Protractor will send request to to the selenium server which controls the local browser within the system. You can see the status of the selenium server from localhost:4444/wd/hub. The necessary binaries for web driver can be installed in your system by using web-driver manager update. Use web-driver start to start the selenium server. When you start your web driver manager it looks something like this.

Screen Shot 2016-05-13 at 1.46.50 pm

Step-2: Setting Up

Now let’s hope on to the coding part. How can you start coding your test scenarios using protractor.

  1. For protractor to run it needs two information, the desired configuration for running the test scenarios and the test suites or the test cases. So to categorise we will be having a Configuration file that will consist of the run configurations including the test runner and the HTML reporting and the specification file which will consist of the test specifications such as the test cases and the test suites.
  2. A test suite is specified using the “describe” function. A test case is specified using the “it” function. So one “describe” function can consist of numerous “it” functions. For example describe(‘suite name’, function(){ }) and it(‘test case’, function(){ }).
  3. Whatever configuration information is needed to be passed to protractor should be present within the exports.config={}.
  4. Basic parameters that needs to be configured in the configuration file includes a) seleniumAddress: This allows to provide a URL to the selenium server that protractor will use to execute tests. b) Specs: An array of specs file that can be sent to protractor to execute. The path of the test file must be relative to the config file. c) capabilities: Parameters can also be passed to protractor using the capabilities parameter. It should contain the browser against which protractor should run the test. d) framework: This can be used to set the test framework and assertions that should be used by Protractor. There are 3 options presently for for this parameter: Jasmine, Cucumber and Mocha. e)allScriptsTimeout: To set up a timeout for each test executed on Protractor.

All of the parameters are enclosed within a node object which should be named “config”. That way protractor will identify those parameters inside that object. For example

exports.config={
 //Test runner is Jasmine
 framework:'jasmine2',

//Specify selenium server configurations
 seleniumAddress:'http://localhost:4444/wd/hub',

//Run multiple suites under specs
 specs:[
  '/Users/soumyajit/Documents/ProtractorSampleScript/ProtractorTestSuites/HomePage/*_Specification.js',
  '/Users/soumyajit/Documents/ProtractorSampleScript/ProtractorTestSuites/BusinessClean/*_Specification.js'
 ],

//Run test on a single browser
 capabilities:{
    browserName: 'chrome'
 },

//Provide jasmine configurations for default test run time and actual stack trace
 jasmineNodeOpts: {
    defaultTimeoutInterval: 60000,
    includeStackTrace: true
 }

};

To run the config file we need to simply run the command protractor config.js as parameter. Protractor will run the following instructions passed in the config file.

Step-3: Creating a test

Protractor runs on top of Selenium and thats why it provides all the benefits of Selenium already. However what makes protractor js the best automation tool for angular js applications is its capability to work specifically with protractor directives.

The commands customised by Protractor aim to catch the elements of the applications interface through AngularJs directives. AngularJS uses some specific techniques to manipulate the Document Object Model (DOM), by inserting or extracting information from the HTML. For instance, ng-model is used to input data, binding is used to show data in the DOM and ng-repeat is used to show the information from the HTML of the javascript list in your AngularJS code. To capture an element in the UI that contains an ng-model for example, Protractor provides the command by.model(“name”). Using this command the framework gets a WebElement that contains the ng-model directive with the value “name“.

Global variables used when creating a test

Protractor exports these global variables to your spec (test) file:

  • browser – A wrapper around an instance of WebDriver, used for navigation and page-wide information. The browser.get method loads a page. Protractor expects Angular to be present on a page, so it will throw an error if the page it is attempting to load does not contain the Angular library. (If you need to interact with a non-Angular page, you may access the wrapped web driver instance directly with browser.driver.
  • element – A helper function for finding and interacting with DOM elements on the page you are testing. The element function searches for an element on the page. It requires one parameter, a locator strategy for locating the element.
  • by – A collection of element locator strategies. For example, elements can be found by CSS selector, by ID, or by the attribute they are bound to with ng-model.

A sample code block for the respective specification is given as follows

describe('Business Clean',function(){
 browser.ignoreSynchronization = true;
 browser.get('https://aries-dev.herokuapp.com

beforeEach(function(){
 browser.sleep(5000);
 })

it('Should click on button business clean', function(){
   console.log('executedClick on Business Clean');
   var locator_businessclean = element(by.css('[ng-click="onBusinessCleanSelect()"]'));
   browser.sleep(2000);
   locator_businessclean.click();
 });

it('Should insert zip code', function(){
   console.log('executedInsert zip code');
   var locator_zipcode1 = element(by.model('zipcode
   browser.sleep(2000);
   locator_zipcode1.sendKeys('30004');
 });

The required code is given in the following github link