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