Handling DropDown using Protractor

Question

I am facing issues with handling a trivial scenario during automation. I need to select a specific option using Protractor. I am passing the index of the option that I want to select, and then clicking on that to select it. However, my click() method errors out stating the click() method is undefined on that index.

Here is what I am trying to do - in my selectElements.js file, the dropdown method is defined as

const selectElement={}

selectElement.selectElementDropdown =function(element,index,milliseconds){
 console.log("Selecting element by drop down","OK");

 element.all(by.tagName('option')).then(function(options){

     options[2].click(); 
//here index 2 is hardcoded, which can be changed to options[index]
 });

 if(typeof milliseconds!=='undefined'){
     browser.sleep(milliseconds);
 }

}

module.exports =selectElement;

I am using a POM structure, so the dropdown method is in a separate .js file. I am calling this in my page file:

const methodDropDown = require('../BasePage/selectElements.js');

var signUpBankDetails = function(){

this.bankName = element.all(by.css('.form-group')).get(7).element(by.xpath("//label[text()='Select Bank Name']"));
//the selector is clicked to open the drop down

console.log("Start of this block =========>");

this.selectDropDownMethod = function(){
    console.log("Drop Down method start ==========>");
    this.bankName.click();
    browser.sleep(1000);
    methodDropDown.selectElementDropdown(this.bankName,0,1000);

};

I am getting the error which says:

Failed: Cannot read property 'click' of undefined

The this.bankName.click() block is working fine because, I can see that the element is clicked and the drop down appears, however the selection seems to be erroring out. I have also attached the HTML snippet of code below:

Answer 1

First of all, you can use .get() method of the ElementArrayFinder - no need to resolve a promise explicitly:

var desiredOption = element.all(by.tagName('option')).get(2);

Then, assuming you are clicking the right "button" to open up the options, you can wait for the option to become visible:

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(desiredOption), 5000);
desiredOption.click();

There is also this nice wrapper around Select element, which, aside from other things, will allow you to select an option by text or value (would be better than hardcoding an index of an option).

Answer 2

Keep this method in selectElements.js:

exports.SelectValueFromDropDown = function selectDropdownByNumber(element, index) {
    element.all(by.tagName('option')).then(function(options) {
        options[index].click();
    });      
}

Call this method from other class:

var commonFunction = require('path of selectElements.js');
commonFunction.SelectValueFromDropDown(Title, 3);