Tuesday, December 12Be an Automation Engineer

Protractor element locators

Protractor supports all the element location strategies given by selenium like @Id, @xpath, @cssSelector, @name etc..
Along with the selenium supported locators, protractor has unique set of locators particularly to identify elements based on angular js attributes like ng-model, ng-repeat, ng-options, ng-bind etc..
We will explain about how to use selenium supported element locators in protractor by angular js based locators.

Locators from webdriver

by.className

Identifies element which has a specific class Name.
DOM


<ul class="numbers">
  <li class="even">2</li>
  <li class="odd">3</li>
</ul>


Locators:
/* Returns the web element for even */
var even = browser.findElement(by.className('even'));
expect(even.getText()).toBe('2');

expect(browser.findElement(by.className('odd'))).toBe('3');

by.css

Identifies an element which has a specific css location strategy. You can find more about css selectors and how to use them in the below link.
css selectors : http://www.w3.org/TR/CSS2/selector.html
DOM


<ul class="numbers">
  <li class="even">2</li>
  <li class="odd" id="oddNumber">3</li>
</ul>


Locators:
/* Returns the web element for even */
var even = browser.findElement(by.css('.even'));
expect(even.getText()).toBe('2');

expect(browser.findElement(by.css('#oddNumber'))).toBe('3');

by.id

Identifies an element which has a specific id mentioned in DOM.
DOM


<ul class="numbers">
  <li class="even">2</li>
  <li class="odd" id="oddNumber">3</li>
</ul>


Locators:
/* Returns the web element for even */
var odd = browser.findElement(by.id('oddNumber'));
expect(odd.getText()).toBe('3');

by.linkText

Identifies anchor element whose visible text matches the given string.
DOM

<a href="http://www.google.com">Google</a>

Locator:
/* Returns the web element for google link */
var googleLink = element(by.linkText('Google'));
expect(googleLink.getTagName()).toBe('a');

by.name

Identifies an element which has name attribute matches the given value.
DOM


<ul>
  <li name="dog_name">Dog</li>
  <li name="cat_name">Cat</li>
</ul>


Locator:
// Returns the web element for dog
var dog = browser.findElement(by.name('dog_name'));
expect(dog.getText()).toBe('Dog');

by.partialLinkText

Identifies an element whose visible text contains given string.


<ul>
  <li><a href="http://www.webdriverjs.com">Selenium using javascript</a></li>
  <li>Java</li>
</ul>


Locator:
// Returns the 'a' web element for 'selenium using javascript' and navigate to that link
var wdjs = browser.findElement(by.partialLinkText('javascript'));
wdjs.click();

by.tagName

Locates elements with a given tag name. The returned locator is equivalent to using the getElementsByTagName DOM function.

See http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html

<a href="http://www.google.com">Google</a>

Locator:
expect(element(by.tagName('a')).getText()).toEqual('Google');

by.xpath

Identifies elements matching with given XPath selector.If we start xpath locator with “//”, it means we are trying to search an element in the entire DOM. So, we should be careful while writing xpaths.
Xpath reference: http://www.w3.org/TR/xpath/
DOM


<ul>
  <li><a href="http://www.webdriverjs.com">Selenium using javascript</a></li>
  <li>Java</li>
</ul>


Locator
// Returns the 'a' element for WebdriverJs
var li = browser.findElement(by.xpath('//ul/li/a'));
expect(li.getText()).toBe('Selenium using javascript');

Angular specific locators

Click here‘ to go through different element locating strategies supported by protractor specific to angular js applications.

Other element locators introduced in protractor:

by.buttonText

Identifies html button with specific text.
DOM

<button>Goto webdriverjs</button>

Locator
element(by.buttonText('Goto webdriverjs'));

by.partialButtonText

Identifies button which contains specified string.
DOM

<button>Goto webdriverjs</button>

Locator
element(by.partialButtonText('webdriverjs'));

by.cssContainingText

This locator will combine css locator and element text and identifies the element.
DOM


<ul>
  <li class="pet">Dog</li>
  <li class="pet">Cat</li>
</ul>


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

by.deepCss

By default protractor/Selenium can not find elements under shadow DOM with regular element locators. So protractor has introduced deepCss locating strategy to identify Shadow DOM elements.

Example Program: Finding shadow dom elements in protractor

Shadow DOM reference: https://glazkov.com/2011/01/14/what-is-shadow-dom/
DOM


<div>
  <span id="outerspan">
  <"shadow tree">
    <span id="span1"></span>
    <"shadow tree">
      <span id="span2"></span>
    </>
  </>
</div>


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

var visibleSpans = element.all(by.css('span');
expect(visibleSpans.count()).toEqual(1);

%d bloggers like this: