Getting started with Protractor UI Elements

Table of contents

Reading Time: 2 minutes

You must have recalled from my previous blog how and why protractor turns out to be the most trending testing tool in the market.

With the acceleration of java Script frameworks like Angular, protractor takes a fine threshold in points of stability, reliability, Performance, and Code complexity.

To perform end-to-end testing, protractor uses different locator strategies to locate web elements
Let’s get started with the handling the UI and understanding the objects.

Getting started with Global Variables :

Everything is a java Script file in protractor. Different locators are used to finding the elements on the web page, similar to the selenium web driver.
Most frequently global variables that are used to find the DOM elements are as follows-

by.css(‘located element’)
by.model(‘located element’)

Here, By is class or collection of element locator strategies and element searches for an element on the web page
Locators are commonly used instructions or information that tells protractor ^[2]

	model : element is located by model attribute value
	<input type="text" ng-model="person.lastname">
	element(by.model('person.lastname’)).click();

	binding : element is located using bind attribute vakue given
	<p ng-bind="person.lastname"></p>
	var eleName = element(by.binding('person.lastname'));
	expect(eleName.getText()).toBe('Robert');

	exactBinding : similar to binding, however it has exact string value.
	<p ng-bind="person.lastname"></p>
	expect(element(by.exactBinding('person.lastname')).isPresent()).toBe(true);

	buttonText: retrieves the value for button text of HTML and can ve used directly in locator
	<button>Submit</button>
	element(by.buttonText('Submit')).click();

	repeater: element is located by ng-repeat attribute value
	<tr ng-repeat="product info">
	<td>{{prod.id}}</td>
	<td>{{prod.name}}</td>
	<td>{{prod.quantity}}</td>
	</tr>
	var eleID = element(by.repeater('product info').row(0));
	expect(eleID.getText()).toBe('1001');
	var eleName = element(by.repeater('product info').row(1));
	expect(eleName.getText()).toBe('John');

	Options: element is located by ng-option attribute value
	<select ng-options="options in list">
	<option value="0">Option 1</option>
	<option value="1">Option 2</option>
	<option value="2">Option 3</option>
	</select>
	var allOptions = element.all(by.options('options in list'));
	expect(allOptions.count()).toEqual(3);

	addLocator: custom locators can be made with the helpo of this and can be added to configuration file if needed. These are the instance of ProtractorBy
	by.addLocator('buttonTextExample', function(buttonText, opt_parentElement, opt_rootSelector)
	{ var using = opt_parentElement \|\| document,
	buttons = using.querySelectorAll(‘button’);
	// Return an array of buttons with the text.
	return Array.prototype.filter.call(buttons, function(button) {
	return button.textContent === buttonText; }); });

view raw Protractor Locators hosted with ❤ by GitHub

Practical Example

For demo purpose let’s use https://juliemr.github.io/protractor-demo/

Here, two text boxes are elements of the page
There is operand drop down which also represents and element.

Go button is also one of the common elements
Similarly, there are many more text elements.

Process: click on any of the text boxes and right-click to find the Inspect option. Click on the inspection to make the locator.

Locator format for the above first text box is as follows :-
<input ng-model=”first” type=”text” class=”input-small ng-pristine ng-untouched ng-valid”>
element(by.model(“first”)).sendKeys(“4”);

Locator format for the above second second box is as follows :-
<input ng-model=”second” type=”text” class=”input-small ng-pristine ng-untouched ng-valid”>
element(by.model(“second”)).sendKeys(“5”);

Locator format for ‘Go’ button is :-
<button ng-click=”doAddition()” id=”gobutton” class=”btn”>Go!</button>
element(by.id(“gobutton”)).click();

Sometimes a locator might point to multiple elements, in that case element will return the first one found. It starts scaning from the upper left corner and locates to the first element.

Multiple elements can also be located! For example, if there is a requirement to find the count of similar elements, element.all can be used.

Chain locators

In case of complex applications, locators can be chained together to select an element. For example,
element(by.repeater('food in foods').element(by.linkText('Eat pizza in Dominoz');
Here, there is no limit on the number of chains we are using, we will still receive a single ElementFinder.

So, Protractor provides a multiple ways to locate and element with an added advantage of making our locators!
In the next blog, we shall see how these locators are used in actual script with Introduction to Jasmine.
Stay tuned! 😀