Winkelmesser - Core APIS (FORTSETZUNG…)

In diesem Kapitel lernen wir einige weitere Kern-APIs von Protractor kennen.

Elements API

Element ist eine der globalen Funktionen des Winkelmessers. Diese Funktion nimmt einen Locater und gibt Folgendes zurück:

  • ElementFinder, der ein einzelnes Element basierend auf dem Locator findet.
  • ElementArrayFinder, der ein Array von Elementen basierend auf dem Locator findet.

Beide oben genannten unterstützen Verkettungsmethoden, wie unten diskutiert.

Verkettungsfunktionen von ElementArrayFinder und deren Beschreibungen

Das Folgende sind die Funktionen von ElementArrayFinder -

element.all(locator).clone

Wie der Name schon sagt, erstellt diese Funktion eine flache Kopie des Arrays der Elemente, dh ElementArrayFinder.

element.all(locator).all(locator)

Diese Funktion gibt grundsätzlich einen neuen ElementArrayFinder zurück, der leer sein oder die untergeordneten Elemente enthalten kann. Es kann wie folgt zum Auswählen mehrerer Elemente als Array verwendet werden

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)

Wie der Name schon sagt, wird nach dem Anwenden der Filterfunktion auf jedes Element in ElementArrayFinder ein neuer ElementArrayFinder mit allen Elementen zurückgegeben, die die Filterfunktion übergeben. Grundsätzlich gibt es zwei Argumente: erstens ElementFinder und zweitens Index. Es kann auch in Seitenobjekten verwendet werden.

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)

Mit dieser Hilfe können wir ein Element innerhalb des ElementArrayFinder nach Index abrufen. Beachten Sie, dass der Index bei 0 beginnt und negative Indizes umbrochen werden.

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

Wie der Name schon sagt, erhält dies das erste Element für ElementArrayFinder. Das zugrunde liegende Element wird nicht abgerufen.

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

Wie der Name schon sagt, erhält dies das letzte Element für ElementArrayFinder. Das zugrunde liegende Element wird nicht abgerufen.

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)

Es wird verwendet, um ein Array von Elementen in einem übergeordneten Element zu finden, wenn Aufrufe von $$ verkettet werden können.

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

Wie der Name schon sagt, zählt dies die Anzahl der von ElementArrayFinder dargestellten Elemente. Das zugrunde liegende Element wird nicht abgerufen.

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

Es werden die Elemente mit dem Finder abgeglichen. Es kann wahr oder falsch zurückgeben. Richtig, wenn Elemente vorhanden sind, die mit dem Finder übereinstimmen, und ansonsten Falsch.

Example

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

element.all(locator).locator

Wie der Name schon sagt, wird der relevanteste Locator zurückgegeben.

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)

Es werden die vom ElementArrayFinder dargestellten Elemente abgerufen.

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)

Wie der Name schon sagt, wird die Eingabefunktion für jeden ElementFinder aufgerufen, der vom ElementArrayFinder dargestellt wird.

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)

Wie der Name schon sagt, wird auf jedes Element im ElementArrayFinder eine Kartenfunktion angewendet. Es gibt zwei Argumente. Erstens wäre der ElementFinder und zweitens wäre der 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)

Wie der Name schon sagt, wird eine Reduzierungsfunktion auf einen Akkumulator und jedes Element angewendet, das mit dem Locator gefunden wurde. Diese Funktion reduziert jedes Element auf einen einzigen Wert.

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

Wie der Name schon sagt, wird die Eingabe ausgewertet, ob sie im Umfang der aktuell zugrunde liegenden Elemente liegt oder nicht.

Example

View

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

Code

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

element.all(locator).allowAnimations

Wie der Name schon sagt, wird bestimmt, ob die Animation für die aktuell zugrunde liegenden Elemente zulässig ist oder nicht.

Example

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

Verkettungsfunktionen von ElementFinder und deren Beschreibungen

Verkettungsfunktionen von ElementFinder und deren Beschreibungen -

element(locator).clone

Wie der Name schon sagt, erstellt diese Funktion eine flache Kopie des ElementFinder.

element(locator).getWebElement()

Es wird das von diesem ElementFinder dargestellte WebElement zurückgegeben und ein WebDriver-Fehler wird ausgelöst, wenn das Element nicht vorhanden ist.

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)

Es wird ein Array von Elementen in einem übergeordneten Element gefunden.

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)

Es werden Elemente innerhalb eines übergeordneten Elements gefunden.

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)

Es wird ein Array von Elementen in einem übergeordneten Element gefunden, wenn Aufrufe von $$ verkettet werden können.

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)

Es werden Elemente innerhalb eines übergeordneten Elements gefunden, wenn Aufrufe von $ verkettet werden können.

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

Es wird bestimmt, ob das Element auf der Seite dargestellt wird oder nicht.

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 ist dasselbe wie element (locator) .isPresent (). Der einzige Unterschied besteht darin, dass geprüft wird, ob das vom Sublocator identifizierte Element vorhanden ist und nicht der aktuelle Elementfinder.

element.all(locator).evaluate

Wie der Name schon sagt, wird die Eingabe ausgewertet, ob sie sich im Umfang der aktuell zugrunde liegenden Elemente befindet oder nicht.

Example

View

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

Code

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

element(locator).allowAnimations

Wie der Name schon sagt, wird bestimmt, ob die Animation für die aktuell zugrunde liegenden Elemente zulässig ist oder nicht.

Example

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

element(locator).equals

Wie der Name schon sagt, wird ein Element auf Gleichheit verglichen.

Locators (by) API

Es handelt sich im Grunde genommen um eine Sammlung von Elementlokalisierungsstrategien, die Möglichkeiten zum Auffinden von Elementen in Angular-Anwendungen durch Binden, Modellieren usw. bieten.

Functions and their descriptions

Die Funktionen der ProtractorLocators-API lauten wie folgt:

by.addLocator(locatorName,fuctionOrScript)

Dieser Instanz von ProtrcatorBy wird ein Locator hinzugefügt, der weiter mit element (by.locatorName (args)) verwendet werden kann.

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

Wie der Name schon sagt, wird ein Element durch Textbindung gefunden. Eine teilweise Übereinstimmung wird durchgeführt, so dass alle Elemente, die an die Variablen gebunden sind, die die Eingabezeichenfolge enthalten, zurückgegeben werden.

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

Wie der Name schon sagt, wird es durch exakte Bindung ein Element finden.

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)

Wie der Name schon sagt, wird ein Element durch den Ausdruck ng-model gefunden.

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

Wie der Name schon sagt, wird eine Schaltfläche per Text gefunden.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Wie der Name schon sagt, wird eine Schaltfläche durch Teiltext gefunden.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Wie der Name schon sagt, findet es ein Element in einer ng-Wiederholung.

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

Wie der Name schon sagt, findet es ein Element durch exakten Repeater.

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

Wie der Name schon sagt, werden die Elemente, die die genaue Zeichenfolge enthalten, per CSS gefunden

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)

Wie der Name schon sagt, wird ein Element durch den Ausdruck ng-options gefunden.

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)

Wie der Name schon sagt, findet es ein Element per CSS-Selektor im Schatten-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