Rapporteur - Core APIS (SUITE…)

Dans ce chapitre, apprenons d'autres API de base de Protractor.

API Elements

L'élément est l'une des fonctions globales exposées par le rapporteur. Cette fonction prend un localisateur et renvoie ce qui suit -

ElementFinder, qui trouve un seul élément basé sur le localisateur.
ElementArrayFinder, qui trouve un tableau d'éléments en fonction du localisateur.

Les deux méthodes ci-dessus prennent en charge les méthodes de chaînage décrites ci-dessous.

Fonctions de chaînage d'ElementArrayFinder et leurs descriptions

Les éléments suivants sont les fonctions de ElementArrayFinder -

element.all(locator).clone

Comme son nom l'indique, cette fonction créera une copie superficielle du tableau des éléments, c'est-à-dire ElementArrayFinder.

element.all(locator).all(locator)

Cette fonction renvoie essentiellement un nouveau ElementArrayFinder qui pourrait être vide ou contenir les éléments enfants. Il peut être utilisé pour sélectionner plusieurs éléments sous forme de tableau comme suit

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)

Comme son nom l'indique, après avoir appliqué la fonction de filtre à chaque élément dans ElementArrayFinder, il retourne un nouveau ElementArrayFinder avec tous les éléments qui passent la fonction de filtre. Il a essentiellement deux arguments, le premier est ElementFinder et le second est index. Il peut également être utilisé dans les objets de page.

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)

Avec l'aide de cela, nous pouvons obtenir un élément dans ElementArrayFinder par index. Notez que l'index commence à 0 et que les indices négatifs sont encapsulés.

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

Comme son nom l'indique, cela obtiendra le premier élément pour ElementArrayFinder. Il ne récupérera pas l'élément sous-jacent.

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

Comme son nom l'indique, cela obtiendra le dernier élément pour ElementArrayFinder. Il ne récupérera pas l'élément sous-jacent.

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)

Il est utilisé pour trouver un tableau d'éléments dans un parent lorsque les appels à $$ peuvent être chaînés.

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

Comme son nom l'indique, cela comptera le nombre d'éléments représentés par ElementArrayFinder. Il ne récupérera pas l'élément sous-jacent.

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

Il fera correspondre les éléments avec le chercheur. Il peut renvoyer vrai ou faux. True, s'il y a des éléments présents qui correspondent au chercheur et False sinon.

Example

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

element.all(locator).locator

Comme son nom l'indique, il renverra le localisateur le plus pertinent.

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)

Il récupérera les éléments représentés par le 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)

Comme son nom l'indique, il appellera la fonction d'entrée sur chaque ElementFinder représenté par 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)

Comme son nom l'indique, il appliquera une fonction de carte sur chaque élément dans ElementArrayFinder. Il a deux arguments. Le premier serait le ElementFinder et le second serait l'index.

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)

Comme son nom l'indique, il appliquera une fonction de réduction à un accumulateur et à chaque élément trouvé à l'aide du localisateur. Cette fonction réduira chaque élément en une seule valeur.

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

Comme son nom l'indique, il évaluera l'entrée si elle est dans la portée des éléments sous-jacents actuels ou non.

Example

View

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

Code

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

element.all(locator).allowAnimations

Comme son nom l'indique, il déterminera si l'animation est autorisée sur les éléments sous-jacents actuels ou non.

Example

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

Fonctions de chaînage d'ElementFinder et leurs descriptions

Fonctions de chaînage d'ElementFinder et leurs descriptions -

element(locator).clone

Comme son nom l'indique, cette fonction créera une copie superficielle de ElementFinder.

element(locator).getWebElement()

Il renverra le WebElement représenté par ce ElementFinder et une erreur WebDriver sera renvoyée si l'élément n'existe pas.

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)

Il trouvera un tableau d'éléments dans un parent.

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)

Il trouvera des éléments dans un parent.

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)

Il trouvera un tableau d'éléments dans un parent lorsque les appels à $$ peuvent être chaînés.

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)

Il trouvera des éléments dans un parent lorsque les appels à $ peuvent être chaînés.

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

Il déterminera si l'élément est présenté sur la page ou non.

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

C'est la même chose que element (locator) .isPresent (). La seule différence est qu'il vérifiera si l'élément identifié par sublocator est présent plutôt que le chercheur d'élément actuel.

element.all(locator).evaluate

Comme son nom l'indique, il évaluera l'entrée si elle est sur la portée des éléments sous-jacents actuels ou non.

Example

View

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

Code

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

element(locator).allowAnimations

Comme son nom l'indique, il déterminera si l'animation est autorisée sur les éléments sous-jacents actuels ou non.

Example

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

element(locator).equals

Comme son nom l'indique, il comparera un élément pour l'égalité.

Localisateurs (par) API

Il s'agit essentiellement d'une collection de stratégies de localisation d'éléments qui fournit des moyens de rechercher des éléments dans les applications angulaires par liaison, modèle, etc.

Functions and their descriptions

Les fonctions de l'API ProtractorLocators sont les suivantes -

by.addLocator(locatorName,fuctionOrScript)

Il ajoutera un localisateur à cette instance de ProtrcatorBy qui pourra en outre être utilisé avec 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

Comme son nom l'indique, il trouvera un élément par liaison de texte. Une correspondance partielle sera effectuée afin que tous les éléments liés aux variables contenant la chaîne d'entrée soient renvoyés.

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

Comme son nom l'indique, il trouvera un élément par liaison exacte.

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)

Comme son nom l'indique, il trouvera un élément par l'expression 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

Comme son nom l'indique, il trouvera un bouton par texte.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Comme son nom l'indique, il trouvera un bouton par texte partiel.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Comme son nom l'indique, il trouvera un élément à l'intérieur d'un ng-repeat.

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

Comme son nom l'indique, il trouvera un élément par répéteur exact.

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

Comme son nom l'indique, il trouvera les éléments, contenant la chaîne exacte, par 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)

Comme son nom l'indique, il trouvera un élément par l'expression 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)

Comme son nom l'indique, il trouvera un élément par sélecteur CSS dans le 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);

↰ Previous page Next page ↱

Rapporteur - Core APIS (SUITE…)

API Elements

Fonctions de chaînage d'ElementArrayFinder et leurs descriptions

Fonctions de chaînage d'ElementFinder et leurs descriptions

Localisateurs (par) API

Tutoriel de rapporteur