Protractor 特定定位器(适用于基于 Angular 的应用程序)

应尽可能将这些定位器用作优先级,因为它们对应用程序中的更改更持久,然后基于 css 或 xpath 定位器,这很容易破坏。

绑定定位器

句法

by.binding('bind value')

视图

<span>{{user.password}}</span>
<span ng-bind="user.email"></span>

定位器

by.binding('user.password')
by.binding('user.email')

还支持部分匹配

by.binding('email')

精确绑定定位器

binding 类似,但不允许部分匹配。

句法

by.exactBinding('exact bind value')

视图

<span>{{user.password}}</span>

定位器

by.exactBinding('user.password')
by.exactBinding('password') // Will not work

模型定位器

选择具有 Angular 模型指令的元素

句法

by.model('model value')

视图

<input ng-model="user.username">

定位器

by.model('user.username')

按钮文本定位器

根据文本选择按钮。仅当预期按钮文本不会经常更改时才应使用。

句法

by.buttonText('button text')

视图

<button>Sign In</button>

定位器

by.buttonText('Sign In')

部分按钮文本定位器

buttonText 类似,但允许部分匹配。仅当预期按钮文本不会经常更改时才应使用。

句法

by.partialButtonText('partial button text')

视图

<button>Register an account</button>

定位器

by.partialButtonText('Register')

中继器定位器

选择具有 Angular repeater 指令的元素

句法

by.repeater('repeater value')

视图

<tbody ng-repeat="review in reviews">
    <tr>Movie was good</tr>
    <tr>Movie was ok</tr>
    <tr>Movie was bad</tr>
</tbody>

定位器

by.repeater('review in reviews')

还支持部分匹配

by.repeater('reviews')

精确的中继器定位器

repeater 类似,但不允许部分匹配

句法

by.exactRepeater('exact repeater value')

视图

<tbody ng-repeat="review in reviews">
    <tr>Movie was good</tr>
    <tr>Movie was ok</tr>
    <tr>Movie was bad</tr>
</tbody>

定位器

by.exactRepeater('review in reviews')
by.exactRepeater('reviews') // Won't work

CSS 和文本定位器

扩展的 CSS 定位器,你还可以在其中指定元素的文本内容。

句法

by.cssContainingText('css selector', 'text of css element')

视图

<ul>
    <li class="users">Mike</li>
    <li class="users">Rebecca</li>
</ul>

定位器

by.cssContainingText('.users', 'Rebecca') // Will return the second li only

选项定位器

选择具有 Angular 选项指令的元素

句法

by.options('options value')

视图

<select ng-options="country.name for c in countries">
    <option>Canada</option>
    <option>United States</option>
    <option>Mexico</option>
</select>

定位器

by.options('country.name for c in countries')

深度 CSS 定位器

扩展到 shadow DOM 的 CSS 定位器

句法

by.deepCss('css selector')

视图

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

定位器

by.deepCss('span') // Will select every span element