protractor 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