Учебники

Транспортир — Основной АПИС (ПРОДОЛЖЕНИЕ…)

Июнь 2, 2018

В этой главе давайте узнаем еще несколько основных API Protractor.

Элементы API

Элемент является одной из глобальных функций, предоставляемых транспортиром. Эта функция принимает локатор и возвращает следующее:

  • ElementFinder, который находит один элемент на основе локатора.
  • ElementArrayFinder, который находит массив элементов на основе локатора.

Оба вышеупомянутых метода поддержки поддерживают, как обсуждено ниже.

Цепные функции ElementArrayFinder и их описания

Ниже приведены функции ElementArrayFinder —

element.all (локатор) .clone

Как следует из названия, эта функция создаст поверхностную копию массива элементов, т.е. ElementArrayFinder.

element.all (локатор) .all (локатор)

Эта функция в основном возвращает новый ElementArrayFinder, который может быть пустым или содержать дочерние элементы. Может использоваться для выбора нескольких элементов в виде массива следующим образом

пример 

element.all(locator).all(locator)
elementArr.all(by.css(‘.childselector’));
// it will return another ElementFindArray as child element based on child locator.

element.all (локатор) .filter (filterFn)

Как следует из названия, после применения функции фильтра к каждому элементу в ElementArrayFinder, он возвращает новый ElementArrayFinder со всеми элементами, которые передают функцию фильтра. Он в основном имеет два аргумента, первый — ElementFinder, а второй — индекс. Это может также использоваться в объектах страницы.

пример

Посмотреть 

<ul class = "items">
   <li class = "one">First</li>
   <li class = "two">Second</li>
   <li class = "three">Third</li>
</ul>

Код 

element.all(by.css('.items li')).filter(function(elem, index) {
   return elem.getText().then(function(text) {
      return text === 'Third';
   });
}).first().click();

element.all (локатор) .get (индекс)

С помощью этого мы можем получить элемент в ElementArrayFinder по индексу. Обратите внимание, что индекс начинается с 0, а отрицательные индексы переносятся.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

let list = element.all(by.css('.items li'));
expect(list.get(0).getText()).toBe('First');
expect(list.get(1).getText()).toBe('Second');

element.all (локатор) .first ()

Как следует из названия, это получит первый элемент для ElementArrayFinder. Он не будет извлекать базовый элемент.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

let first = element.all(by.css('.items li')).first();
expect(first.getText()).toBe('First');

element.all (локатор) .last ()

Как следует из названия, это будет последний элемент для ElementArrayFinder. Он не будет извлекать базовый элемент.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

let first = element.all(by.css('.items li')).last();
expect(last.getText()).toBe('Third');

element.all (локатор) .all (селектор)

Он используется для поиска массива элементов в родительском элементе, когда вызовы $$ могут быть соединены в цепочку.

пример

Посмотреть 

<div class = "parent">
   <ul>
      <li class = "one">First</li>
      <li class = "two">Second</li>
      <li class = "three">Third</li>
   </ul>
</div>

Код 

let items = element(by.css('.parent')).$$('li');

element.all (локатор) .count ()

Как следует из названия, это будет считать количество элементов, представленных ElementArrayFinder. Он не будет извлекать базовый элемент.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

let list = element.all(by.css('.items li'));
expect(list.count()).toBe(3);

element.all (локатор) .isPresent ()

Он будет сопоставлять элементы с искателем. Может возвращать true или false. Верно, если есть какие-либо элементы, которые соответствуют искателю, и Ложь в противном случае.

пример 

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

element.all (локатор) .locator

Как следует из названия, он вернет наиболее релевантный локатор.

пример 

$('#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 (локатор) .then (thenFunction)

Он извлечет элементы, представленные ElementArrayFinder.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

element.all(by.css('.items li')).then(function(arr) {
   expect(arr.length).toEqual(3);
});

element.all (локатор) .each (eachFunction)

Как следует из названия, он будет вызывать функцию ввода для каждого ElementFinder, представленного ElementArrayFinder.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

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 (локатор) .map (mapFunction)

Как следует из названия, он будет применять функцию карты к каждому элементу в ElementArrayFinder. У него есть два аргумента. Первым будет ElementFinder, а вторым будет индекс.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

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 (локатор) .reduce (reduceFn)

Как следует из названия, он будет применять функцию сокращения к аккумулятору и каждому элементу, найденному с помощью локатора. Эта функция сведет каждый элемент в одно значение.

пример

Посмотреть 

<ul class = "items">
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
</ul>

Код 

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 (локатор) .evaluate

Как следует из названия, он будет оценивать входные данные независимо от того, находится ли он в области действия текущих базовых элементов или нет.

пример

Посмотреть 

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

Код 

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

element.all (локатор) .allowAnimations

Как следует из названия, он будет определять, разрешена ли анимация для текущих базовых элементов или нет.

пример 

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

Цепные функции ElementFinder и их описания

Цепные функции ElementFinder и их описания —

элемент (локатор) .clone

Как следует из названия, эта функция создаст поверхностную копию ElementFinder.

элемент (локатор) .getWebElement ()

Он вернет WebElement, представленный этим ElementFinder, и будет сгенерирована ошибка WebDriver, если элемент не существует.

пример

Посмотреть 

<div class="parent">
   some text
</div>

Код 

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

элемент (локатор) .all (локатор)

Он найдет массив элементов внутри родителя.

пример

Посмотреть 

<div class = "parent">
   <ul>
      <li class = "one">First</li>
      <li class = "two">Second</li>
      <li class = "three">Third</li>
   </ul>
</div>

Код 

let items = element(by.css('.parent')).all(by.tagName('li'));

элемент (локатор) .element (локатор)

Он найдет элементы внутри родителя.

пример

Посмотреть 

<div class = "parent">
   <div class = "child">
      Child text
      <div>{{person.phone}}</div>
   </div>
</div>

Код 

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

элемент (локатор) .all (селектор)

Он найдет массив элементов в родительском элементе, когда вызовы $$ могут быть прикованы цепью.

пример

Посмотреть 

<div class = "parent">
   <ul>
      <li class = "one">First</li>
      <li class = "two">Second</li>
      <li class = "three">Third</li>
   </ul>
</div>

Код 

let items = element(by.css('.parent')).$$('li'));

элемент (локатор). $ (локатор)

Он найдет элементы в родительском элементе, когда вызовы $ могут быть связаны.

пример

Посмотреть 

<div class = "parent">
   <div class = "child">
      Child text
      <div>{{person.phone}}</div>
  </div>
</div>

Код 

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

элемент (локатор) .isPresent ()

Он будет определять, будет ли элемент представлен на странице или нет.

пример

Посмотреть 

<span>{{person.name}}</span>

Код 

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

элемент (локатор) .isElementPresent ()

Это так же, как элемент (локатор) .isPresent (). Единственное отличие состоит в том, что он будет проверять, присутствует ли элемент, идентифицированный с помощью sublocator, а не текущий искатель элемента.

element.all (локатор) .evaluate

Как следует из названия, он будет оценивать входные данные независимо от того, находится ли он в области действия текущих базовых элементов или нет.

пример

Посмотреть 

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

Код 

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

элемент (локатор) .allowAnimations

Как следует из названия, оно будет определять, разрешена ли анимация для текущих базовых элементов или нет.

пример 

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

элемент (локатор) .equals

Как следует из названия, он будет сравнивать элемент на равенство.

Локаторы (по) API

Это в основном набор стратегий поиска элементов, который предоставляет способы поиска элементов в приложениях Angular по привязке, модели и т. Д.

Функции и их описания

Функции API ProtractorLocators заключаются в следующем —

by.addLocator (locatorName, fuctionOrScript)

Он добавит локатор к этому экземпляру ProtrcatorBy, который в дальнейшем может использоваться с элементом (by.locatorName (args)).

пример

Посмотреть 

<button ng-click = "doAddition()">Go!</button>

Код 

// 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

Как следует из названия, он найдет элемент по текстовой привязке. Частичное совпадение будет выполнено так, что любые элементы, связанные с переменными, содержащими входную строку, будут возвращены.

пример

Посмотреть 

<span>{{person.name}}</span>
<span ng-bind = "person.email"></span>

Код 

var span1 = element(by.binding('person.name'));
expect(span1.getText()).toBe('Foo');

var span2 = element(by.binding('person.email'));
expect(span2.getText()).toBe('foo@bar.com');

by.exactbinding

Как следует из названия, он найдет элемент путем точного связывания.

пример

Посмотреть 

<spangt;{{ person.name }}</spangt;
<span ng-bind = "person-email"gt;</spangt;
<spangt;{{person_phone|uppercase}}</span>

Код 

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)

Как следует из названия, он найдет элемент по выражению ng-модели.

пример

Посмотреть 

<input type = "text" ng-model = "person.name">

Код 

var input = element(by.model('person.name'));
input.sendKeys('123');
expect(input.getAttribute('value')).toBe('Foo123');

by.buttonText

Как следует из названия, он найдет кнопку по тексту.

пример

Посмотреть 

<button>Save</button>

Код 

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

by.partialButtonText

Как следует из названия, он найдет кнопку по частичному тексту.

пример

Посмотреть 

<button>Save my file</button>

Код 

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

by.repeater

Как следует из названия, он найдет элемент внутри ng-repeat.

пример

Посмотреть 

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

Код 

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

Как следует из названия, он найдет элемент по точному повторителю.

пример

Посмотреть 

<li ng-repeat = "person in peopleWithRedHair"></li>
<li ng-repeat = "car in cars | orderBy:year"></li>

Код 

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

Как следует из названия, он найдет элементы, содержащие точную строку, с помощью CSS

пример

Посмотреть 

<ul>
<li class = "pet">Dog</li>
<li class = "pet">Cat</li>
</ul>

Код 

var dog = element(by.cssContainingText('.pet', 'Dog')); 
// It will return the li for the dog, but not for the cat.

by.options (optionsDescriptor)

Как следует из названия, он найдет элемент по выражению ng-options.

пример

Посмотреть 

<select ng-model = "color" ng-options = "c for c in colors">
   <option value = "0" selected = "selected">red</option>
   <option value = "1">green</option>
</select>

Код 

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 (селектор)

Как следует из названия, он найдет элемент с помощью селектора CSS в теневом DOM.

пример

Посмотреть 

<div>
   <span id = "outerspan">
      <"shadow tree">
         <span id = "span1"></span>
      <"shadow tree">
      <span id = "span2"></span>
   </>
   </>
</div>

Код

37
Share: