Transportador - Núcleo APIS (CONT.…)

En este capítulo, aprendamos algunas API principales de Transportador.

API de elementos

El elemento es una de las funciones globales expuestas por transportador. Esta función toma un localizador y devuelve lo siguiente:

ElementFinder, que encuentra un solo elemento basado en el localizador.
ElementArrayFinder, que encuentra una matriz de elementos basados en el localizador.

Ambos métodos de encadenamiento de soporte anteriores como se describe a continuación.

Encadenando funciones de ElementArrayFinder y sus descripciones

Las siguientes son las funciones de ElementArrayFinder:

element.all(locator).clone

Como sugiere el nombre, esta función creará una copia superficial de la matriz de elementos, es decir, ElementArrayFinder.

element.all(locator).all(locator)

Básicamente, esta función devuelve un nuevo ElementArrayFinder que podría estar vacío o contener los elementos secundarios. Se puede utilizar para seleccionar varios elementos como una matriz de la siguiente manera

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 sugiere el nombre, después de aplicar la función de filtro a cada elemento dentro de ElementArrayFinder, devuelve un nuevo ElementArrayFinder con todos los elementos que pasan la función de filtro. Básicamente tiene dos argumentos, el primero es ElementFinder y el segundo es index. También se puede utilizar en 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)

Con la ayuda de esto, podemos obtener un elemento dentro de ElementArrayFinder por índice. Tenga en cuenta que el índice comienza en 0 y los índices negativos se envuelven.

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 sugiere el nombre, esto obtendrá el primer elemento para ElementArrayFinder. No recuperará el elemento subyacente.

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 sugiere el nombre, esto obtendrá el último elemento de ElementArrayFinder. No recuperará el elemento subyacente.

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)

Se usa para encontrar una matriz de elementos dentro de un padre cuando las llamadas a $$ pueden estar encadenadas.

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 sugiere el nombre, esto contará el número de elementos representados por ElementArrayFinder. No recuperará el elemento subyacente.

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

Hará coincidir los elementos con el buscador. Puede devolver verdadero o falso. Verdadero, si hay elementos presentes que coincidan con el buscador y Falso en caso contrario.

Example

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

element.all(locator).locator

Como sugiere el nombre, devolverá el localizador más 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)

Recuperará los elementos representados por 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 sugiere el nombre, llamará a la función de entrada en cada ElementFinder representado por 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 sugiere el nombre, aplicará una función de mapa en cada elemento dentro de ElementArrayFinder. Tiene dos argumentos. Primero sería ElementFinder y segundo sería el í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 sugiere el nombre, aplicará una función de reducción contra un acumulador y cada elemento encontrado usando el localizador. Esta función reducirá cada elemento a un solo 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 sugiere el nombre, evaluará la entrada si está dentro del alcance de los elementos subyacentes actuales o no.

Example

View

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

Code

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

element.all(locator).allowAnimations

Como sugiere el nombre, determinará si la animación está permitida en los elementos subyacentes actuales o no.

Example

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

Encadenamiento de funciones de ElementFinder y sus descripciones

Encadenamiento de funciones de ElementFinder y sus descripciones -

element(locator).clone

Como sugiere el nombre, esta función creará una copia superficial del ElementFinder.

element(locator).getWebElement()

Devolverá el WebElement representado por este ElementFinder y se lanzará un error WebDriver si el elemento no existe.

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)

Encontrará una matriz de elementos dentro de un padre.

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)

Encontrará elementos dentro de un padre.

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)

Encontrará una matriz de elementos dentro de un padre cuando las llamadas a $$ puedan estar encadenadas.

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)

Encontrará elementos dentro de un padre cuando las llamadas a $ puedan estar encadenadas.

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

Determinará si el elemento se presenta en la página o no.

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

Es lo mismo que element (locator) .isPresent (). La única diferencia es que verificará si el elemento identificado por sublocator está presente en lugar del buscador de elementos actual.

element.all(locator).evaluate

Como sugiere el nombre, evaluará la entrada si está en el alcance de los elementos subyacentes actuales o no.

Example

View

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

Code

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

element(locator).allowAnimations

Como sugiere el nombre, determinará si la animación está permitida en los elementos subyacentes actuales o no.

Example

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

element(locator).equals

Como sugiere el nombre, comparará un elemento para determinar la igualdad.

Localizadores (por) API

Básicamente es una colección de estrategias de localizador de elementos que proporciona formas de encontrar elementos en aplicaciones angulares mediante enlace, modelo, etc.

Functions and their descriptions

Las funciones de la API de ProtractorLocators son las siguientes:

by.addLocator(locatorName,fuctionOrScript)

Agregará un localizador a esta instancia de ProtrcatorBy que además se puede usar con el 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 sugiere el nombre, encontrará un elemento por enlace de texto. Se realizará una coincidencia parcial para que se devuelva cualquier elemento vinculado a las variables que contienen la cadena de entrada.

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 sugiere el nombre, encontrará un elemento por enlace exacto.

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 sugiere el nombre, encontrará un elemento mediante la expresión 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

Como sugiere el nombre, encontrará un botón por texto.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Como sugiere el nombre, encontrará un botón por texto parcial.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Como sugiere el nombre, encontrará un elemento dentro de una repetición 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 sugiere el nombre, encontrará un elemento por repetidor exacto.

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 sugiere el nombre, encontrará los elementos, que contienen la cadena exacta, 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 sugiere el nombre, encontrará un elemento mediante la expresión 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 sugiere el nombre, encontrará un elemento mediante el selector de CSS dentro de la sombra 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);

↰ Previous page Next page ↱