Goniometro - Core APIS (CONTD ...)

In questo capitolo, impariamo alcune altre API principali di Protractor.

API Elements

Element è una delle funzioni globali esposte dal goniometro. Questa funzione prende un localizzatore e restituisce quanto segue:

ElementFinder, che trova un singolo elemento in base al localizzatore.
ElementArrayFinder, che trova un array di elementi in base al localizzatore.

Entrambi i metodi di concatenamento di cui sopra supportano come discusso di seguito.

Funzioni di concatenamento di ElementArrayFinder e relative descrizioni

Le seguenti sono le funzioni di ElementArrayFinder -

element.all(locator).clone

Come suggerisce il nome, questa funzione creerà una copia superficiale dell'array degli elementi, ad esempio ElementArrayFinder.

element.all(locator).all(locator)

Questa funzione sostanzialmente restituisce un nuovo ElementArrayFinder che potrebbe essere vuoto o contenere gli elementi figli. Può essere utilizzato per selezionare più elementi come un array come segue

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)

Come suggerisce il nome, dopo aver applicato la funzione di filtro a ciascun elemento all'interno di ElementArrayFinder, restituisce un nuovo ElementArrayFinder con tutti gli elementi che passano la funzione di filtro. Fondamentalmente ha due argomenti, il primo è ElementFinder e il secondo è indice. Può essere utilizzato anche negli oggetti della pagina.

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 l'aiuto di questo, possiamo ottenere un elemento all'interno di ElementArrayFinder per indice. Notare che l'indice inizia da 0 e gli indici negativi sono avvolti.

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

Come suggerisce il nome, questo otterrà il primo elemento per ElementArrayFinder. Non recupererà l'elemento sottostante.

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

Come suggerisce il nome, questo otterrà l'ultimo elemento per ElementArrayFinder. Non recupererà l'elemento sottostante.

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)

Viene utilizzato per trovare un array di elementi all'interno di un genitore quando le chiamate a $$ possono essere concatenate.

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

Come suggerisce il nome, questo conterà il numero di elementi rappresentati da ElementArrayFinder. Non recupererà l'elemento sottostante.

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

Abbinerà gli elementi con il cercatore. Può restituire vero o falso. Vero, se sono presenti elementi che corrispondono al cercatore e False in caso contrario.

Example

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

element.all(locator).locator

Come suggerisce il nome, restituirà il localizzatore più rilevante.

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)

Recupererà gli elementi rappresentati da 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)

Come suggerisce il nome, chiamerà la funzione di input su ogni ElementFinder rappresentato da 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)

Come suggerisce il nome, applicherà una funzione mappa su ogni elemento all'interno di ElementArrayFinder. Ha due argomenti. Il primo sarebbe l'ElementFinder e il secondo sarebbe l'indice.

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)

Come suggerisce il nome, applicherà una funzione di riduzione contro un accumulatore e ogni elemento trovato utilizzando il localizzatore. Questa funzione ridurrà ogni elemento in un unico valore.

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

Come suggerisce il nome, valuterà l'input indipendentemente dal fatto che rientri o meno nell'ambito degli elementi sottostanti correnti.

Example

View

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

Code

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

element.all(locator).allowAnimations

Come suggerisce il nome, determinerà se l'animazione è consentita o meno sugli elementi sottostanti correnti.

Example

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

Funzioni di concatenamento di ElementFinder e loro descrizioni

Funzioni di concatenamento di ElementFinder e loro descrizioni -

element(locator).clone

Come suggerisce il nome, questa funzione creerà una copia superficiale di ElementFinder.

element(locator).getWebElement()

Restituirà il WebElement rappresentato da questo ElementFinder e verrà generato un errore WebDriver se l'elemento non esiste.

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)

Troverà una serie di elementi all'interno di un genitore.

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)

Troverà elementi all'interno di un genitore.

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)

Troverà un array di elementi all'interno di un genitore quando le chiamate a $$ possono essere concatenate.

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)

Troverà elementi all'interno di un genitore quando le chiamate a $ possono essere concatenate.

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

Determinerà se l'elemento è presentato sulla pagina o meno.

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

È uguale a element (locator) .isPresent (). L'unica differenza è che controllerà se l'elemento identificato da sublocator è presente piuttosto che il cercatore di elementi corrente.

element.all(locator).evaluate

Come suggerisce il nome, valuterà l'input indipendentemente dal fatto che rientri o meno nell'ambito degli elementi sottostanti correnti.

Example

View

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

Code

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

element(locator).allowAnimations

Come suggerisce il nome, determinerà se l'animazione è consentita o meno sugli elementi sottostanti correnti.

Example

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

element(locator).equals

Come suggerisce il nome, confronterà un elemento per l'uguaglianza.

Localizzatori (di) API

È fondamentalmente una raccolta di strategie di localizzazione di elementi che fornisce modi per trovare elementi nelle applicazioni angolari mediante associazione, modello ecc.

Functions and their descriptions

Le funzioni dell'API di ProtractorLocators sono le seguenti:

by.addLocator(locatorName,fuctionOrScript)

Aggiungerà un localizzatore a questa istanza di ProtrcatorBy che può essere ulteriormente utilizzato con element (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

Come suggerisce il nome, troverà un elemento per associazione di testo. Verrà eseguita una corrispondenza parziale in modo che vengano restituiti tutti gli elementi associati alle variabili contenenti la stringa di input.

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

Come suggerisce il nome, troverà un elemento per associazione esatta.

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)

Come suggerisce il nome, troverà un elemento mediante l'espressione 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

Come suggerisce il nome, troverà un pulsante per testo.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Come suggerisce il nome, troverà un pulsante per testo parziale.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Come suggerisce il nome, troverà un elemento all'interno di una ripetizione 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

Come suggerisce il nome, troverà un elemento per ripetitore esatto.

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

Come suggerisce il nome, troverà gli elementi, contenenti la stringa esatta, tramite 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)

Come suggerisce il nome, troverà un elemento tramite l'espressione 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)

Come suggerisce il nome, troverà un elemento dal selettore CSS all'interno del DOM ombra.

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 ↱

Goniometro - Core APIS (CONTD ...)

API Elements

Funzioni di concatenamento di ElementArrayFinder e relative descrizioni

Funzioni di concatenamento di ElementFinder e loro descrizioni

Localizzatori (di) API

Tutorial goniometro