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