10 Elements - biswajitsundara/Protractor GitHub Wiki

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

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

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

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

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

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

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

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

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