각도기-핵심 APIS (CONTD…)

이 장에서는 Protractor의 핵심 API를 좀 더 알아 보겠습니다.

Elements API

요소는 각도기에 의해 노출되는 전역 함수 중 하나입니다. 이 함수는 로케이터를 가져와 다음을 반환합니다.

  • 로케이터를 기반으로 단일 요소를 찾는 ElementFinder.
  • 로케이터를 기반으로 요소 배열을 찾는 ElementArrayFinder.

위의 두 가지 모두 아래에서 설명하는 연결 방법을 지원합니다.

ElementArrayFinder의 연결 함수 및 설명

다음은 ElementArrayFinder의 기능입니다-

element.all(locator).clone

이름에서 알 수 있듯이이 함수는 ElementArrayFinder와 같은 요소 배열의 얕은 복사본을 만듭니다.

element.all(locator).all(locator)

이 함수는 기본적으로 비어 있거나 자식 요소를 포함 할 수있는 새 ElementArrayFinder를 반환합니다. 다음과 같이 여러 요소를 배열로 선택하는 데 사용할 수 있습니다.

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)

이름에서 알 수 있듯이 ElementArrayFinder 내의 각 요소에 필터 함수를 적용한 후 필터 함수를 통과하는 모든 요소와 함께 새 ElementArrayFinder를 반환합니다. 기본적으로 두 개의 인수가 있습니다. 첫 번째는 ElementFinder이고 두 번째는 인덱스입니다. 페이지 개체에서도 사용할 수 있습니다.

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)

이것의 도움으로 ElementArrayFinder 내의 요소를 인덱스별로 얻을 수 있습니다. 인덱스는 0에서 시작하고 음수 인덱스는 래핑됩니다.

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

이름에서 알 수 있듯이 ElementArrayFinder의 첫 번째 요소를 가져옵니다. 기본 요소를 검색하지 않습니다.

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

이름에서 알 수 있듯이 ElementArrayFinder의 마지막 요소를 가져옵니다. 기본 요소를 검색하지 않습니다.

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)

$$ 호출이 연결될 수있을 때 부모 내에서 요소 배열을 찾는 데 사용됩니다.

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

이름에서 알 수 있듯이 ElementArrayFinder가 나타내는 요소의 수를 계산합니다. 기본 요소를 검색하지 않습니다.

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

파인더와 요소를 일치시킵니다. true 또는 false를 반환 할 수 있습니다. 파인더와 일치하는 요소가 있으면 True이고 그렇지 않으면 False입니다.

Example

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

element.all(locator).locator

이름에서 알 수 있듯이 가장 관련성이 높은 로케이터를 반환합니다.

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)

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)

이름에서 알 수 있듯이 ElementArrayFinder가 나타내는 각 ElementFinder에서 입력 함수를 호출합니다.

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)

이름에서 알 수 있듯이 ElementArrayFinder 내의 각 요소에 맵 기능을 적용합니다. 두 가지 주장이 있습니다. 첫 번째는 ElementFinder이고 두 번째는 인덱스입니다.

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)

이름에서 알 수 있듯이 누산기 및 로케이터를 사용하여 찾은 모든 요소에 대해 축소 기능을 적용합니다. 이 함수는 모든 요소를 ​​단일 값으로 줄입니다.

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

이름에서 알 수 있듯이 입력이 현재 기본 요소의 범위에 있는지 여부를 평가합니다.

Example

View

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

Code

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

element.all(locator).allowAnimations

이름에서 알 수 있듯이 애니메이션이 현재 기본 요소에서 허용되는지 여부를 결정합니다.

Example

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

ElementFinder의 연결 기능 및 설명

ElementFinder의 연결 기능과 설명-

element(locator).clone

이름에서 알 수 있듯이이 함수는 ElementFinder의 얕은 복사본을 만듭니다.

element(locator).getWebElement()

이 ElementFinder가 나타내는 WebElement를 반환하고 요소가없는 경우 WebDriver 오류가 발생합니다.

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)

부모 내에서 요소 배열을 찾습니다.

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)

부모 내에서 요소를 찾습니다.

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)

$$ 호출이 연결될 수있을 때 부모 내에서 요소의 배열을 찾습니다.

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)

$ 호출이 연결될 때 부모 내에서 요소를 찾습니다.

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

요소가 페이지에 표시되는지 여부를 결정합니다.

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

element (locator) .isPresent ()와 동일합니다. 유일한 차이점은 현재 요소 찾기가 아닌 하위 위치 지정자에 의해 식별 된 요소가 있는지 여부를 확인한다는 것입니다.

element.all(locator).evaluate

이름에서 알 수 있듯이 현재 기본 요소의 범위에 있는지 여부에 관계없이 입력을 평가합니다.

Example

View

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

Code

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

element(locator).allowAnimations

이름에서 알 수 있듯이 현재 기본 요소에서 애니메이션이 허용되는지 여부를 결정합니다.

Example

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

element(locator).equals

이름에서 알 수 있듯이 요소가 동일한 지 비교합니다.

로케이터 (기준) API

기본적으로 바인딩, 모델 등을 통해 Angular 응용 프로그램에서 요소를 찾는 방법을 제공하는 요소 로케이터 전략 모음입니다.

Functions and their descriptions

ProtractorLocators API의 기능은 다음과 같습니다.

by.addLocator(locatorName,fuctionOrScript)

요소 (by.locatorName (args))와 함께 사용할 수있는이 ProtrcatorBy 인스턴스에 로케이터를 추가합니다.

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

이름에서 알 수 있듯이 텍스트 바인딩으로 요소를 찾습니다. 입력 문자열을 포함하는 변수에 바인딩 된 모든 요소가 반환되도록 부분 일치가 수행됩니다.

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

이름에서 알 수 있듯이 정확한 바인딩으로 요소를 찾습니다.

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)

이름에서 알 수 있듯이 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

이름에서 알 수 있듯이 텍스트로 버튼을 찾습니다.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

이름에서 알 수 있듯이 부분 텍스트로 버튼을 찾습니다.

Example

View

<button>Save my file</button>

Code

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

by.repeater

이름에서 알 수 있듯이 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

이름에서 알 수 있듯이 정확한 리피터로 요소를 찾습니다.

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

이름에서 알 수 있듯이 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)

이름에서 알 수 있듯이 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)

이름에서 알 수 있듯이 Shadow DOM 내에서 CSS 선택기로 요소를 찾습니다.

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