2

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

1
  • 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>
    – Kate Paulk
    Apr 11, 2017 at 19:34

2 Answers 2

3

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

0

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);
1
  • 1
    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.
    – alecxe
    Jun 26, 2017 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.