Unable to select options value or text from ui list dropdown in protractor

Question

This is my HTML code:

<div class="chosen-container chosen-container-single" style="width: 240px;" title="">
  <a class="chosen-single" tabindex="-1">
    <span>General Information</span>
    <div>
      <b></b>
    </div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search">
      <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
      <li class="active-result ng-binding" data-option-array-index="0" style="">Please select an option</li>
      <li class="group-result">General</li>
      <li class="active-result result-selected group-option" data-option-array-index="2" style="">General Information1</li>
      <li class="active-result group-option" data-option-array-index="3" style="">General Information2</li>
      <li class="active-result group-option" data-option-array-index="4" style="">General Information3</li>
      <li class="active-result group-option" data-option-array-index="5" style="">General Information4</li>
      <li class="active-result group-option" data-option-array-index="6" style="">General Information5</li>
      <li class="active-result group-option" data-option-array-index="7" style="">General Information6</li>
      <li class="active-result group-option" data-option-array-index="8" style="">General Information7</li>
      <li class="active-result group-option" data-option-array-index="9" style="">General Information8</li>
      <li class="active-result group-option" data-option-array-index="10" style="">General Information9</li>
      <li class="active-result group-option" data-option-array-index="11" style="">General Information10</li>
    </ul>
  </div>
</div>

Able to click on dropdown by

reportdropdown=element(by.css('a.chosen-single'));

Tried with below code :

reportdropdown.all(by.css("li.active-result.result-selected.ng-binding")).get(1).click();

Please suggest solutions to select option by text or index. Thanks in advance.

Answer 1

For select by text, use cssContainingText .

Also reduce your idetifiers in the locator to the necessary ones

$('div.chosen-container-single').element(by.cssContainingText("li.active-result"), 'text of option to select').click();

As for the index, just replace get(1) with get(index) .

$('div.chosen-container-single').all(by.css("li.active-result")).get(index).click();

Or if you want it to be part of the locator:

$('div.chosen-container-single').element(by.css('li.active-result[data-opion-array-index="'+index+'"]"')).click();

UPDATE : I missed, that your <a> -tag is not parent of <ul> . Therefore replace your reportdropdown with a parent element.