Protractor for AngularJS in Automation Testing

Protractor is an end-to-end testing framework, is an open source automation for Angular and AngularJS applications. It is designed by Google developers on the top of webdriverJS for node.js program. It tests your application running in a real world browser that interacts with its users. It extends webdriverJS functionalities on web applications to enable automation of useractions.

“End-to-End Testing” is a methodology which is used to test the flow of application from start to end or verify the use-cases and user scenario of the application.

“AngularJS” is an open-source framework to build for front-end applications for the web. It is a javascript based framework maintained by Google. It is referred to as Angular 1.

“Node.js” is an open source application to develop networking applications on the server-side. It is written in javascript and allows you to run on a server.

“WebdriverJS” is an implementation of selenium javascript binding for selenium webdriver API and interacts with browser elements. Protractor is a wrapper over WebdriverJS. It has more functionalities so it will handle angularJS elements.

How protractor works:  Before performs any action on the browsers, the protractor runs some extra commands to ensure application has stabilized.

• /session/:sessionId/execute_async: protractor tells browser to run a snippet of JS.
• /session/:sessionId/element: Command to find element is sent.
• /session/:sessionId/element/:id/click:  Command to perform click action is sent.

1. Test Scripts send commands to the selenium server means test scripts can communicate directly with Chrome Driver or Firefox Driver.

Example: element(by.buttonText(‘Submit’)).click();

1. On execution, test commands go to selenium server. Server interprets these commands.
2. Selenium server interacts with drivers of browsers.
   1. After interpretations, servers send commands to browser drivers.
   2. Communication between server and browser through JSON wire protocol.
3. Browsers Drivers interact with applications on real world browsers.
   1. Commands are interpreted by browser drivers and executed on application runs on real browser.

Protractor vs. Selenium: Which is easier for testing?

• Selenium’s performance is faster in normal/web applications and Protractor’s performance is faster in angular application.
• Selenium can be used to automate any technology based application that needs a browser whereas protractor is specially used for automating angular application.
• In selenium we use implicit wait to load the webpage whereas we don’t need to use implicit wait to load the webpage in protractor.
• Selenium supports locator strategies for all types of web/browser applications whereas Protractor supports all types of locator strategies supported by selenium extra angular specific locator strategies.

To create first test case in Protractor: 

For the basic program use visual studio code IDE. To run the code below, you will need to have Node.js and selenium installed and download the protractor package using npm.

• Use npm to install Protractor globally:

Open cmd and type below codes

npm install -g protractor

• The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running (optional step). 

webdriver-manager update   // After protractor is installed, webdriver manager needs to be updated to latest version.

webdriver-manager start   //webdriver need to run in background

• Use Jasmine framework in Protractor

1. Jasmine is basically a javascript framework which supports a behaviour-driven JS approach.
2. We create a test(specs) file to run protractor and write our actual test code. This file contains logic and locator to interact with application.
3. describe and it-> Both are used in jasmine framework. “describe” is used for the end to end flow of our test case or test suites and “it” is used to contain the test scenario. One “describe” can also contain multiple “it” blocks.
4. expect-> it works as an assertion for comparing the expected and actual value just like assert works in selenium.
5. Different types of locator used ex- by.css, by.id , by.name , by.model etc

Locators are passed to elements function to find DOM elements.

// hello.js(specs file)

describe('Protractor Demo Application', function() {

      it('addition tests', function()){

      browser.get('http://juliemr.github.io/protractor-demo/')   //open link in browser

browser.manage().window().maximize(); //maximize the window

    element(by.model(’first’)).sendKeys(“2”) //by.model is a find element with ng-model and sendkeys for enter value in textfield.   

     element(by.model(‘second’)).sendKeys(“3”)

     element(by.css(‘[ng-click=”doAddition()”]’)).click()  //by.css for css selector

     let result = element(by.cssContainingText(‘ .ng-binding’, ‘5’))

   expect(result.getText()).toEqual('5')

     brower.sleep(2000);

});

• Under conf folder we create conf.js, basically a configuration file.

In this file we have to specify the browser name and specs file location(means test cases location).

// conf.js

 exports.config = {

      directConnect: true,

      capabilities: {

          ‘browserName’ : ‘chrome’

} , 

  framework: ‘jasmine’ ,

  specs: [‘..//tests//hello.js’]  (you can copy test case path accordingly)

};

• Run the tests in terminal with:   protractor .\conf\conf.js

How to generate protractor reports with jasmine tests:

1. Open cmd and the type the code:

npm install protractor-beautiful-reporter –save–dev

1. Open protractor conf.js file and add below code:

     var HtmlReporter = require('protractor-beautiful-reporter');

export.config= {

//your config code……..

onPrepare: function() {

// Add a screenshot reporter and store screenshots to `/Reports/screenshots`:

jasmine.getEnv().addReporter(new HtmlReporter({

      baseDirectory: 'Reports/screenshots'

      }).getJasmine2Reporter());

   }

As per the above code, screenshots will be generated in “/Reports/screenshots” directory.

1. Start your webdriver manager(if not hit/start in cmd):

webdriver-manager start

1. Run your Protractor tests with the above config:

protractor .\conf\conf.js

After execution, the screenshot will be generated as JSON and PNG files for each test. Open the file name report.html which is under Report/screenshots folder to view the report.