Unable to select option in drop down protractorjs e2e tests

Question

I am trying to select an option from a drop down for angular e2e tests using protractor.
Here is the code snippet of the select option:

<div class="width70">
  <span title="" class="k-widget k-dropdown k-header width100 ng-scope ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required k-invalid" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false" style="" aria-activedescendant="9e8e661a-e100-4c17-bceb-3de8ac876316">
    <span unselectable="on" class="k-dropdown-wrap k-state-default"><span unselectable="on" class="k-input ng-scope">Select Customer</span><span unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span>
    <select kendo-drop-down-list="" required="" name="customer" ng-model="arrayView.selectedCustomer" k-options="arrayView.customerList" k-rebind="arrayView.customerList" validationmessage="Select Customer" class="width100 ng-scope ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required k-invalid" data-role="dropdownlist" style="display: none;" aria-invalid="true">
        <option value="" selected="selected">Select Customer</option>
        <option value="615">option A</option>
        <option value="139">option B</option>
        <option value="1476">option C</option>
        <option value="570">option D</option>......`

I have tried almost all the methods mentioned in the following page
How to select option in drop down protractorjs e2e tests
None of them seems to be working for me.
I am not even able to find 'select' (parent of 'option') tag.
But I am successfully able to click on div.span.span element.

Also, When I click on the dropdown menu I see a search box along with all options. I am attaching the pic for the same
Please help me. I have tried several ways and nothing seems to work.

Not really sure, Wappalyzer shows both "Angular material" and "Kendo UI" as web framwork. — Vishwanath Rawat, Dec 23 '16 at 12:11
@ramesh-rajendran Lets say its in kendo ui, what will be the solution then? — Vishwanath Rawat, Dec 23 '16 at 14:23

radio_head · Answer 1 · 2016-12-26T12:51:31.467

var selectOptionFromDrpdwn = function (ngModelLocator, option) {     
  //arguments are strings
  element(by.model(ngModelLocator))
    .element(by.cssContainingText('option', option))
    .click();
}

Explanation:

The above takes two arguments: locator and the value of the option to be selected. The locator can be anything, but here i am using ng-model, if you are using anything else, you have to change the locator function accordingly.

Inside the located element i am finding the option to be clicked by using [cssContainingText locator][1]. The only drawback is the option value to be fully typed, it cannot take partial value name. Else you can use option number logic and pass a number accordingly to be clicked like:

element(by.model(ngModelLocator)).all(by.tagName('option').get(optionNumber).click();

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — DimaSan, Dec 26 '16 at 08:29

Unable to select option in drop down protractorjs e2e tests

1 Answers1