Kątomierz - Core APIS (CD.…)

W tym rozdziale poznajmy więcej podstawowych interfejsów API Protractora.

Elements API

Element jest jedną z globalnych funkcji ujawnionych przez kątomierz. Ta funkcja przyjmuje lokalizator i zwraca następujące -

  • ElementFinder, który znajduje pojedynczy element na podstawie lokalizatora.
  • ElementArrayFinder, który znajduje tablicę elementów na podstawie lokalizatora.

Obie powyższe metody obsługują łańcuchy, jak omówiono poniżej.

Łańcuchowe funkcje ElementArrayFinder i ich opisy

Poniżej przedstawiono funkcje ElementArrayFinder -

element.all(locator).clone

Jak sama nazwa wskazuje, funkcja ta utworzy płytką kopię tablicy elementów, czyli ElementArrayFinder.

element.all(locator).all(locator)

Ta funkcja w zasadzie zwraca nowy element ElementArrayFinder, który może być pusty lub zawierać elementy potomne. Można go używać do wybierania wielu elementów jako tablicy w następujący sposób

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)

Jak sama nazwa wskazuje, po zastosowaniu funkcji filtrującej do każdego elementu w ElementArrayFinder, zwraca nowy ElementArrayFinder ze wszystkimi elementami, które przechodzą przez funkcję filtrującą. Zasadniczo ma dwa argumenty, pierwszy to ElementFinder, a drugi to indeks. Może być również używany w obiektach stron.

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)

Dzięki temu możemy pobrać element w ElementArrayFinder według indeksu. Zauważ, że indeks zaczyna się od 0, a indeksy ujemne są zawijane.

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

Jak sama nazwa wskazuje, spowoduje to uzyskanie pierwszego elementu elementu ElementArrayFinder. Nie pobierze podstawowego elementu.

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

Jak sugeruje nazwa, spowoduje to pobranie ostatniego elementu elementu ElementArrayFinder. Nie pobierze podstawowego elementu.

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)

Służy do znajdowania tablicy elementów w obrębie rodzica, gdy wywołania $$ mogą być połączone.

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

Jak sama nazwa wskazuje, policzy to liczbę elementów reprezentowanych przez ElementArrayFinder. Nie pobierze podstawowego elementu.

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

Dopasuje elementy do szukacza. Może zwrócić prawdę lub fałsz. Prawda, jeśli są jakieś elementy, które pasują do wyszukiwarki i False w przeciwnym razie.

Example

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

element.all(locator).locator

Jak sama nazwa wskazuje, zwróci najbardziej odpowiedni lokalizator.

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)

Pobierze elementy reprezentowane przez ElementArrayFinder.

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)

Jak sama nazwa wskazuje, wywoła funkcję wejściową na każdym ElementFinder reprezentowanym przez ElementArrayFinder.

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)

Jak sugeruje nazwa, zastosuje funkcję mapy do każdego elementu w ElementArrayFinder. Ma dwa argumenty. Pierwszym byłby ElementFinder, a drugim indeks.

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)

Jak sama nazwa wskazuje, zastosuje funkcję redukuj do akumulatora i każdego elementu znalezionego za pomocą lokalizatora. Ta funkcja zredukuje każdy element do jednej wartości.

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

Jak sama nazwa wskazuje, oceni dane wejściowe, czy znajduje się w zakresie bieżących elementów bazowych, czy nie.

Example

View

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

Code

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

element.all(locator).allowAnimations

Jak nazwa sugeruje, określi, czy animacja jest dozwolona na bieżących elementach bazowych, czy nie.

Example

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

Tworzenie łańcuchów funkcji ElementFindera i ich opisy

Tworzenie łańcuchów funkcji ElementFindera i ich opisy -

element(locator).clone

Jak sama nazwa wskazuje, ta funkcja utworzy płytką kopię elementu ElementFinder.

element(locator).getWebElement()

Zwróci WebElement reprezentowany przez ten element ElementFinder, a błąd WebDriver zostanie zgłoszony, jeśli element nie istnieje.

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)

Znajdzie tablicę elementów w obrębie rodzica.

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)

Znajdzie elementy w rodzicu.

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)

Znajdzie tablicę elementów wewnątrz rodzica, gdy wywołania $$ mogą zostać połączone.

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)

Znajdzie elementy wewnątrz rodzica, gdy wywołania $ mogą być połączone.

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

Określa, czy element jest prezentowany na stronie, czy nie.

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

Działa tak samo jak element (lokalizator) .isPresent (). Jedyną różnicą jest to, że sprawdzi, czy element zidentyfikowany przez sublokator jest obecny, a nie bieżąca wyszukiwarka elementów.

element.all(locator).evaluate

Jak sama nazwa wskazuje, oceni dane wejściowe, czy są one związane z zakresem obecnych elementów bazowych, czy nie.

Example

View

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

Code

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

element(locator).allowAnimations

Jak sama nazwa wskazuje, określi, czy animacja jest dozwolona na bieżących elementach bazowych, czy nie.

Example

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

element(locator).equals

Jak sama nazwa wskazuje, będzie porównywać element równości.

Lokalizatory (według) API

Jest to po prostu zbiór strategii lokalizatora elementów, który zapewnia sposoby znajdowania elementów w aplikacjach Angular poprzez wiązanie, modelowanie itp.

Functions and their descriptions

Funkcje interfejsu API ProtractorLocators są następujące -

by.addLocator(locatorName,fuctionOrScript)

Doda lokalizator do tej instancji ProtrcatorBy, którego można następnie użyć z elementem (by.locatorName (args)).

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

Jak sama nazwa wskazuje, znajdzie element poprzez powiązanie tekstu. Zostanie wykonane częściowe dopasowanie, tak aby wszystkie elementy powiązane ze zmiennymi zawierającymi ciąg wejściowy zostały zwrócone.

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

Jak sama nazwa wskazuje, znajdzie element poprzez dokładne powiązanie.

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)

Jak sama nazwa wskazuje, znajdzie element poprzez wyrażenie ng-model.

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

Jak sama nazwa wskazuje, znajdzie przycisk po tekście.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Jak sama nazwa wskazuje, znajdzie przycisk według częściowego tekstu.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Jak sama nazwa wskazuje, znajdzie element wewnątrz powtórzenia ng.

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

Jak sama nazwa wskazuje, znajdzie element po dokładnym przemienniku.

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

Jak nazwa sugeruje, znajdzie elementy zawierające dokładny ciąg według CSS

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)

Jak sama nazwa wskazuje, znajdzie element za pomocą wyrażenia ng-options.

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)

Jak nazwa sugeruje, znajdzie element za pomocą selektora CSS w Shadow DOM.

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);
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved