Protractor for AngularJS in Automation Testing

fleekit

161
views

Protractor is an end-to-end testing framework, is an open source automation for Angular and AngularJS applications. Designed by Google developers.

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.

Architecture/Design of protractor with WebdriverJS:

Protractor-Architecture

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

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

Presentation1
Protractor vs. Selenium: Which is easier for testing?

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.

Open cmd and type below codes

npm install -g protractor

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

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). You need to focus on below highlighted part.

conf.js-image

// 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

Test Terminal

You can get below output to run above code:

code example

How to generate protractor reports with jasmine tests:

npm install protractor-beautiful-reporter –save–dev

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.

webdriver-manager start

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.

test result

Shivani is a competent and detail-oriented Software QA tester with a solid understanding of test planning, test management, execution, and defect tracking. She is well acquainted with Software development Life cycle (SDLC) and Software Test Life cycle (STLC).