分度器-コアAPIS（続き…）

この章では、ProtractorのコアAPIをさらに学習しましょう。

Elements API

要素は、分度器によって公開されるグローバル関数の1つです。この関数は、ロケータを取り、次を返します-

ElementFinder。ロケーターに基づいて単一の要素を検索します。
ElementArrayFinder。ロケーターに基づいて要素の配列を検索します。

上記の両方で、以下で説明するチェーン方式がサポートされています。

ElementArrayFinderの連鎖関数とその説明

以下はElementArrayFinderの機能です-

*element.all（locator）.clone*

名前が示すように、この関数は要素の配列の浅いコピーを作成します。 ElementArrayFinder。

element.all（locator）.all（locator）*

この関数は基本的に、空または子要素を含む新しいElementArrayFinderを返します。次のように、複数の要素を配列として選択するために使用できます

例

element.all(locator).all(locator)
elementArr.all(by.css(‘.childselector’));
//it will return another ElementFindArray as child element based on child locator.

element.all（locator）.filter（filterFn）*

名前が示すように、ElementArrayFinder内の各要素にフィルター関数を適用した後、フィルター関数を渡すすべての要素を含む新しいElementArrayFinderを返します。基本的に2つの引数があり、1つはElementFinderで、2つ目はインデックスです。ページオブジェクトでも使用できます。

例

見ます

<ul class = "items">
   <li class = "one">First</li>
   <li class = "two">Second</li>
   <li class = "three">Third</li>
</ul>

コード

element.all(by.css('.items li')).filter(function(elem, index) {
   return elem.getText().then(function(text) {
      return text === 'Third';
   });
}).first().click();

element.all（locator）.get（index）*

これにより、インデックスによってElementArrayFinder内の要素を取得できます。インデックスは0から始まり、負のインデックスがラップされることに注意してください。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

let list = element.all(by.css('.items li'));
expect(list.get(0).getText()).toBe('First');
expect(list.get(1).getText()).toBe('Second');

element.all（locator）.first（）*

名前が示すように、これはElementArrayFinderの最初の要素を取得します。基になる要素は取得しません。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

let first = element.all(by.css('.items li')).first();
expect(first.getText()).toBe('First');

element.all（locator）.last（）*

名前が示すように、これはElementArrayFinderの最後の要素を取得します。基になる要素は取得しません。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

let first = element.all(by.css('.items li')).last();
expect(last.getText()).toBe('Third');

element.all（locator）.all（selector）*

$$への呼び出しが連鎖される可能性がある場合に、親内の要素の配列を見つけるために使用されます。

例

見ます

<div class = "parent">
   <ul>
      <li class = "one">First</li>
      <li class = "two">Second</li>
      <li class = "three">Third</li>
   </ul>
</div>

コード

let items = element(by.css('.parent')).$$('li');

element.all（locator）.count（）*

名前が示すように、これはElementArrayFinderによって表される要素の数をカウントします。基になる要素は取得しません。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

let list = element.all(by.css('.items li'));
expect(list.count()).toBe(3);

element.all（locator）.isPresent（）*

ファインダーと要素を一致させます。 trueまたはfalseを返すことができます。ファインダーに一致する要素が存在する場合はTrue、そうでない場合はFalse。

例

expect($('.item').isPresent()).toBeTruthy();

*element.all（locator）.locator*

名前が示すように、最も関連性の高いロケーターを返します。

例

$('#ID1').locator();
//returns by.css('#ID1')
$('#ID1').$('#ID2').locator();
//returns by.css('#ID2')
$$('#ID1').filter(filterFn).get(0).click().locator();
//returns by.css('#ID1')

element.all（locator）.then（thenFunction）*

ElementArrayFinderで表される要素を取得します。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

element.all(by.css('.items li')).then(function(arr) {
   expect(arr.length).toEqual(3);
});

element.all（locator）.each（eachFunction）*

名前が示すように、ElementArrayFinderによって表される各ElementFinderで入力関数を呼び出します。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

element.all(by.css('.items li')).each(function(element, index) {
  //It will print First 0, Second 1 and Third 2.
   element.getText().then(function (text) {
      console.log(index, text);
   });
});

element.all（locator）.map（mapFunction）*

名前が示すように、ElementArrayFinder内の各要素にマップ関数を適用します。 2つの引数があります。最初はElementFinderで、2番目はインデックスです。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

let items = element.all(by.css('.items li')).map(function(elm, index) {
   return {
      index: index,
      text: elm.getText(),
      class: elm.getAttribute('class')
   };
});
expect(items).toEqual([
   {index: 0, text: 'First', class: 'one'},
   {index: 1, text: 'Second', class: 'two'},
   {index: 2, text: 'Third', class: 'three'}
]);

element.all（locator）.reduce（reduceFn）*

名前が示すように、アキュムレーターとロケーターを使用して見つかったすべての要素に対して、reduce関数を適用します。この関数は、すべての要素を単一の値に削減します。

例

見ます

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

コード

let value = element.all(by.css('.items li')).reduce(function(acc, elem) {
   return elem.getText().then(function(text) {
      return acc + text + ' ';
   });
}, '');

expect(value).toEqual('First Second Third ');

*element.all（locator）.evaluate*

名前が示すように、入力が現在の基本要素のスコープ内にあるかどうかを評価します。

例

見ます

<span class = "foo">{{letiableInScope}}</span>

コード

let value =
element.all(by.css('.foo')).evaluate('letiableInScope');

*element.all（locator）.allowAnimations*

名前が示すように、現在の基本要素でアニメーションを許可するかどうかを決定します。

例

element(by.css('body')).allowAnimations(false);

ElementFinderの連鎖機能とその説明

ElementFinderの連鎖機能とその説明-

*element（locator）.clone*

名前が示すように、この関数はElementFinderの浅いコピーを作成します。

element（locator）.getWebElement（）*

このElementFinderによって表されるWebElementを返し、要素が存在しない場合はWebDriverエラーがスローされます。

例

見ます

<div class="parent">
   some text
</div>

コード

//All the four following expressions are equivalent.
$('.parent').getWebElement();
element(by.css('.parent')).getWebElement();
browser.driver.findElement(by.css('.parent'));
browser.findElement(by.css('.parent'));

element（locator）.all（locator）*

親内の要素の配列を検索します。

例

見ます

<div class = "parent">
   <ul>
      <li class = "one">First</li>
      <li class = "two">Second</li>
      <li class = "three">Third</li>
   </ul>
</div>

コード

let items = element(by.css('.parent')).all(by.tagName('li'));

element（locator）.element（locator）*

親内の要素を検索します。

例

見ます

<div class = "parent">
   <div class = "child">
      Child text
      <div>{{person.phone}}</div>
   </div>
</div>

コード

//Calls Chain 2 element.
let child = element(by.css('.parent')).
   element(by.css('.child'));
expect(child.getText()).toBe('Child text\n981-000-568');

//Calls Chain 3 element.
let triple = element(by.css('.parent')).
   element(by.css('.child')).
   element(by.binding('person.phone'));
expect(triple.getText()).toBe('981-000-568');

element（locator）.all（selector）*

$$への呼び出しが連鎖される可能性がある場合、親内の要素の配列を見つけます。

例

見ます

<div class = "parent">
   <ul>
      <li class = "one">First</li>
      <li class = "two">Second</li>
      <li class = "three">Third</li>
   </ul>
</div>

コード

let items = element(by.css('.parent')).$$('li'));

element（locator）。$（locator）*

$への呼び出しが連鎖される可能性がある場合、親内の要素を検索します。

例

見ます

<div class = "parent">
   <div class = "child">
      Child text
      <div>{{person.phone}}</div>
  </div>
</div>

コード

//Calls Chain 2 element.
let child = element(by.css('.parent')).
   $('.child'));
expect(child.getText()).toBe('Child text\n981-000-568');

//Calls Chain 3 element.
let triple = element(by.css('.parent')).
   $('.child')).
   element(by.binding('person.phone'));
expect(triple.getText()).toBe('981-000-568');

element（locator）.isPresent（）*

要素がページに表示されるかどうかを決定します。

例

見ます

<span>{{person.name}}</span>

コード

expect(element(by.binding('person.name')).isPresent()).toBe(true);
//will check for the existence of element

expect(element(by.binding('notPresent')).isPresent()).toBe(false);
//will check for the non-existence of element

element（locator）.isElementPresent（）*

element（locator）.isPresent（）と同じです。唯一の違いは、現在の要素ファインダーではなく、サブロケーターによって識別された要素が存在するかどうかをチェックすることです。

*element.all（locator）.evaluate*

名前が示すように、入力が現在の基本要素のスコープ上にあるかどうかを評価します。

例

見ます

<span id = "foo">{{letiableInScope}}</span>

コード

let value = element(by.id('.foo')).evaluate('letiableInScope');

*element（locator）.allowAnimations*

名前が示すように、現在の基本要素でアニメーションを許可するかどうかを決定します。

例

element(by.css('body')).allowAnimations(false);

*element（locator）.equals*

名前が示すように、要素の同等性を比較します。

ロケーター（by）API

基本的に、バインディング、モデルなどによってAngularアプリケーションで要素を見つける方法を提供する要素ロケーター戦略のコレクションです。

関数とその説明

ProtractorLocators APIの機能は次のとおりです-

by.addLocator（locatorName、fuctionOrScript）*

ProtrcatorByのこのインスタンスにロケーターを追加し、さらにelement（by.locatorName（args））で使用できます。

例

見ます

<button ng-click = "doAddition()">Go!</button>

コード

//Adding the custom locator.
by.addLocator('buttonTextSimple', function(buttonText, opt_parentElement, opt_rootSelector) {
   var using = opt_parentElement || document,
   buttons = using.querySelectorAll('button');
   return Array.prototype.filter.call(buttons, function(button) {
      return button.textContent === buttonText;
   });
});
element(by.buttonTextSimple('Go!')).click();//Using the custom locator.

*by.binding*

名前が示すように、テキストバインディングによって要素を見つけます。入力文字列を含む変数にバインドされた要素が返されるように、部分一致が行われます。

例

見ます

<span>{{person.name}}</span>
<span ng-bind = "person.email"></span>

コード

var span1 = element(by.binding('person.name'));
expect(span1.getText()).toBe('Foo');

var span2 = element(by.binding('person.email'));
expect(span2.getText()).toBe('[email protected]');

*by.exactbinding*

名前が示すように、正確なバインディングによって要素を見つけます。

例

見ます

<spangt;{{ person.name }}</spangt;
<span ng-bind = "person-email"gt;</spangt;
<spangt;{{person_phone|uppercase}}</span>

コード

expect(element(by.exactBinding('person.name')).isPresent()).toBe(true);
expect(element(by.exactBinding('person-email')).isPresent()).toBe(true);
expect(element(by.exactBinding('person')).isPresent()).toBe(false);
expect(element(by.exactBinding('person_phone')).isPresent()).toBe(true);
expect(element(by.exactBinding('person_phone|uppercase')).isPresent()).toBe(true);
expect(element(by.exactBinding('phone')).isPresent()).toBe(false);

by.model（modelName）*

名前が示すように、ng-model式によって要素を見つけます。

例

見ます

<input type = "text" ng-model = "person.name">

コード

var input = element(by.model('person.name'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('Foo123');

*by.buttonText*

名前が示すように、テキストでボタンを見つけます。

例

見ます

<button>Save</button>

コード

element(by.buttonText('Save'));

*by.partialButtonText*

名前が示すように、部分的なテキストでボタンを見つけます。

例

見ます

<button>Save my file</button>

コード

element(by.partialButtonText('Save'));

*by.repeater*

名前が示すように、ng-repeat内の要素を見つけます。

例

見ます

<div ng-repeat = "cat in pets">
   <span>{{cat.name}}</span>
   <span>{{cat.age}}</span>
<</div>
<div class = "book-img" ng-repeat-start="book in library">
   <span>{{$index}}</span>
</div>
<div class = "book-info" ng-repeat-end>
   <h4>{{book.name}}</h4>
   <p>{{book.blurb}}</p>
</div>

コード

var secondCat = element(by.repeater('cat in
pets').row(1));//It will return the DIV for the second cat.
var firstCatName = element(by.repeater('cat in pets').
   row(0).column('cat.name'));//It will return the SPAN for the first cat's name.

*by.exactRepeater*

名前が示すように、正確なリピーターによって要素を見つけます。

例

見ます

<li ng-repeat = "person in peopleWithRedHair"></li>
<li ng-repeat = "car in cars | orderBy:year"></li>

コード

expect(element(by.exactRepeater('person in
peopleWithRedHair')).isPresent())
   .toBe(true);
expect(element(by.exactRepeater('person in
people')).isPresent()).toBe(false);
expect(element(by.exactRepeater('car in cars')).isPresent()).toBe(true);

*by.cssContainingText*

名前が示すように、CSSによって、正確な文字列を含む要素を検索します

例

見ます

<ul>
<li class = "pet">Dog</li>
<li class = "pet">Cat</li>
</ul>

コード

var dog = element(by.cssContainingText('.pet', 'Dog'));
//It will return the li for the dog, but not for the cat.

by.options（optionsDescriptor）*

名前が示すように、ng-options式によって要素を見つけます。

例

見ます

<select ng-model = "color" ng-options = "c for c in colors">
   <option value = "0" selected = "selected">red</option>
   <option value = "1">green</option>
</select>

コード

var allOptions = element.all(by.options('c for c in colors'));
expect(allOptions.count()).toEqual(2);
var firstOption = allOptions.first();
expect(firstOption.getText()).toEqual('red');

by.deepCSS（selector）*

名前が示すように、シャドウDOM内でCSSセレクターによって要素を見つけます。

例

見ます

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

コード

var spans = element.all(by.deepCss('span'));
expect(spans.count()).toEqual(3);

Protractor-elements-api

目次

分度器-コアAPIS（続き…）

Elements API

ElementArrayFinderの連鎖関数とその説明

ElementFinderの連鎖機能とその説明

ロケーター（by）API