<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">
Go to top icon

Using Protractor for AngularJS Automation Testing

Kaveri Solapure Dec 06, 2017

selenium Automation testing AngularJS Protractor

Using protractor for angularjs automation testing.jpg

In our application, which is built using AngularJS, we required to write an automated script that is supposed to run on headless browser (without invoking browser).
However, Selenium locators were not able to find the elements in headless browser mode. Protractor comes to our rescue which supports locating extra HTML attributes such as ng-repeater, ng-controller, ng-model using headless browser- PhantomJS.

Protractor is an open source functional automation framework designed specifically for AngularJS web applications. This tool is a combination of technologies such as Jasmine, Selenium Webdriver, and Node.js etc. It’s a wrapper built on top of Selenium Webdriver and thus provides all the capabilities of Selenium along with many useful additions.

Protractor.png

Protractor is a NodeJS program, which is in JavaScript and runs with NodeJS to identify the web elements in AngularJS applications, and it uses WebDriver to control the browser with user actions.

Key features of Protractor:

  • Angular-specific locators:
At times when JavaScript size and complexity increase in application then it becomes difficult for test engineers to capture the web elements in AngularJS application using Selenium locators - by.id, by.class, by.name etc. Selenium code cannot identify locators such as ng-repeater, ng-controller, ng-model etc. whereas Protractor helps to locate the Angular elements: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.

  • Compact Syntax:

Selenium Webdriver:

Protractor2.png

Protractor:

Protractor3.png

Protractor’s global function helps to reduce the element locating syntax.

Following image explains the core of how to interact with the element and get information from it.

Protractor1.png

It has the ability to export a global function element, which takes a locator and will return an ElementFinder. This ElementFinder has a set of action methods, such as click(), getText (), sendKeys() etc. so on the basis of specified action methods it completes the execution of that method.

  • No need of adding ‘sleep’ or ‘wait’ manually
As documentation suggests: “It instructs WebDriver to wait until Angular has finished rendering and has no outstanding $http or $timeout calls before continuing. Note that Protractor automatically applies this command before every WebDriver action.”

In Selenium, to render web element sleep/wait statements are being included whereas in Protractor there is no need to add waits manually to your script and it will automatically wait for the web elements to load and only then executes the next steps.

Protractor4.png

Note that Protractor automatically applies this command before every WebDriver action.

I was impressed by the promise and performance of Protractor in real world and I recommend it for AngularJS application automation testing for everyone.

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.