Transferidor - Core APIS (CONTD ...)

Neste capítulo, vamos aprender mais algumas APIs básicas do Protractor.

Elements API

O elemento é uma das funções globais expostas pelo transferidor. Esta função pega um localizador e retorna o seguinte -

ElementFinder, que encontra um único elemento com base no localizador.
ElementArrayFinder, que encontra uma matriz de elementos com base no localizador.

Ambos os métodos acima suportam encadeamento conforme discutido abaixo.

Funções de encadeamento de ElementArrayFinder e suas descrições

As seguintes são as funções de ElementArrayFinder -

element.all(locator).clone

Como o nome sugere, esta função criará uma cópia superficial do array dos elementos, ou seja, ElementArrayFinder.

element.all(locator).all(locator)

Esta função basicamente retorna um novo ElementArrayFinder que pode estar vazio ou conter os elementos filhos. Pode ser usado para selecionar vários elementos como uma matriz da seguinte forma

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)

Como o nome sugere, após aplicar a função de filtro a cada elemento em ElementArrayFinder, ele retorna um novo ElementArrayFinder com todos os elementos que passam pela função de filtro. Ele tem basicamente dois argumentos, o primeiro é ElementFinder e o segundo é o índice. Ele também pode ser usado em objetos de página.

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)

Com a ajuda disso, podemos obter um elemento dentro do ElementArrayFinder por índice. Observe que o índice começa em 0 e os índices negativos são quebrados.

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

Como o nome sugere, isso obterá o primeiro elemento para ElementArrayFinder. Ele não recuperará o elemento subjacente.

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

Como o nome sugere, isso obterá o último elemento para ElementArrayFinder. Ele não recuperará o elemento subjacente.

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)

É usado para localizar uma matriz de elementos dentro de um pai quando chamadas para $$ podem ser encadeadas.

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

Como o nome sugere, isso contará o número de elementos representados por ElementArrayFinder. Ele não recuperará o elemento subjacente.

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

Ele irá combinar os elementos com o localizador. Ele pode retornar verdadeiro ou falso. Verdadeiro, se houver qualquer elemento presente que corresponda ao localizador e Falso caso contrário.

Example

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

element.all(locator).locator

Como o nome sugere, ele retornará o localizador mais relevante.

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)

Ele recuperará os elementos representados pelo 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)

Como o nome sugere, ele chamará a função de entrada em cada ElementFinder representado pelo 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)

Como o nome sugere, ele aplicará uma função de mapa em cada elemento dentro do ElementArrayFinder. É ter dois argumentos. O primeiro seria o ElementFinder e o segundo seria o índice.

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)

Como o nome sugere, ele aplicará uma função de redução contra um acumulador e todos os elementos encontrados usando o localizador. Esta função reduzirá cada elemento em um único valor.

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

Como o nome sugere, ele avaliará a entrada se está no escopo dos elementos subjacentes atuais ou não.

Example

View

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

Code

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

element.all(locator).allowAnimations

Como o nome sugere, ele determinará se a animação é permitida nos elementos subjacentes atuais ou não.

Example

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

Funções de encadeamento de ElementFinder e suas descrições

Funções de encadeamento do ElementFinder e suas descrições -

element(locator).clone

Como o nome sugere, esta função criará uma cópia superficial do ElementFinder.

element(locator).getWebElement()

Ele retornará o WebElement representado por este ElementFinder e um erro de WebDriver será lançado se o elemento não existir.

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)

Ele encontrará uma matriz de elementos dentro de um pai.

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)

Ele encontrará elementos dentro de um pai.

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)

Ele encontrará uma matriz de elementos dentro de um pai quando as chamadas para $$ puderem ser encadeadas.

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)

Ele encontrará elementos dentro de um pai quando as chamadas para $ puderem ser encadeadas.

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

Ele determinará se o elemento é apresentado na página ou não.

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

É o mesmo que element (localizador) .isPresent (). A única diferença é que ele verificará se o elemento identificado pelo sublocator está presente em vez do localizador de elemento atual.

element.all(locator).evaluate

Como o nome sugere, ele avaliará a entrada se está no escopo dos elementos subjacentes atuais ou não.

Example

View

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

Code

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

element(locator).allowAnimations

Como o nome sugere, ele determinará se a animação é permitida nos elementos subjacentes atuais ou não.

Example

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

element(locator).equals

Como o nome sugere, ele irá comparar um elemento de igualdade.

Localizadores (por) API

É basicamente uma coleção de estratégias de localizador de elemento que fornece maneiras de encontrar elementos em aplicativos angulares por vinculação, modelo etc.

Functions and their descriptions

As funções da API ProtractorLocators são as seguintes -

by.addLocator(locatorName,fuctionOrScript)

Ele adicionará um localizador a esta instância de ProtrcatorBy que ainda pode ser usado com o elemento (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

Como o nome sugere, ele encontrará um elemento por vinculação de texto. Uma correspondência parcial será feita para que quaisquer elementos vinculados às variáveis que contêm a string de entrada sejam retornados.

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

Como o nome sugere, ele encontrará um elemento por ligação exata.

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)

Como o nome sugere, ele encontrará um elemento pela expressão do modelo ng.

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

Como o nome sugere, ele encontrará um botão por texto.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Como o nome sugere, ele encontrará um botão por texto parcial.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Como o nome sugere, ele encontrará um elemento dentro de uma repetição de 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

Como o nome sugere, ele encontrará um elemento por repetidor exato.

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

Como o nome sugere, ele encontrará os elementos, contendo a string exata, por 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)

Como o nome sugere, ele encontrará um elemento pela expressão 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)

Como o nome sugere, ele encontrará um elemento por seletor CSS no DOM shadow.

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

↰ Previous page Next page ↱