To write end to end tests in any test automation, we first identify elements and then interact with them using locators.

We have discussed locators in Protractor using examples in previous article. Let us now understand ElementFinder and ElementArrayFinder with examples.

ElementFinder - element(locator)
The ElementFinder simply represents a single element of an ElementArrayFinder.

ElementFinder is used to select an element and do operations on it. ElementFinder are like webelement, but webelement doesn't wait for angular elements to load. Unlike webelement ElementFinder waits for angular elements to wait.

ElementFinder will not attempt to find the element until the actions such as click (), getText (), or sendKeys has been called on it.

Click()After getting an element using ElementFinder we can click the element using click function Click( ).

element(by.className('submit')).click();

getText()If the element has any text in it, then getText( ) function is used to get that text from the element.

element(by.id(‘username’)).getText();

sendKeys() If you want to send text to the input field, we use sendKeys( ) function.

element(by.id('username')).sendKeys(key1);

ElementArray (element.all) :

ElementArrayFinder is used to get an array/list of elements and perform operations on them. You can call an array of elements and filter them by condition to return a new element.

After getting the new element and using then() function to perform operation on new element. An ElementFinder is a single element from ElementArrayFinder. We can use index to filter and get the required element from array of elements.
Example:

<ul class="numbers">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

From the above html code we have to take second element and perform operation on it using index :

var numbers = element.all(by.className(numbers));
console.log(numbers[1].getText());

And now we select an element using then() function :

 element.all(by.className(numbers)).then(function(numbers){
    consol.log(numbers[1].getText());
});

Few methods of element.all :

First() : This method is used for selecting the first element from the array of elements.

var elem = element.all(by.className('numbers')).first();
console.log(elem.getText());

Last() : This method is used for selecting the last element from the array of elements.

var elem = element.all(by.className('numbers')).last();
console.log(elem.getText());

Reduce() : This method is used to reduce every element in the array into a single value. This function uses the accumulator and element as the function parameters and reduce the elements.

var value = element.all(by.className('numbers')).reduce(function(acc, elem) {
    return elem.getText().then(function(text) {
        console.log (acc + text + " ");
    });
}. ' ');

The functions takes all the elements from array and gets texts in the elements and reduces them into single text.
Output:
"One Two Three"

Count() : This method is used to get the count/number of elements present in the array elements.
Example:

element.all(by.css('.numbers li')).then(function(numbers){
    expect(numbers.count()).toEqual(3);
});

get() : To get an element within the ElementArrayFinder by index and index starts from 0. get(index) to return a single ElementFinder at specified 'index'

Example :

let list = element.all(by.css('.numbers li'));
expect(list.get(0).getText()).toBe('One');
expect(list.get(2).getText()).toBe('Three');

Find child elements (protractor chaining locators)

To find an element in another element we use chaining of locators. First we need to find the parent element then using the parent element we find the child element and perform operation on it.

var parent = element(by.id('get-input'));
var child = parent.element(by.className('form-group'));
child.element(by.id('user-message')).sendKeys('SAMPLE');

First we are selecting element with id and assigning it as parent. Then using parent, we are selecting another element by className and named it child. Now we have an child element which is chained to parent element. By using child element we are selecting another element chained to it by id and performing operation by sending data into it. This whole selection of elements is done using chaining of locators.

Difference between browser.element(locator) and element(locator) :
Browser is used to navigate the page whereas the element is used to perform the operations on the navigated HTML page. As browser.element(locator) starts searching for the element as soon as the browser opens. So it doesn’t wait for angular page to load. Sometimes angular may take much time to load than html, by doing this kind of element search on browser may lead to Unknown error: angular is not defined when using locator. This error also occurs when the loading of page is slow. So we use element(locator) to find elements in protractor for finding angular elements. As element(locator) waits for angular elements to load and then starts searching for elements.