Objective

Well not much of an objective but for the keepsake of all the locators available in Protractor for identifying elements.

Function Description Usage Website DOM
partialButtonText Find a button by partial text.
element(by.partialButtonText('Save'));
<button>Save my file</button>
cssContainingText Find a button by partial text.
// Returns the li for the dog, but not cat.
var dog = element(by.cssContainingText('.pet', 'Dog'));
<ul>
	<li class="pet">Dog</li>
	<li class="pet">Cat</li>
</ul>
deepCss Find an element by css selector within the Shadow DOM.
var spans = element.all(by.deepCss('span'));
expect(spans.count()).toEqual(3);
<div>
  <span id="outerspan">
  <"shadow tree">
    <span id="span1"></span>
    <"shadow tree">
      <span id="span2"></span>
    </>
  </></div>
options Find an element by ng-options expression.
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');
<select ng-model="color" ng-options="c for c in colors">
<option value="0" selected="selected">red</option>
<option value="1">green</option>
</select>
className Locates elements that have a specific class name.
// Returns the web element for dog
var dog = browser.findElement(by.className('dog'));
expect(dog.getText()).toBe('Dog');
<ul class="pet">
	<li class="dog">Dog</li>
	<li class="cat">Cat</li>
</ul>
css Locates elements using a CSS selector.
// Returns the web element for cat
var cat = browser.findElement(by.css('.pet .cat'));
expect(cat.getText()).toBe('Cat');
<ul class="pet">
	<li class="dog">Dog</li>
	<li class="cat">Cat</li>
</ul>
id Locates an element by its ID.
// Returns the web element for dog
var dog = browser.findElement(by.id('dog_id'));
expect(dog.getText()).toBe('Dog');
<ul id="pet_id">
	<li id="dog_id">Dog</li>
	<li id="cat_id">Cat</li>
</ul>
linkText Locates link elements whose visible text matches the given string.
expect(element(by.linkText('Google')).getTagName()).toBe('a');
<a href="http://www.google.com">Google</a>
partialLinkText Locates link elements whose visible text contains the given substring.
// Returns the 'a' web element for doge meme and navigate to that link
var doge = browser.findElement(by.partialLinkText('Doge'));
doge.click();
<ul>
	<li><a href="https://en.wikipedia.org/wiki/Doge_(meme)">Doge meme</a></li>
	<li>Cat</li>
</ul>
name Locates elements whose name attribute has the given value.
<ul>
	<li name="dog_name">Dog</li>
	<li name="cat_name">Cat</li>
</ul>
<button>Save my file</button>
tagName Locates elements with a given tag name.
expect(element(by.tagName('a')).getText()).toBe('Google');
<a href="http://www.google.com">Google</a>
xpath Find a button by partial text.
// Returns the 'a' element for doge meme
var li = browser.findElement(by.xpath('//ul/li/a'));
expect(li.getText()).toBe('Doge meme');
<ul>
	<li><a href="https://en.wikipedia.org/wiki/Doge_(meme)">Doge meme</a></li>
	<li>Cat</li>
</ul>
buttonText Find a button by text.
element(by.buttonText('Save'));
<button>Save</button>
model Find an element by ng-model expression.
var input = element(by.model('person.name'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('Foo123');
<input type="text" />
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s