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:

enter image description here

• Kate Paulk: Have you tried logging the inner text of this.bankName? It may not be referring to the element you think it is - as I read the HTML here, clicking anything in the grouping will cause the dropdown to display options, but the object handle may not be the <select>...</select>

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

• alecxe: You don't need to resolve the array of elements promise in order to get one by index - there is the built-in .get() method - no need to overcomplicate.