Getting started with Protractor UI Elements

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]

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! 😀

References :

[1]https://www.udemy.com/course/protractor-tutorial
[2]https://www.seleniumeasy.com/protractor-angularjs-tutorials/using-locators-in-protractor-example
[3]https://riptutorial.com/protractor/example/32464/locator-basics
[4] https://www.seleniumeasy.com/protractor-angularjs-tutorials/using-locators-in-protractor-example


Knoldus-blog-footer-image

Written by 

Nearly 3 years of experience in automation testing, I call myself an automation enthusiast. I can create, execute automated test scripts using framework guidelines and best practices to ensure wider and efficient end-to-end automation coverage. Simultaneous experience in Defect tracking and bug reporting through JIRA

Leave a Reply