Complete Guide To Selenium Locators In Protractor (Examples)

While testing the functionality for your website, especially web elements such as radio button, text boxes, drop-down, etc., you need to make sure that you are able to access these elements. Selenium locators serve this exact purpose, by using this command we can identify these web elements, DOM (Document Object Model), to perform Selenium through our scripts.

These Selenium locators are vital for scripting as if they’re wrong, your automation scripts won’t work. Thus your Selenium test automation efforts rely on these Selenium locators in any testing framework. Protractor, an Angular JS framework, has many Selenium locators that can be identified by using a specific By method during runtime.

In this protractor testing tutorial, we will discuss the Selenium locators in Protractor in-depth and how we can use locators to interact with the application and fetch the current running state. So, let’s get started.

Automate Your Cross Browser Testing With Protractor & Selenium

What Is The Importance Of Selenium Locators In Protractor?

Let’s start our protractor testing tutorial by discussing various features that should be kept in mind when choosing a locator with respect to its performance. The Selenium locators in protractor have proven to be good and reliable in most scenarios. Some of the features that it provides are:

1. Good Readability :
The Selenium locators in the protractor are easily readable and accessible. The locators offer enough flexibility to the test code by making it accessible to the user.

2. Less Maintenance :

• The Selenium locators in protractors are developed in an optimized manner and hence, they require less maintenance overhead.
• The structure of the locator is designed in a great fashion so that there is no need to update the locator even when there is a change in the location of the element. It requires modification only if there is any change in the functionality of the web application.

3. Improved Speed :
This is one of the most important properties of the Selenium locators as this feature determines the performance of the web application. The Selenium locators in the protractor have a unique id which makes them relatively faster than other Selenium locators. Sometimes, the speed of locating an element is also dependent on the internal processing speed of the browsers.

The Objective of Selenium Locators in Protractor

Moving on with our protractor testing tutorial, we’ll discuss the importance of Selenium locators. The important point to remember in order to write good end to end tests in Protractor is discovering the proper Document Object Model (DOM) elements for the web pages. It tends to globally export the locator factories through the instantiated objects. Since the protractor is built upon Selenium interfaces, the Selenium locators in the protractor are quite comparable and similar to the ones associated with Selenium WebDriver. Therefore, it’s interesting to know that the framework supports Selenium locators in protractors as well along with its own.

Working of Selenium Locators in Protractor

Next, in this protractor testing tutorial, we’ll discuss how Selenium locators work in protractor. The way the locator functions in Protractor is by exporting a global function i.e. ‘element’, which inputs the locator and provides us with the ElementFinder in return.

The ElementFinder, on the other hand, offers a fundamental way to communicate with an element and get details about the same with various action methods such as getText(), click() and sendKeys(). These methods are quite popular and are used frequently when executing Selenium test automation.

The main purpose of the ‘element’ function is to locate a single element. To locate multiple elements, the ‘element.all’ the function is used.

There are several other means by which we can find the elements in Protractor and by using elements locating strategies in Angular JavaScript framework such as by.model(), by.repeater(), by.binding(), etc.

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

List of Selenium Locators in Protractor

Now in this section of protractor testing tutorial, let’s get familiar with global variables that are majorly used in locating the DOM elements with examples for better understanding of these Selenium locators in protractor. These are a group of element locator strategies that are associated with the “by” keyword such as by.className, by.css, by.model, etc. Some of the most commonly used are:

• by.className
• by.id
• by.CSS
• by.linkText
• by.name
• by.partialLinkText
• by.tagName
• by.xpath

1. by.className
The className locator is one of the most widely used Selenium locators in Protractor. ts objective is to check for the elements in the page with a class attribute and then further classify the elements specific to their class name.

For Example:-
Sample XML Document :-

Locator Used:-

2. by.id

The Id locator is used to discover an element in the web page based on the id attribute defined in the XML document structure.

For Example :-
Sample XML Document :-

Locator Used:-

3. by.css

The CSS locator assists in identifying the elements and classify them based on the CSS selector i.e. the identifier value used to distinguish the element existing on the web page. These Selenium locators are also one of the most preferred substitutes in protractor when we do not have a choice to select based on class name or id.

For Example :-
Sample XML Document :-

Locator Used:-

4. by.linkText

The objective of the linkText locator is to identify the matching string text corresponding to the anchor element i.e. < a > tag in the DOM. It works only on the hyperlink and by default, the first link text is selected if there are multiple elements present for the link text on the web page.

For Example :-
Sample XML Document :-

Locator Used:-

5. by.name

The name locator is used to discover the element having the specific value in the name attribute.
For Example :-

Sample XML Document :-

Locator Used:-

6. by.partialLinkText

The partialLinkText locator is used in scenarios where there is a need to find the elements which contain the string or the portion of the string in the link text element.

For Example :-

Sample XML Document :-

Locator Used :-

7. by.tagName

The tagName locator is used to locate elements having a specific tag name. It looks for elements in the web page having any tag name like < a > , < div > , < p > etc. It functions similar to that of the getElementsByTagName function used in the XML document structure.

For Example:-

Sample XML Document :-

Locator Used :-

8. by.xpath

The Xpath locator is used to find the matching element for the XML Xpath Selector provided. An important thing to note when dealing with XPath Selenium locators is that to search and element the entire XML document model we must we begin our XPath locator with “//”

Example:

For Example :-

Sample XML Document :-

Locator Used:-

Angular Specific Selenium Locators

Now, in this protractor testing tutorial, let us have a look at some of the Selenium locators that are used in Angular but are also available for the Protractor framework.

• by.model
• by.buttonText
• by.partialButtonText
• by.exactBinding
• by.binding
• by.exactRepeater
• by.repeater
• by.cssContainingText
• by.options
• by.deepCss
• by.addLocator

1. by.model

The model locator identifies the element having the exact text associated with the ng-model attribute.

For Example :-

Sample XML Document :-

Locator Used:-

2. by.buttonText

The buttonText locator finds a match with an element having the same text of the button tag or inside the sub-element of the tag.

For Example :-

Sample XML Document :-

Locator Used:-

3. by.partialButtonText

The partialButtonTextlocator finds a match with an element that contains the part of the text i.e. partial match in the button tag or inside the sub-element of the tag.

For Example :-

Sample XML Document :-

Locator Used:-

4. by.exactBinding

The exactBinding locator is used to locate the ng-bind attribute with the exact string/text value provided. It will not check for any partial matches in the text.

For Example:-

Sample XML Document :-

Locator Used:-

5. by.binding

This binding locator is used to locate the ng-bind attribute with the given text value. It also helps in locating the text that is a partial match, i.e. if there is an attribute that has some matching with a given locator then this element will be found by our locator, so the relevant matching elements are returned.

For Example:-

Sample XML Document :-

Locator Used:-

6. by.exactRepeater

The exactRepeater locator identifies the element having the exact text associated with attribute ng-repeat. It will not check for any partial matches in the text.

For Example:-

Sample XML Document :-

Locator Used:-

7. by.repeater

The repeater locator is used to find the element that has the attribute ng-repeat. It also helps in locating the text that is a partial match, i.e. if there is an attribute that has some matching with a given locator then this element will be found by our locator, so the relevant matching elements are returned.

For Example:-

Sample XML Document :-

Locator Used:-

8. by.cssContainingText

The cssContainingText locator finds the element by CSS having the specific text string, i.e. it combines the function of the CSS locator and the text element locator to identify the element.

For Example:-

Sample XML Document :-

Locator Used:-

9. by.options

The options locator identifies the element associated with attribute ng-option.

For Example :-

Sample XML Document :-

Locator Used:-

10. by.deepCss

The deepCss locator in protractor is used to discover the shadow DOM elements, which by default is not easily discoverable by using standard element Selenium locators.

For Example:-

Sample XML Document :-

Locator Used:-

In this next section of protractor testing tutorial, we’ll discuss how you can integrate protractor with other powerful tools. Before that, if you want to set up a protractor to run your Selenium automation scripts you can check out our support documentation.

11. by.addLocator

The addLocator in protractor is used to create custom locators and load them later in config.

For Example :-

Sample XML Document :-

Locator Used:-

Read More: Protractor Vs Selenium: A Detailed Difference

Integrating Protractor with LambdaTest For Faster Selenium Test Automation

When performing Selenium test automation with Protractor, we always look for ways that can help us increase our test coverage and improve our test cases. Protractor framework also has the capability to integrate with multiple tools and platforms such as Git, Jenkins, LambdaTest, etc.
The best part of integrating your Protractor scripts with LambdaTest can help you ditch the hassle of maintaining an in-house Selenium infrastructure as you can run your scripts over a cloud-based Selenium Grid of 3000 + real browsers for both desktop and mobile.
To integrate Protractor with our online Selenium Grid, you won’t have to make any changes to your specification files. All you need to do is tweak the config file a little to specify the hub details and access key required to connect to Remote WebDriver for our online Selenium Grid. Therefore, when it is coupled with the internal capabilities of Protractor, it provides better flexibility to manage our tests and executing parallel Selenium test automation which will exponentially boost our testing execution speed.

Perform Cross Browser Testing Of Your Web-Application On 2000+ Real Browsers Now!

Conclusion

As we have seen in this protractor testing tutorial, that since protractor is built upon Selenium and mostly used for Angular websites, it inherits properties from them. This is the reason we use Selenium locators in protractor, and it adds more charm to the framework and makes it more robust when used to the fullest. On the other hand, protractor is not just about Selenium locators there are many other aspects and features of the protector testing available for use in the market which adds more, that we will cover eventually in our protractor testing tutorials.