İletki - Core APIS (CONTD…)

Bu bölümde, Protractor'ın bazı temel API'lerini öğrenelim.

Elements API

Öğe, iletki tarafından ortaya çıkan global işlevlerden biridir. Bu işlev bir konum belirleyiciyi alır ve aşağıdakini döndürür -

• Konumlandırıcıya göre tek bir öğe bulan ElementFinder.
• Konumlandırıcıya göre bir dizi öğe bulan ElementArrayFinder.

Yukarıdaki her ikisi de aşağıda tartışıldığı gibi zincirleme yöntemlerini destekler.

ElementArrayFinder'ın zincirleme fonksiyonları ve açıklamaları

Aşağıdakiler, ElementArrayFinder'ın işlevleridir -

element.all(locator).clone

Adından da anlaşılacağı gibi, bu işlev elemanlar dizisinin yüzeysel bir kopyasını oluşturur, yani ElementArrayFinder.

element.all(locator).all(locator)

Bu işlev temelde boş olabilecek veya alt öğeleri içeren yeni bir ElementArrayFinder döndürür. Aşağıdaki gibi birden çok elemanı bir dizi olarak seçmek için kullanılabilir

Example

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)

Adından da anlaşılacağı gibi, ElementArrayFinder içindeki her öğeye filtre işlevi uyguladıktan sonra, filtre işlevini geçen tüm öğeleri içeren yeni bir ElementArrayFinder döndürür. Temelde iki argümana sahip, birincisi ElementFinder ve ikincisi indeks. Sayfa nesnelerinde de kullanılabilir.

Example

View

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

Code

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)

Bunun yardımı ile ElementArrayFinder içinde indeks ile bir eleman elde edebiliriz. Endeksin 0'dan başladığını ve negatif endekslerin sarıldığını unutmayın.

Example

View

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

Code

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()

Adından da anlaşılacağı gibi, bu ElementArrayFinder için ilk öğeyi alacaktır. Altta yatan öğeyi almayacaktır.

Example

View

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

Code

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

element.all(locator).last()

Adından da anlaşılacağı gibi, bu ElementArrayFinder için son öğeyi alacaktır. Altta yatan öğeyi almayacaktır.

Example

View

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

Code

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

element.all(locator).all(selector)

$$ çağrıları zincirlendiğinde bir üst öğe içindeki bir dizi öğeyi bulmak için kullanılır.

Example

View

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

Code

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

element.all(locator).count()

Adından da anlaşılacağı gibi bu, ElementArrayFinder tarafından temsil edilen öğelerin sayısını sayacaktır. Altta yatan öğeyi almayacaktır.

Example

View

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

Code

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

element.all(locator).isPresent()

Öğeleri bulucu ile eşleştirecektir. Doğru veya yanlış dönebilir. Doğru, bulucu ile eşleşen herhangi bir öğe varsa, aksi takdirde Yanlış.

Example

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

element.all(locator).locator

Adından da anlaşılacağı gibi, en alakalı konum belirleyiciyi döndürecektir.

Example

$('#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 tarafından temsil edilen öğeleri alır.

Example

View

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

Code

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

element.all(locator).each(eachFunction)

Adından da anlaşılacağı gibi, ElementArrayFinder tarafından temsil edilen her ElementFinder'da input fonksiyonunu çağıracaktır.

Example

View

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

Code

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)

Adından da anlaşılacağı gibi, ElementArrayFinder içindeki her elemana bir eşleme işlevi uygulayacaktır. İki argümanı var. Birincisi ElementFinder ve ikincisi indeks olacaktır.

Example

View

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

Code

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)

Adından da anlaşılacağı gibi, bir akümülatöre ve konumlandırıcı kullanılarak bulunan her öğeye karşı bir azaltma işlevi uygulayacaktır. Bu işlev, her öğeyi tek bir değere indirgeyecektir.

Example

View

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

Code

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

Adından da anlaşılacağı gibi, girdiyi mevcut temel unsurların kapsamında olup olmadığını değerlendirecektir.

Example

View

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

Code

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

element.all(locator).allowAnimations

Adından da anlaşılacağı gibi, animasyona mevcut temel öğelerde izin verilip verilmediğini belirleyecektir.

Example

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

ElementFinder'ın zincirleme fonksiyonları ve açıklamaları

ElementFinder'ın zincirleme fonksiyonları ve açıklamaları -

element(locator).clone

Adından da anlaşılacağı gibi, bu işlev ElementFinder'ın sığ bir kopyasını oluşturacaktır.

element(locator).getWebElement()

Bu ElementFinder tarafından temsil edilen WebElement'i döndürür ve öğe yoksa bir WebDriver hatası atılır.

Example

View

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

Code

// 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)

Bir ebeveyn içinde bir dizi öğe bulacaktır.

Example

View

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

Code

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

element(locator).element(locator)

Bir ebeveynin içindeki öğeleri bulacaktır.

Example

View

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

Code

// 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)

$$ çağrıları zincirlendiğinde bir ebeveyn içinde bir dizi öğe bulacaktır.

Example

View

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

Code

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

element(locator).$(locator)

$ Çağrıları zincirlendiğinde ebeveyn içindeki öğeleri bulur.

Example

View

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

Code

// 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()

Öğenin sayfada gösterilip gösterilmeyeceğini belirleyecektir.

Example

View

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

Code

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()

Öğe (yer belirleyici) .isPresent () ile aynıdır. Tek fark, alt konumlandırıcı tarafından tanımlanan elemanın mevcut eleman bulucu yerine mevcut olup olmadığını kontrol edecek olmasıdır.

element.all(locator).evaluate

Adından da anlaşılacağı gibi, girdiyi mevcut temel unsurların kapsamında olup olmadığını değerlendirecektir.

Example

View

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

Code

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

element(locator).allowAnimations

Adından da anlaşılacağı gibi, animasyona mevcut temel öğelerde izin verilip verilmediğini belirleyecektir.

Example

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

element(locator).equals

Adından da anlaşılacağı gibi, eşitlik için bir unsuru karşılaştıracaktır.

Konumlayıcılar (API'ye göre)

Temel olarak, Angular uygulamalarda öğeleri bağlama, model vb.

Functions and their descriptions

ProtractorLocators API'nin işlevleri aşağıdaki gibidir -

by.addLocator(locatorName,fuctionOrScript)

Bu ProtrcatorBy örneğine, öğeyle (by.locatorName (args)) kullanılabilecek bir yer belirleyici ekleyecektir.

Example

View

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

Code

// 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

Adından da anlaşılacağı gibi, metin bağlama yoluyla bir öğe bulacaktır. Girdi dizesini içeren değişkenlere bağlı herhangi bir öğenin döndürülmesi için kısmi eşleşme yapılacaktır.

Example

View

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

Code

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

Adından da anlaşılacağı gibi, tam bağlama ile bir öğe bulacaktır.

Example

View

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

Code

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)

Adından da anlaşılacağı gibi, ng-model ifadesine göre bir öğe bulacaktır.

Example

View

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

Code

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

by.buttonText

Adından da anlaşılacağı gibi, metinle bir düğme bulacaktır.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Adından da anlaşılacağı gibi, kısmi metinle bir düğme bulacaktır.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Adından da anlaşılacağı gibi, bir ng-tekrarının içinde bir öğe bulacaktır.

Example

View

<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>

Code

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

Adından da anlaşılacağı gibi, tam tekrarlayıcıyla bir eleman bulacaktır.

Example

View

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

Code

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

Adından da anlaşılacağı gibi, tam dizeyi içeren öğeleri CSS ile bulacaktır.

Example

View

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

Code

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

by.options(optionsDescriptor)

Adından da anlaşılacağı gibi ng-options ifadesine göre bir eleman bulacaktır.

Example

View

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

Code

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)

Adından da anlaşılacağı gibi, gölge DOM içinde CSS seçici ile bir öğe bulacaktır.

Example

View

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

Code

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