Protractor- Timeout while Identifying a nested dropdown element based on a condition

Question

I am trying to identify and select a heavly nested dropdown in my application having following structure(Not exact):

<tr>..</tr> 
<tr>
    <td>...</td>
    <td>
        <grid-field field-name="abc">
            <span>
                <span>
                    <span>
                        <select>
                            <option value="xyz">Some option</option>
                        </select>
                    </span>
                </span>         
            </span>
        </grid-field>
    </td>
    <td>
        <grid-field field-name="environment">
            <span>
                <span>
                    <span>
                        <select>
                            <option value="xyz">Some option</option>    /// Required Dropdown
                        </select>
                    </span>
                </span>         
            </span>
        </grid-field>
    </td>
    <td>
        <grid-field field-name="adasd">
            <span>
                <span>
                    <span>
                        <select>
                            <option value="xyz">Some option</option>
                        </select>
                    </span>
                </span>         
            </span>
        </grid-field>   
    </td>
</tr>
<tr>..</tr>

I have written the following helper function to select the dropdown and I am getting a timeout error.

this.selectValueFromDropDown = function(columnName,dropDownData){
    this.getDropDown(columnName).$("[value='".concat(dropDownData).concat("']")).click();
};

this.getDropDown = function(columnName){
    return element.all(by.tagName('tr')).filter(function(row){
        return row.all(by.tagName('grid-field')).each(function(gridField){
            gridField.getAttribute('field-name').then(function(attribute){
                return attribute === columnName;
            });
        });
    }).first().element(by.tagName('select'));
};


// Spec
gridObject.selectValueFromDropDown('environment','xyz');

Error Message

> Message:
>     Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.   Stack:
>     Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
>         at [object Object]._onTimeout (C:\Users\taaupsa1\AppData\Roaming\npm\node_modules\protractor\node_modules\jasmine-core\lib\jasmine-core\jasmine.js:1812:23)

Could any one tell me what I am doing wrong? Thanks

Answer 1

Got it, here is a theory. You are missing the return from the each() call making it executing "forever" and exceeding the default jasmine spec timeout:

this.getDropDown = function(columnName){
    return element.all(by.tagName('tr')).filter(function(row){
        return row.all(by.tagName('plm-grid-field')).each(function(gridField){
            // v HERE
            return gridField.getAttribute('field-name').then(function(attribute){
                return attribute === columnName;
            });
        });
    }).first().element(by.tagName('select'));
};

And, I also think you meant to use filter() instead of each()..