Protractor Locators, webdriver and selenium – beginner introduction

What is a locator? What is a locator? 
The role of a locator in Automation Development is to return an elementFinder. I’ll try even simpler.
The role of a locator is to locate a piece of HTML element, that you can see in the browser for further use. 

 

Why do we need the (protractor) locators? 
a) We need to make sure that something specific still happens in an application. You need to make sure that the login button is still there. You need to find that button, programmatically. “locators” are a way for doing this. For finding a specific element.

 

b) Protractor Locators, are the framework’s specific locators.
For example, you will not find a “ng-repeat”, anywhere beside Angular. Since Protractor was developed for testing Angular, they have provided a way for locating their specific Angular DOM elements.

 

Webdriver/Selenium/Protractor locators? -You’re driving me crazy! 
Mentioned selectors above, are framework’s specific locators. This does not mean that you can not import them and use them somewhere else. It might be somehow useless, but you can!

 

So far, there are several types of Locators.

 

I. Locators added by Protractor(angular/google) team, How to use them

 

addLocator Add a locator to this instance of ProtractorBy. – this is for creating a custom locators. You can create custom then load them later in config. I actually wrote few of my own, it’s not very complicated.
Example:
// Add the custom locator.
by.addLocator('buttonTextSimple',

    function(buttonText, opt_parentElement, opt_rootSelector) {

  // This function will be serialized as a string and will execute in the

  // browser. The first argument is the text for the button. The second

  // argument is the parent element, if any.

  var using = opt_parentElement || document,

      buttons = using.querySelectorAll('button');

  // Return an array of buttons with the text.

  return Array.prototype.filter.call(buttons, function(button) {

    return button.textContent === buttonText;

  });

});

// Use the custom locator.

element(by.buttonTextSimple('Go!')).click();
binding Find an element by text binding.
Example:
element(by.binding('person.name'));
exactBinding Find an element by exact binding.
Example:
element(by.exactBinding('person-email'));
model Find an element by ng-model expression.
Example:
element(by.model('person.name'));
buttonText Find a button by text.
Example:
element(by.buttonText('Save'));
partialButtonText Find a button by partial text.
Example:
element(by.partialButtonText('Save'));

repeater Find elements inside an ng-repeat.

Example:

element(by.repeater('Save'));
exactRepeater Find an element by exact repeater.
Example:
element(by.exactRepeater('kids'));
cssContainingText Find elements by CSS which contain a certain string.
Example:
element(by.cssContainingText('.className', 'PartialTextToFind'));
options Find an element by ng-options expression.
Example:
element(by.css('[ng-options="item as item.label for item in items track by item.id"]'))

deepCss Find an element by css selector within the Shadow DOM.

Example:

element.all(by.deepCss('span'));

 

II. Extended from Selenium/webdriver JS:
className Locates elements that have a specific class name.
Example:
element.all(by.className('span'));
css Locates elements using a CSS selector.
element.all(by.css('.className'));
id Locates an element by its ID.
Example:
element.all(by.id('#idName'));
linkText Locates link elements whose visible text matches the given string.
Example:
element.all(by.linkText('linkTextThatShouldBeFound'));
js Locates an elements by evaluating a JavaScript expression, which may be either a function or a string.
Example:
var wideElement = element(by.js(function() {

  var spans = document.querySelectorAll('span');

  for (var i = 0; i < spans.length; ++i) {

    if (spans[i].offsetWidth > 100) {

     return spans[i];

    }

  }

}));

expect(wideElement.getText()).toEqual('Three');
name Locates elements whose name attribute has the given value.
Example:
browser.findElement(by.name('dog_name'));
partialLinkText Locates link elements whose visible text contains the given substring.
Example:
browser.findElement(by.partialLinkText('Doge'));
tagName Locates elements with a given tag name.
Example:
element(by.tagName('a'));

 

xpath Locates elements matching a XPath selector.
Example:
element(by.xpath('a'));

 

In order to use the locators, you should at least have some basic HTML knowledge, you should know how to read the HTML code, you should know how to inspect the code in browser, and you should have some basic understanding of browser’s “dev tools”. This means, inspect, console, firebug, network, etc. Extremely useful stuff.

 

How to see HTML of a webpage, and get started on using and writing automated code using the locators? You need the developer tools!
All you have to do is to right click, anywhere your browser and click on “inspect”. That’s it. You have the developers tools, now open. You should see the  developer’s tools, Elements’console. More about this a tiny bit later.
qa testing - developer tools - chrome
qa testing – developer tools – chrome
Now you wonder. Why did I wrote this article? I want to help the community and give back. I’ve been helped countless times, now it’s my turn to give back.

Published by

Ed Llinac

JavaScript and programming enthusiast. I love automating this, and I love make this do themselves. With the expertise gained over the years I can help seeing the bigger picture.

Leave a Reply