Protractor Selectors – HOW TO explanation – Protractor Locators

I compiled this list with all Protractor Selectors(Protractor Locators), I find it very helpful for locating elements in Chrome for automation with Protractor or WebDriver.

Protractor locators - Protractor Selectors

First, explanations on what Selectors on what are they used for:

A selector, it’s a way of “grabbing” an element by reading pure html output.
For example, a Login button, in html, should have a class, and some text for finding that element and positioning it to the page.

In selenium, for handling that element(for example clicking it) we need to find it first. Therefore, we use locators for finding, and accessing WebElements. In protractor, this is called ElementFinder

Protractor selectors – protractor Locators

 

element(by.id('#elementID'));      // element(by.id())
element(by.css('.elementClass'));             // element(by.className())
element(by.tagName(''));              // element(by.tagName())
element(by.css('[ng-message=required]');   // remember to leave out the double quotes around the value of attribute
element(by.css('#parent #child'));          // select one child inside parent
element(by.css('ul li'));          // select all children inside parent
element(by.css('ul li').first();           // select first of children
element(by.css('ul li').last();            // select last of children
element(by.css('ul li').get(index);        // select index-th of children


Protractor shorthand selectors

 

$('#some-id')                // element(by.id())
$('.some-class')             // element(by.className())
$('tag-name')                // element(by.tagName())
$('[ng-message=required]')   // remember to leave out the double quotes around the value of attribute
$('#parent #child')          // select one child inside parent
$('ul li')                   // select all children inside parent
$('ul li').first()           // select first of children
$('ul li').last()            // select last of children
$('ul li').get(index)        // select index-th of children


Specific Protractor Locators –┬áSpecific Protractor selectors

element(by.model('data'));            // find web element by model
element(by.repeater('cat in pets')); // find web element by repeater
element(by.options('c for c in colors'))// find web element by options
element(by.binding('value'));           // only look through the elements with ng-binding attribute value
element(by.buttonText('Save'));         // the whole of button text
element(by.partialButtonText('Save'));  // part of button text
element(by.cssContainingText('.pet', 'Dog')) // for selecting this: <li class="pet">Dog</li>
element(by.deepCss('span'))             // for selecting all level of spans <span><span>x</span></span>

Chaining locators – chaining selectors

element.all(by.css('.someCssClass')).all(by.css('.someOtherClass'));
$$('.someCssClass').$('.someOtherClass') //this is the shorthand version for chaining elements


Need any help with Protractor or debugging some code? Let’s discuss your project. Feel free to get in touch with me HERE.