protractor Locating Elements Protractor specific locators (for Angular-based applications)
Example
These locators should be used as a priority when possible, because they are more persistent to changes in an application then locators based on css or xpath, which can easily break.
Binding locator
Syntax
by.binding('bind value')
Example
View
<span>{{user.password}}</span>
<span ng-bind="user.email"></span>
Locator
by.binding('user.password')
by.binding('user.email')
Also supports partial matches
by.binding('email')
Exact Binding locator
Similar to binding, except partial matches are not allowed.
Syntax
by.exactBinding('exact bind value')
Example
View
<span>{{user.password}}</span>
Locator
by.exactBinding('user.password')
by.exactBinding('password') // Will not work
Model locator
Selects an element with an Angular model directive
Syntax
by.model('model value')
Example
View
<input ng-model="user.username">
Locator
by.model('user.username')
Button text locator
Selects a button based on its text. Should be used only if button text not expected to change often.
Syntax
by.buttonText('button text')
Example
View
<button>Sign In</button>
Locator
by.buttonText('Sign In')
Partial button text locator
Similar to buttonText, but allows partial matches. Should be used only if button text not expected to change often.
Syntax
by.partialButtonText('partial button text')
Example
View
<button>Register an account</button>
Locator
by.partialButtonText('Register')
Repeater locator
Selects an element with an Angular repeater directive
Syntax
by.repeater('repeater value')
Example
View
<tbody ng-repeat="review in reviews">
<tr>Movie was good</tr>
<tr>Movie was ok</tr>
<tr>Movie was bad</tr>
</tbody>
Locator
by.repeater('review in reviews')
Also supports partial matches
by.repeater('reviews')
Exact repeater locator
Similar to repeater, but does not allow partial matches
Syntax
by.exactRepeater('exact repeater value')
Example
View
<tbody ng-repeat="review in reviews">
<tr>Movie was good</tr>
<tr>Movie was ok</tr>
<tr>Movie was bad</tr>
</tbody>
Locator
by.exactRepeater('review in reviews')
by.exactRepeater('reviews') // Won't work
CSS and text locator
An extended CSS locator where you can also specify the text content of the element.
Syntax
by.cssContainingText('css selector', 'text of css element')
Example
View
<ul>
<li class="users">Mike</li>
<li class="users">Rebecca</li>
</ul>
Locator
by.cssContainingText('.users', 'Rebecca') // Will return the second li only
Options locator
Selects an element with an Angular options directive
Syntax
by.options('options value')
Example
View
<select ng-options="country.name for c in countries">
<option>Canada</option>
<option>United States</option>
<option>Mexico</option>
</select>
Locator
by.options('country.name for c in countries')
Deep CSS locator
CSS locator that extends into the shadow DOM
Syntax
by.deepCss('css selector')
Example
View
<div>
<span id="outerspan">
<"shadow tree">
<span id="span1"></span>
<"shadow tree">
<span id="span2"></span>
</>
</>
</div>
Locator
by.deepCss('span') // Will select every span element
