Locators in Protractor

In this protractor locator tutorial, we will be learning about all locators present in Protractor including inherited ones.

In order to interact with UI objects with protractor, we need to be able to identify webpage elements fast and in an accurate way(sometimes uniquely). We should refactor these locators very often so we must choose the right locators from the start.

There are some browser tools that you can use in order to identify web elements in the DOM easier.

  • Firebug for Firefox-
  • Google Developer Tools for Chrome-
  • Web Inspector for Safari-
There are kind of locators present in Protractor, I hope you are aware that protractor is nohting but a layer over selenium webdriver.
  • Protractor Locators-
  • Locator inherited from webdriver-

Protractor Locators

  • binding : Find an element by text binding, binding locator finds the element based on partial match of ng-bind attribute, if the attribute has some value matching with given locator then this element will be found by our locator-
  • 
    													//HTML code
    													<span ng-bind="person.email.id"></span>
    
    													// usage of locator
    													element(by.binding('person.email'));		
    													

  • exactBinding : Finds the element with exact value, if ng-bind is equal the given locator value then the elemnet will be found. It will not check for partial matches.-
  • 
    													//HTML code
    													<span ng-bind="person.email.id"></span> // this will not be found as it is not exact value
    													<span ng-bind="person.email"></span> // this element will be found as it is exach match
    
    													// usage of locator
    													element(by.binding('person.email'));		
    													

  • model : Model locator checks whether any element has ng-model values matching with given locator, if so that element will be returned-
  • 
    													//HTML code
    													<span ng-model="person.name"></span>
    
    													// usage of locator
    													element(by.model('person.name'));		
    													

  • buttonText : buttonText locator will try to match with an element which as same text as the given locator, or its sub element inside the button tag-
  • 
    													//HTML code
    													<button>Save</button>
    
    													// usage of locator
    													element(by.buttonText('Save'));
    
    													//HTML code
    													<button>
    														<label>Save As   //matches
    														</label>
    													</button>
    													
    													// usage of locator
    													element(by.buttonText('Save As'));
    													

  • partialButtonText : partialButtonText locator tries to find element with partial match present in the button element's text.-
  • 
    													//HTML code
    													<button>Save As Text </button>  //matches
    
    													// usage of locator
    													element(by.buttonText('Save'));
    
    													//HTML code
    													<button>
    														<label>Save As File  //matches
    														</label>
    													</button>
    													
    													// usage of locator
    													element(by.buttonText('Save As'));
    													

  • repeater : Find elements inside an ng-repeat. -
  • 
    													<div ng-repeat="cat in pets">
    													  <span>{{cat.name}}</span>
    													  <span>{{cat.age}}</span>
    													</div>
    
    													<div class="book-img" ng-repeat-start="book in library">
    													  <span>{{$index}}</span>
    													</div>
    													<div class="book-info" ng-repeat-end>
    													  <h4>{{book.name}}</h4>
    													  <p>{{book.blurb}}</p>
    													</div>
    													

    
    													// Returns the DIV for the second cat.
    													var secondCat = element(by.repeater('cat in pets').row(1));
    
    													// Returns the SPAN for the first cat's name.
    													var firstCatName = element(by.repeater('cat in pets').
    														row(0).column('cat.name'));
    
    													// Returns a promise that resolves to an array of WebElements from a column
    													var ages = element.all(
    														by.repeater('cat in pets').column('cat.age'));
    
    													// Returns a promise that resolves to an array of WebElements containing
    													// all top level elements repeated by the repeater. For 2 pets rows
    													// resolves to an array of 2 elements.
    													var rows = element.all(by.repeater('cat in pets'));
    
    													// Returns a promise that resolves to an array of WebElements containing
    													// all the elements with a binding to the book's name.
    													var divs = element.all(by.repeater('book in library').column('book.name'));
    
    													// Returns a promise that resolves to an array of WebElements containing
    													// the DIVs for the second book.
    													var bookInfo = element.all(by.repeater('book in library').row(1));
    
    													// Returns the H4 for the first book's name.
    													var firstBookName = element(by.repeater('book in library').
    														row(0).column('book.name'));
    
    													// Returns a promise that resolves to an array of WebElements containing
    													// all top level elements repeated by the repeater. For 2 books divs
    													// resolves to an array of 4 elements.
    													var divs = element.all(by.repeater('book in library'));
    													

  • exactRepeater : exactRepeater locators looks for an element which has exact same attibute value-
  • cssContainingText : cssContainingText locator tries to find elements by CSS which contain a certain string.-
  • 
    													<ul>
    													  <li class="pet">Dog</li>  //matches
    													  <li class="pet">Cat</li>
    													</ul>
    													

    
    													// Returns the li for the dog, but not cat.
    													element(by.cssContainingText('.pet', 'Dog'))
    													

  • options : -
  • 
    													
    													<select ng-model="color" ng-options="c for c in colors">
    													  <option value="0" selected="selected">red</option>
    													  <option value="1">green</option>
    													</select>
    													
    													

    
    													
    													var allOptions = element.all(by.options('c for c in colors'));
    													expect(allOptions.count()).toEqual(2);
    													var firstOption = allOptions.first();
    													expect(firstOption.getText()).toEqual('red');
    													
    													

  • deepCss : Find an element by css selector within the Shadow DOM.-
  • 
    													<div>
    													  <span id="outerspan">
    													  <"shadow tree">
    														<span id="span1"></span>
    														<"shadow tree">
    														  <span id="span2"></span>
    														</>
    													  </>
    													</div>
    													

    
    													var spans = element.all(by.deepCss('span'));
    													expect(spans.count()).toEqual(3);
    													

Inherited locators in Protractor

Below locators are available in protractor as inherited locators, these locators are inherited from selenium webdriver

  • id-
  • name-
  • className-
  • tagName-
  • partialLinkText -
  • linkText-
  • css-
  • js-
  • xpath-

Sample HTML for Locators Example




									<html>
										<body>
											<div id="pancakes">
												<a href="https://chercher.tech" >Selenium Webdriver</a>
												<button id="firstButton" type="button">Blueberry</button>
												<button type="button" name="Ban" class="Banana">Banana</button>
												<button type="button" name="cake" value="Strawberry">Strawberry</button>
											</div>
										</body>
									</html>


								

attributes in selenium-webdriver

Id

The Id locator looks for an element in the page having an id attribute


									element(by.id("firstButton")
									

name :

The name locator looks for an element in the page having an name attribute


								element(by.name("Ban")
								

ClassName :

The Class name locator looks for an element in the page having an class attribute classname in selenium-webdriver


										element(by.className("banana")
									

tagName :

The tagname locator looks for an element in the page having an tagname, like <a>, <button>, <p>, <label>, <div> etc tagname in selenium-webdriver


										element(by.tagname("button")
										

linkText :

The link text finds the element based on the text present in tag, text highlighted in below image.

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) so it is called as Link Text locator.

linktext in selenium-webdriver


												element(by.linkText("Selenium Webdriver")
												
														

Partial Link Text :

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

linktext in selenium-webdriver


													element(by.partialLinkText("Selenium")
															

CSS selector :

CSS Selector is the combination of an element selector and a selector value which identifies the web element within a web page. The composite of element selector and selector value is known as Selector Pattern.

When we don't have an option to choose Id or Name, we should prefer using CSS locators as the best alternative. Read how to
build CSS Selector in Protractor


														element(by.css("#firstButton")
																

Xpath :

While DOM is the recognized standard for navigation through an HTML element tree, XPath is the standard navigation tool for XML also we can use it for HTML; and an HTML document is also an XML document (xHTML).

XPath is used everywhere where there is XML. You can read More on Xpath Building, Valid XPath locators can be:

xpath=//button[@name="Ban"] - matches with banana

xpath = //*[@value='Strawberry'] - matches with strawberry

Note:We have explained xpath in great detail in upcoming section


															element(by.xpath("//button[@name="Ban"]")
															
																	

 
Join My Facebook Group
Join Group
 

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
Copyright © CherCher Tech