10 Elements

Protractor uses global function element that takes a Locator and and returns an ElementFinder

• element(by..) is for single element
• element.all(by..) is for element array

Chain Locator

Using this approach we can locate elements under a parent element. If you look at the code below. First element result in memory searches the whole document and locates it. However the second element td is searched and located under the first element. This approach is often used in tables.

describe('Protractor Practice Project', function () {
    it('Chain Locators', function () {
        browser.get('http://juliemr.github.io/protractor-demo/');
        element(by.model('first')).sendKeys('5');
        element(by.model('second')).sendKeys('3');
        element(by.id('gobutton')).click();

        element(by.repeater('result in memory')).element(by.css('td:nth-child(3)')).getText().then((result)=>{
            console.log(result);
        })
    });
});

Element Array

Here we are finding all the table rows using element.all and then using the count function, fetching the number of rows.

element.all(by.repeater('result in memory')).count().then((count) => {
      console.log(count)
})

Traverse Element Array

We need to use .each(items,index) method to iterate element array

element.all(by.repeater('result in memory')).each((items) => {
    items.element(by.css('td:nth-child(3)')).getText().then((item) => {
    console.log(item);
     })
})

First Element

If we want to get the first element from an element array. For example cell value from the first row.

element.all(by.repeater('result in memory')).first().element(by.css('td:nth-child(3)')).getText().then((value) => {
    console.log('First row result----' + value);
})

Last Element

If we want to get the last element from an element array. For example cell value from the last row.

 element.all(by.repeater('result in memory')).last().element(by.css('td:nth-child(3)')).getText().then((value) => {
            console.log('Last row result----' + value);
});

Element By Index

If we want to get the element from an element array. For example cell value from second row. Index starts from zero

element.all(by.repeater('result in memory')).get(1).element(by.css('td:nth-child(3)')).getText().then((value) => {
            console.log('Second row result----' + value);
})

Drop Downs

Basically get all the elements using the tagname 'option' and then extract the value attribute and if it matches with the option we want to select then click on the element.

element.all(by.tagName('option')).each((item)=>{
   item.getAttribute("value").then((optionValue)=>{
      if(optionValue.includes(operation)){
           item.click();
         }
     })
})

Calculator Program

Using all the above concept lets build a calculator code.

const { element } = require("protractor");

function calculate(num1, num2, operation) {

    element(by.model('first')).sendKeys(num1);
    element(by.model('second')).sendKeys(num2);

    element.all(by.tagName('option')).each((item)=>{
         item.getAttribute("value").then((optionValue)=>{
             if(optionValue.includes(operation)){
                 item.click();
             }
         })
    })

    element(by.id('gobutton')).click();

    element(by.css("h2[class='ng-binding'")).getText().then((result) => {
        console.log(result);
    })
}
describe('Protractor Practice Project', function () {
    it('Chain Locators', function () {
        browser.get('http://juliemr.github.io/protractor-demo/');
          
        calculate(2,3,"ADD");
        calculate(5,6,"MULTIPLICATION");
        calculate(6,2,"DIVISION");

    });
});

Reference
https://www.protractortest.org/#/locators