Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

End-to-End Automation Using ProtractorJS

DZone's Guide to

End-to-End Automation Using ProtractorJS

Learn to set up and write tests with Protractor, an end-to-end testing automation framework for AngularJS applications.

· DevOps Zone
Free Resource

Download “The DevOps Journey - From Waterfall to Continuous Delivery” to learn learn about the importance of integrating automated testing into the DevOps workflow, brought to you in partnership with Sauce Labs.

Protractor is a promising end-to-end automation framework for AngularJS-based applications. Protractor runs tests against an application in a real web-based browser, interacting with it like a user would.

How Can Protractor Be Leveraged for Automation of AngularJS Applications?

  1. Test like a user: Protractor is built on top of WebDriverJS, which uses native events and a browser specific driver to interact with your application as users would normally do.
  2. For Angular JS apps: Protractor supports Angular-specific locator strategies which allow you 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 to, such as Mocha, Cucumber, Chai, etc. It can be easily leveraged to build BDD (Behavioural Data Driven) frameworks. Protractor by default uses Jasmine as its test runner.

Installing Protractor on Your System

Step 1: You need to have NPM (Node Package Manager) installed on 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 will 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 a request 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 the 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

Setting Up

Now let’s hop on to the coding part. Now you can start coding your test scenarios using Protractor.

  1. For Protractor to run, it needs two pieces of information: the desired configuration for running the test scenarios, and the test suites or the test cases. To categorize, we will have 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.

Creating a Test

Protractor runs on top of Selenium and that's why it provides all the benefits of Selenium already. However, what makes ProtractorJS the best automation tool for AngularJS applications is its capability to work specifically with Protractor directives.

The commands customized 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('<url>');

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

  it(‘Should click on button business clean’, function(){
    console.log(‘executed — Click 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(‘executed — Insert 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.

Discover how to optimize your DevOps workflows with our cloud-based automated testing infrastructure, brought to you in partnership with Sauce Labs

Topics:
devops ,automation ,javascript ,software testing ,protractor ,tutorial

Published at DZone with permission of Soumyajit Basu. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}