Automated Testing With Protractor Upon Angularjs Application

  • Cubettech
  • Angular
  • 9 years ago

Automated Testing With Protractor Upon Angularjs ApplicationWhy Protractor ?

Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would. Protractor supports Angular-specific locator strategies, which allows you to test Angular-specific elements without any setup effort on your part. You no longer need to add waits and sleeps to your test. Protractor can automatically execute the next step in your test the moment the webpage finishes pending tasks, so you don’t have to worry about waiting for your test and webpage to sync.

Features of the Protractor Automation tool:

  1. Built on the top of WebdriverJS and Selenium server
  2. Introduced new simple syntax to write tests
  3. Allows running tests targeting remote addresses
  4. Can take advantage of Selenium grid to run multiple browsers at once
  5. Can use Jasmine or Mocha to write test suites

Setting up protractor

Protractor requires Node.js, Selenium and a testing framework such as Jasmine to be installed on your computer and protractor provides a nice wrapper around WebDriverJS, the JavaScript bindings for Selenium Webdriver, to run tests against an AngularJS application running live in a browser.

Step 1: Install the command line tools ‘protractor’ and ‘webdriver-manager’ using npm:

npm install –g protractor

Step 2: If you don’t have the Selenium server on your machine, then download the latest version onto your machine. The following command used for Start up an instance of a selenium server:

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running

webdriver-manager update

Now start up a server with:

webdriver-manager start

Verify Installation

To verify your installation, please type in the command

Protractor –version

If Protractor is installed successfully then the system will display the installed version. Otherwise, you will have to recheck the installation.

NOTE : – There is an important thing is to make sure that your selenium server is running.


Open a new command line or terminal window and create a clean folder for testing.

Protractor needs two files to run, a spec file and a configuration file.

Test folder

  • conf.js
  • spec.js

Step 1 : Creating the conf.js file in your folder.

The configuration file tells Protractor how to set up the Selenium Server, which tests to run, how to set up the browsers(multiple browser setting option can provide and run in order to a sequence manner at  single run), and which test framework to use. The configuration file can also include one or more global settings.

exports.config = { allScriptsTimeout: 99999, seleniumAddress: 'http://localhost:4444/wd/hub', pecs: ['spec.js'], // Options to be passed to Jasmine-node. jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, isVerbose: true, includeStackTrace: true }, multiCapabilities: [{ //browserName: 'firefox'  // uncomment this for testing in firefox. }, { browserName: 'chrome' }] }

The above code will test your application in both the bower one after another and return the result very quickly.

 Step 2 : Creating the spec.js file .

Protractor tests are written using the syntax of your test framework, for example Jasmine, and the Protractor API.

describe('angularjs homepage', function() {  it('should greet the named user', function() {    // Load the AngularJS homepage.    browser.get(''); // Line : 1    // Find the element with ng-model matching 'yourName' - this will    // find the  element - and then    // type 'Julie' into it.    element(by.model('yourName')).sendKeys(‘jenson’); // Line :2    // Find the element with binding matching 'yourName' - this will    // find the

Hello {{yourName}}!

 element.    var greeting = element(by.binding('yourName')); // Line 3    // Assert that the text element has the expected value.    // Protractor patches 'expect' to understand promises.    expect(greeting.getText()).toEqual('Hello jenson!'); // Line 4  }); });

Run the test: Start the test with the command:

protractor conf.js

Flow of execution above test code Config.js executed when doing the Run the test part which is above given already, as a result of this browser will open and starting the functionalities want to check which is given in spec.js file.

spec.js file describes the following functionalities to test:

Line 1 : This code is specifying that which project want to test with your protractor application, here I illustrated an example of angular js functionality in,thus you can give your application URL.

Line 2 :  The page contain a textbox with the ng-model name of your Name. so here i want to insert my name to that text box after open the site. This can be performed by this code of execution.

Line 3 : Here the greeting variable give the full information about the text which is inserted to the text box.

Line 4 : Finally want to confirm the text inserted is displaying in the same page below to the text box provided. This can be check by this line of code.


Test Result:

[chrome #2] Finished in 12.041 seconds [chrome #2] 1 test, 1 assertion, 0 failures

After the successful execution of protractor test you will get the result like this.

Change the spec.js file code to

expect(greeting.getText()).toEqual('Hello kavya!'); // Line 4 save this spec.js and run your test again will get the result like below [chrome #2] angularjs homepage [chrome #2]   should greet the named user - fail [chrome #2] Failures: [chrome #2]   1) angularjs homepage should greet the named user [chrome #2]    Message: [chrome #2]    Expected 'Hello jenson!' to equal 'Hello kavya!'. //  EXPECTED VALUE IN TEXTBOX [chrome #2]    Stacktrace: [chrome #2]      Error: Failed expectation [chrome #2]     at [object Object].<anonymous> (/home/dev241/projects/protracter/test/spec2.js:33:36) [chrome #2] [chrome #2] Finished in 7.636 seconds [chrome #2] 1 test, 1 assertion, 1 failure

This result will give you to correct value to be inserted to text box. So this will make the error tracing and on which line the error occurring

Note : – The execution of above protractor testing is very faster, so we can reduce the execution speed by the following code outside to the describe function in spec.js.

var origFn = browser.driver.controlFlow().execute; browser.driver.controlFlow().execute = function () { var args = arguments; // queue 100ms wait, function () { return protractor.promise.delayed(200);   // here we can adjust the execution speed }); return origFn.apply(browser.driver.controlFlow(), args); };

Protractor allows us to test our AngularJS applications in a consistent and automated way. We’re better able to make informed statements about the overall state and soundness of our AngularJS applications because of it. Protractor is an awesome tool to create and integrate end-to-end test in your applications, but remember that end-to-end is used with unit tests (more unit tests, less end-to-end tests).

Know More About This Topic from our Techies

Got a similar project idea?

Connect with us & let’s start the journey!

Questions about our products and services?

We're here to support you.

Staff augmentation is a flexible workforce strategy companies adopt to meet specific project needs or address skill gaps.

Begin your journey!
Need more help?