googleads
How To Find Elements Using Locators in Protractor | Angular Testing
preloder
Software Testing

Using Locators In Protractor – Automation Testing In Angular

Locators are used in end to end tests for webpages in finding DOM elements. It gets information about the current state of your application. We will have an overview of how you can use locators and perform the actions with Protractor in your Angular application. And we will see what are key advantages of using Protractor over selenium.

We will discuss the different types of locators in both protractor and Selenium, the pros and cons, and find which are most suitable for angular and non-angular.

Let’s dive in. 

What is Protractor?

Protractor is an open source end to end testing framework used for Angular application. It was developed by Google to support Angular applications. It works as a solution integrator combining powerful tools and technologies such as Selenium, WebDriver, Mocha, Cucumber, and NodeJS. Now, It supports both Angular and Non- Angular applications.

Features of Protractor

  • Angular Specific locators
  • Extensibility
  • Supports IDE and Editors
  • Cross-browser
  • Headless Browser
  • Parallel execution
  • Reporting Plugins
  • Multiple Assertion libraries
  • Cloud testing platform

Common Locators between Protractor and Selenium

ID Locator

IDs are unique for each element. It is commonly used and the most reliable locator. ID locators are the fastest and considered the safest locators among other locators.

id = id of the element

Name Locator

Locating elements using Name is the same as locating elements using ID locator.

These are not unique on a page. If there are multiple elements with the same Name locator, then the first element on the page is selected. The test may fail if another element with the same Name locator is present on the web page or added by the developers in the later stages. 

Name = Name of the element

Class Name Locator

Class Name locator provides the element, which matches the values specified in the attribute name “class”.

Tag Name Locator

Tag Name locator is used to find the elements matching the specified Tag Name. It is very helpful when we want to extract the content within a Tag.

Link Text Locator

If there are multiple elements with the same link text, then the first one will be selected. This Link Text locator works only on links (hyperlinks).

Partial Link Text

In some situations, we may need to find links by a portion of the text in a Link Text element and contains. In such situations, we use Partial Link Text to locate elements.

CSS Selector Locator

CSS selector is the most preferred Locator that makes the execution of the script faster compared to the XPath locator. This locator is always the best way to locate elements on the page.

The following are some of the mainly used formats of CSS Selectors.

1. Tag and ID

2. Tag and Class

3. Tag and Attribute

4. Tag, Class, and Attribute

XPath Locator

XPath is designed to allow the navigation of XML documents, with the purpose of selecting individual elements, attributes, or some other part of an XML document for specific processing.  XPath produces reliable locators, but in performance wise it is slower (especially in IE older versions) compared to CSS Selector.

Syntax

Here is the basic Syntax you can use.

Take a look at the below syntax with contains.

An additional locator strategy specifically used only in Protractor for angular sites.

LocatorsSyntaxDescriptionExample
by.model()element(by.model

(‘person.name’)).click();

Locates the element by model attribute value given<p ng-bind=”person.name”></p>
by.binding()var eleName = element

(by.binding(‘person.name’))

;expect(eleName.getText()).

toBe(‘Robert’);

Binding locator is used to locate the element using bind attribute value given<p ng-bind=”person.name”></p>
by.exactBinding()expect(element

(by.exactBinding(‘person.name’))

.isPresent()).

toBe(true);

Same as ng-bind locator, But with exact string/value<p ng-bind=”person.name”></p>
by.buttonText()element(by.

buttonText

(‘Show Result’)).click();

It is used to locate an element using the text on button tag<button>Show Result</button>
by.partialButtonText()element

(by.buttonText

(‘Show’)).click();

Locates the element using the partial text present in the button<button>Show Result</button>
by.repeater()var eleID =

element(by.

repeater(‘product info’)

.row(0));

expect(eleID.getText())

.toBe(‘101’);

Repeater locator is used to locate the elements with ng-repeat attribute in it.<tr ng-repeat=”product info”>
<td>{{prod.id}}</td>
<td>{{prod.name}}</td>
<td>{{prod.quantity}}</td>
</tr>
by.exactRepeater()expect

(element

(by.exactRepeater

(’emp in employee_names’)).

isPresent()).

toBe(true);

Locates element with ng-repeat attribute with exact string present in it<li ng-repeat=”emp in employee_names”></li>
by.cssContainingText ()element

(by.cssContainingText

(‘.name’, ‘Mike’));

Locates the element with text in it using css selector<li class=”name”>Mike</li>
by.options()var allOptions

= element.all

(by.options

(‘options in list’));

expect(allOptions.count())

.toEqual(3);

Locates the element with ng-option attribute in it<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>

Protractor vs Selenium

We look into some of the basic pros and cons you should know about Protractor and Selenium.

ProtractorSelenium
Protractor supports automation testing for angular based web pages. But, it’s a wrapper for Web driver JSSelenium supports automation very well for all web-based applications as well as angular sites
It has certain advantages in case of an angular specific locator strategy. Provides more options to work with Angular directives (i.e. angular specific locator strategy)Works even if you are testing an Angular JS website, but the issue is with dealing with page synchronization issues.
It is compatible only with JavaScript/TypescriptSelenium code is compatible with 6 popular programming languages Python, C#, Java, Perl, PHP, Ruby

Conclusion

For Angular applications, Protractor does interact with a browser through the Selenium WebDriver. Protractor provides a really convenient API and has unique Angular-specific features like Angular specific element locating strategies. You should also note that Protractor is nothing but an extra layer on the top of Selenium to make testing Angular JS applications easier.

If you are interested in E2E testing, Get to know what it is in detail. Take a look at this article on Introduction To E2E Testing In Angular CLI Using Protractor.

Like to read and stay updated on Development technologies. Subscribe for the exclusive weekly newsletters.

Looking for a highly skilled Angular developer for your project? Agira Technologies offers an extensive service with experts in industries. Hire an Angular Developer now!

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
The following two tabs change content below.

Mercy Diana

She is an aspiring IT enthusiast with 8 years of experience in manual and automation testing. Presently, she is into automating the test cases and offers proficient Quality checks for web-based and Angular applications at Agira. She is a dancer who also loves to play badminton in her free hours.

Leave a Reply

Your email address will not be published. Required fields are marked *