Busur derajat - Inti APIS (CONTD…)

Dalam bab ini, mari kita pelajari beberapa API inti Protractor.

Elemen API

Elemen adalah salah satu fungsi global yang diekspos oleh busur derajat. Fungsi ini mengambil locater dan mengembalikan yang berikut -

  • ElementFinder, yang menemukan satu elemen berdasarkan pelacak.
  • ElementArrayFinder, yang menemukan larik elemen berdasarkan locator.

Kedua metode rantai dukungan di atas seperti yang dibahas di bawah ini.

Fungsi rangkaian ElementArrayFinder dan deskripsinya

Berikut adalah fungsi dari ElementArrayFinder -

element.all(locator).clone

Seperti namanya, fungsi ini akan membuat salinan dangkal dari larik elemen yaitu ElementArrayFinder.

element.all(locator).all(locator)

Fungsi ini pada dasarnya mengembalikan ElementArrayFinder baru yang bisa kosong atau berisi elemen turunan. Ini dapat digunakan untuk memilih beberapa elemen sebagai array sebagai berikut

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)

Seperti namanya, setelah menerapkan fungsi filter ke setiap elemen dalam ElementArrayFinder, ia mengembalikan ElementArrayFinder baru dengan semua elemen yang meneruskan fungsi filter. Ini pada dasarnya memiliki dua argumen, pertama adalah ElementFinder dan kedua adalah indeks. Ini juga dapat digunakan di objek halaman.

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)

Dengan bantuan ini, kita bisa mendapatkan elemen dalam ElementArrayFinder menurut indeks. Perhatikan bahwa indeks dimulai dari 0 dan indeks negatif dibungkus.

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

Seperti namanya, ini akan mendapatkan elemen pertama untuk ElementArrayFinder. Itu tidak akan mengambil elemen yang mendasarinya.

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

Seperti namanya, ini akan mendapatkan elemen terakhir untuk ElementArrayFinder. Itu tidak akan mengambil elemen yang mendasarinya.

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)

Ini digunakan untuk menemukan larik elemen dalam induk ketika panggilan ke $$ mungkin dirantai.

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

Seperti namanya, ini akan menghitung jumlah elemen yang diwakili oleh ElementArrayFinder. Itu tidak akan mengambil elemen yang mendasarinya.

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

Ini akan mencocokkan elemen dengan finder. Itu bisa mengembalikan benar atau salah. Benar, jika ada elemen yang cocok dengan finder dan False sebaliknya.

Example

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

element.all(locator).locator

Seperti namanya, ini akan mengembalikan pencari lokasi yang paling relevan.

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)

Ini akan mengambil elemen yang diwakili oleh 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)

Seperti namanya, ini akan memanggil fungsi input pada setiap ElementFinder yang diwakili oleh 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)

Seperti namanya, ini akan menerapkan fungsi peta pada setiap elemen dalam ElementArrayFinder. Ini memiliki dua argumen. Pertama adalah ElementFinder dan kedua adalah indeks.

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)

Seperti namanya, ini akan menerapkan fungsi pengurangan terhadap akumulator dan setiap elemen yang ditemukan menggunakan pencari lokasi. Fungsi ini akan mereduksi setiap elemen menjadi satu nilai.

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

Seperti namanya, itu akan mengevaluasi input apakah itu dalam lingkup elemen yang mendasari saat ini atau tidak.

Example

View

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

Code

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

element.all(locator).allowAnimations

Seperti namanya, ini akan menentukan apakah animasi diperbolehkan pada elemen yang mendasari saat ini atau tidak.

Example

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

Fungsi rantai dari ElementFinder dan deskripsinya

Fungsi rantai dari ElementFinder dan deskripsinya -

element(locator).clone

Seperti namanya, fungsi ini akan membuat salinan ElementFinder yang dangkal.

element(locator).getWebElement()

Ini akan mengembalikan WebElement yang diwakili oleh ElementFinder ini dan kesalahan WebDriver akan muncul jika elemen tidak ada.

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)

Ini akan menemukan array elemen dalam induk.

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)

Ini akan menemukan elemen dalam induk.

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)

Ini akan menemukan array elemen dalam induk saat panggilan ke $$ mungkin dirantai.

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)

Ini akan menemukan elemen dalam induk ketika panggilan ke $ mungkin dirantai.

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

Ini akan menentukan apakah elemen disajikan di halaman atau tidak.

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

Ini sama dengan elemen (locator) .isPresent (). Satu-satunya perbedaan adalah ia akan memeriksa apakah elemen yang diidentifikasi oleh sublocator ada daripada pencari elemen saat ini.

element.all(locator).evaluate

Seperti namanya, itu akan mengevaluasi input apakah itu dalam lingkup elemen yang mendasari saat ini atau tidak.

Example

View

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

Code

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

element(locator).allowAnimations

Seperti namanya, ini akan menentukan apakah animasi diperbolehkan pada elemen yang mendasari saat ini atau tidak.

Example

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

element(locator).equals

Seperti namanya, ini akan membandingkan elemen kesetaraan.

Locators (oleh) API

Ini pada dasarnya adalah kumpulan strategi pelacak elemen yang menyediakan cara untuk menemukan elemen dalam aplikasi Angular dengan mengikat, model, dll.

Functions and their descriptions

Fungsi ProtractorLocators API adalah sebagai berikut -

by.addLocator(locatorName,fuctionOrScript)

Ini akan menambahkan locator ke instance ProtrcatorBy ini yang selanjutnya dapat digunakan dengan elemen (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

Seperti namanya, ia akan menemukan elemen dengan pengikatan teks. Pencocokan parsial akan dilakukan sehingga setiap elemen yang terikat ke variabel yang berisi string input akan dikembalikan.

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

Seperti namanya, ia akan menemukan elemen dengan pengikatan yang tepat.

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)

Seperti namanya, ia akan menemukan elemen dengan ekspresi model-ng.

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

Seperti namanya, ia akan menemukan tombol demi teks.

Example

View

<button>Save</button>

Code

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

by.partialButtonText

Seperti namanya, ia akan menemukan tombol dengan teks parsial.

Example

View

<button>Save my file</button>

Code

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

by.repeater

Seperti namanya, ia akan menemukan elemen di dalam 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

Seperti namanya, ia akan menemukan elemen dengan repeater yang tepat.

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

Seperti namanya, itu akan menemukan elemen, berisi string yang tepat, oleh 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)

Seperti namanya, ia akan menemukan elemen dengan ekspresi 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)

Seperti namanya, ia akan menemukan elemen dengan pemilih CSS di dalam 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);
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