Locators in Protractor

Hello everyone... As we all interact with test automation with protractor framework, I think it's much important to get an idea about different types of Locators used when writing e2e tests.

What is Protractor?

Protractor is an end-to-end test framework for Angular and Angular JS applications and works as a solution integrator combining powerful tools and technologies such as NodeJS, Selenium WebDriver, Jasmine, Cucumber and Mocha.

It was initially developed by Google Developers to support angular applications and later it is released as an open-source framework. Now protractor supports both angular and Non-Angular applications. 

Why should we use Protractor?

• Easy installation and setup

• Easily readable jasmine framework.

• Support Data-Driven test

• Include all advantages of Selenium WebDriver.

• Auto-Synchronization.

• Support parallel testing through multiple browsers.

• Excellent speed.

To write end to end tests in Protractor, we use Locators to find elements on the web page. Locators in protractor are similar to the locators in selenium web driver. 

In order to interact with UI objects with the protractor, we need to be able to identify webpage elements fast and but also in an accurate way. We should refactor these locators very often, therefore we must make sure to choose the right locator names from the start.

Locators are the heart of end-to-end tests for webpages, which may help in finding DOM (Document Object Model) elements, interacting with them, and help to get information about the current status of your application. 

So Protractor exports the global function by using ‘element’ which takes ‘Locator’ and then returns an ‘ElementFinder’.  The function ‘element’ is used to locate a single element. However, if you are looking for multiple elements, then you should use ‘element.all’ function.

• Element

So, first of all, it's important to identify what is an element in end-to-end testing.
Simply, an element is used to search for HTML element on the web page. It takes a locator and returns an ElementFinder object, which can be used to interact with the element or get information from it.
So the element takes one parameter, a Locator, which describes how to find the element. 

var ele = element(locator); // Click on the element. ele.click();

• ElementFinder

ElementFinder finds a single element based on the locator. So the ElementFinder has a set of action methods such as,
                  sendKeys
                  getText      -  Return the content of an element
                  click           - To click on a button

There are numerous chaining functions of ElementFinder such as following.

• element(locator).clone
• element(locator).getWebElement()
• element(locator).all(locator)
• element(locator).element(locator)
• element(locator).all(selector)
• element(locator).$(locator)
• element(locator).isPresent()
• element(locator).isElementPresent()
• element.all(locator).evaluate
• element(locator).allowAnimations
• element(locator).equals

• ElementArrayFinder

                ElementArrayFinder will find the elements based on the locator. The following are the functions of the ElementArrayFinder

• element.all(locator).clone
• element.all(locator).all(locator)
• element.all(locator).filter(filterFn)
• element.all(locator).get(index)
• element.all(locator).first()
• element.all(locator).last()
• element.all(locator).all(selector)
• element.all(locator).count() 
• element.all(locator).isPresent()
• element.all(locator).locator
• element.all(locator).then(thenFunction)
• element.all(locator).each(eachFunction)
• element.all(locator).map(mapFunction)
• element.all(locator).reduce(reduceFn)
• element.all(locator).evaluate
• element.all(locator).allowAnimations    

• By

          By is a collection of element locator strategies which help to create Locators. 

               eg:          
                     by.css('.myclass')          
                     by.model('.name')

• element.all

            We use element.all to work with multiple DOM elements. And list out all the elements.

There are many locators used in end-to-end testing with different frameworks. But here we mainly consider the Angular specific locators used in Protractor framework.

A locator tells Protractor how to find a certain DOM element. Protractor exports locator factories on the global by the object. This article will help to identify the most common locators used in writing e2e testings. Following are the most commonly used locators: 

• By CSS
• By ID
• By Model
• By Binding
• By Repeater

So let's have a look at the above Locators and have an idea on how to use them properly.

1. By CSS Locator

                The CSS Class locator finds the first element with a specific CSS class attribute. This is useful for locating items that have a unique style on the page.

      2. By ID
               
               The ID locator looks for an element in the page, having an ID attribute. 

      3. By Model
                
                 As ng-model is a directive in Angular, Model locator checks whether any element has ng-model values with the given locator, if so that element will be returned.

      4. By Binding
                     
                  Find an element by text binding, binding locator finds the element based on a partial match of the ng-bind attribute, if the attribute has some value matching with given locator then this element will be found by our locator.

   

       4.1 exactBinding

     

                 Finds the element with an exact value, if ng-bind is equal to the given locator value, then the element will be found. It will not check the partial matches.

       5. By Repeater
                
                  Find the elements inside ng-repeat. If the attribute contains matching values with the locator, then this element will return the values of the locator.

     5.1. By ExactRepeater

               exact repeater will look for the element which has exact same attribute value.

  Although the above locators are used most commonly with protractor, there are some other types of locators which may help in writing end to end testings. So some of them are as follows.

     1. By ButtonText

             

             Button text locator will try to match with an element which as same as the given locator, or it's sub-element inside the button tag.

             

     2. By Option

            As the name suggests, it will find an element by ng-options expression.

Therefore by looking at the above usage of the locators, The importance of declaring locators in a reliable manner is quite evident.

• It's better to use shorter, preferably with a clear unique name/id which describes this unique element on the page. Feel free to change the code like classes/names/id's to make the locator and the test-code very understandable and readable. 

• The structure of the locator should be pretty much unique so that it does not need to be updated if the location of the element in the page changes. When it comes to the maintainability of the locator, Unless the functionality changes, we should be able to minimize the updating of locators and tests.