Thước đo góc - APIS lõi (CONTD…)

Trong chương này, chúng ta hãy tìm hiểu thêm một số API cốt lõi của Thước đo góc.

API yếu tố

Phần tử là một trong những hàm toàn cục được hiển thị bởi thước đo góc. Hàm này nhận một bộ định vị và trả về như sau:

• ElementFinder, tìm một phần tử duy nhất dựa trên bộ định vị.
• ElementArrayFinder, tìm một mảng các phần tử dựa trên bộ định vị.

Cả hai phương pháp trên đều hỗ trợ các phương pháp chuỗi như thảo luận bên dưới.

Chuỗi các chức năng của ElementArrayFinder và mô tả của chúng

Các phần tiếp theo là các chức năng của ElementArrayFinder -

element.all(locator).clone

Như tên cho thấy, hàm này sẽ tạo ra một bản sao nông của mảng các phần tử tức là ElementArrayFinder.

element.all(locator).all(locator)

Hàm này về cơ bản trả về một ElementArrayFinder mới có thể trống hoặc chứa các phần tử con. Nó có thể được sử dụng để chọn nhiều phần tử dưới dạng một mảng như sau

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)

Như tên cho thấy, sau khi áp dụng chức năng lọc cho từng phần tử trong ElementArrayFinder, nó sẽ trả về một ElementArrayFinder mới với tất cả các phần tử vượt qua chức năng lọc. Về cơ bản, nó có hai đối số, đầu tiên là ElementFinder và thứ hai là chỉ mục. Nó cũng có thể được sử dụng trong các đối tượng trang.

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)

Với sự trợ giúp của điều này, chúng ta có thể lấy một phần tử trong ElementArrayFinder theo chỉ mục. Lưu ý rằng chỉ số bắt đầu từ 0 và các chỉ số âm được bao bọc.

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

Như tên cho thấy, điều này sẽ lấy phần tử đầu tiên cho ElementArrayFinder. Nó sẽ không truy xuất phần tử cơ bản.

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

Như tên gợi ý, điều này sẽ lấy phần tử cuối cùng cho ElementArrayFinder. Nó sẽ không truy xuất phần tử cơ bản.

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)

Nó được sử dụng để tìm một mảng các phần tử trong phần tử cha khi các lệnh gọi tới $$ có thể được xâu chuỗi.

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

Như tên cho thấy, điều này sẽ đếm số phần tử được đại diện bởi ElementArrayFinder. Nó sẽ không truy xuất phần tử cơ bản.

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

Nó sẽ khớp các phần tử với công cụ tìm. Nó có thể trả về true hoặc false. Đúng, nếu có bất kỳ phần tử nào phù hợp với công cụ tìm kiếm và Sai.

Example

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

element.all(locator).locator

Như tên cho thấy, nó sẽ trả về bộ định vị phù hợp nhất.

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)

Nó sẽ truy xuất các phần tử được đại diện bởi 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)

Như tên cho thấy, nó sẽ gọi hàm đầu vào trên mỗi ElementFinder được đại diện bởi 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)

Như tên gợi ý, nó sẽ áp dụng một chức năng bản đồ trên mỗi phần tử trong ElementArrayFinder. Nó đang có hai đối số. Đầu tiên sẽ là ElementFinder và thứ hai sẽ là chỉ mục.

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)

Như tên cho thấy, nó sẽ áp dụng chức năng giảm đối với bộ tích lũy và mọi phần tử được tìm thấy bằng cách sử dụng bộ định vị. Hàm này sẽ giảm mọi phần tử thành một giá trị duy nhất.

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

Như tên cho thấy, nó sẽ đánh giá đầu vào xem nó có nằm trong phạm vi của các phần tử cơ bản hiện tại hay không.

Example

View

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

Code

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

element.all(locator).allowAnimations

Như tên gợi ý, nó sẽ xác định xem hoạt ảnh có được phép trên các phần tử cơ bản hiện tại hay không.

Example

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

Chuỗi các chức năng của ElementFinder và mô tả của chúng

Chuỗi các chức năng của ElementFinder và mô tả của chúng -

element(locator).clone

Như tên cho thấy, chức năng này sẽ tạo một bản sao cạn của ElementFinder.

element(locator).getWebElement()

Nó sẽ trả về WebElement được đại diện bởi ElementFinder này và lỗi WebDriver sẽ được ném ra nếu phần tử không tồn tại.

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)

Nó sẽ tìm một mảng các phần tử trong một phần tử cha.

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)

Nó sẽ tìm các phần tử bên trong cha mẹ.

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)

Nó sẽ tìm một mảng các phần tử trong phần tử cha khi các lệnh gọi tới $$ có thể được xâu chuỗi.

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)

Nó sẽ tìm các phần tử bên trong cha khi các lệnh gọi đến $ có thể được xâu chuỗi.

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

Nó sẽ xác định xem phần tử có được trình bày trên trang hay không.

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

Nó giống như phần tử (định vị) .isPresent (). Sự khác biệt duy nhất là nó sẽ kiểm tra xem phần tử được xác định bởi sublocator có hiện diện hay không chứ không phải là công cụ tìm phần tử hiện tại.

element.all(locator).evaluate

Như tên cho thấy, nó sẽ đánh giá đầu vào xem nó có nằm trong phạm vi của các phần tử cơ bản hiện tại hay không.

Example

View

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

Code

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

element(locator).allowAnimations

Như tên cho thấy, nó sẽ xác định xem hoạt ảnh có được phép trên các phần tử cơ bản hiện tại hay không.

Example

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

element(locator).equals

Như tên cho thấy, nó sẽ so sánh một phần tử để bình đẳng.

API định vị (bởi)

Về cơ bản, nó là một tập hợp các chiến lược định vị phần tử cung cấp các cách tìm phần tử trong các ứng dụng Angular bằng cách ràng buộc, mô hình, v.v.

Functions and their descriptions

Các chức năng của API ProtractorLocators như sau:

by.addLocator(locatorName,fuctionOrScript)

Nó sẽ thêm một bộ định vị vào phiên bản ProtrcatorBy này, nó có thể được sử dụng thêm với phần tử (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

Như tên cho thấy, nó sẽ tìm một phần tử bằng cách liên kết văn bản. Đối sánh từng phần sẽ được thực hiện để mọi phần tử liên kết với các biến chứa chuỗi đầu vào sẽ được trả về.

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

Như tên cho thấy, nó sẽ tìm một phần tử bằng cách ràng buộc chính xác.

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)

Như tên cho thấy, nó sẽ tìm một phần tử bằng biểu thức 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

Như tên cho thấy, nó sẽ tìm thấy một nút bằng văn bản.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Như tên cho thấy, nó sẽ tìm thấy một nút bằng một phần văn bản.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Như tên cho thấy, nó sẽ tìm thấy một phần tử bên trong một 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

Như tên cho thấy, nó sẽ tìm một phần tử bằng bộ lặp chính xác.

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

Như tên gợi ý, nó sẽ tìm các phần tử, chứa chuỗi chính xác, bằng 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)

Như tên cho thấy, nó sẽ tìm một phần tử bằng biểu thức 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)

Như tên gợi ý, nó sẽ tìm thấy một phần tử bằng bộ chọn CSS bên trong DOM bóng.

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