How to Select an element from dropdown menu using selenium web driver with java?

Question

<div class="select-dropdown-icon"
 ng-mousedown="onDropdownBtnMousedown()"></div>

<div class="select-dropdown" ng-click="onDropdownClick($event)"
 style="display: block;">
 <div class="select-contents-container ng-isolate-scope"
  kt-scrollpane="" on-infinite-scroll="onInfiniteScroll()"
  ng-transclude="">
  <kt-select-option value="off_duty" class="ng-scope ng-isolate-scope">
   <div class="select-option-container select-option-highlighted"
    ng-mouseenter="onMouseenter()" ng-click="onClick()"
    ng-class="{'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue}"
    ng-transclude="" style="">
    <span class="ng-scope">Off Duty</span>
   </div>
  </kt-select-option>
  <kt-select-option value="sleeper" class="ng-scope ng-isolate-scope">
   <div class="select-option-container select-option-selected"
    ng-mouseenter="onMouseenter()" ng-click="onClick()"
    ng-class="{'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue}"
    ng-transclude="">
    <span class="ng-scope">Sleeper</span>
   </div>
  </kt-select-option>
  <!-- ngIf: !logSuggestions.log.isEldEnabled -->
  <kt-select-option value="driving"
   ng-if="!logSuggestions.log.isEldEnabled"
   class="ng-scope ng-isolate-scope">
   <div class="select-option-container" ng-mouseenter="onMouseenter()"
    ng-click="onClick()"
    ng-class="{'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue}"
    ng-transclude="" style="">
    <span class="ng-scope">Driving</span>
   </div>
  </kt-select-option>
  <!-- end ngIf: !logSuggestions.log.isEldEnabled -->
  <kt-select-option value="on_duty" class="ng-scope ng-isolate-scope">
   <div class="select-option-container" ng-mouseenter="onMouseenter()"
    ng-click="onClick()"
    ng-class="{'select-option-highlighted': option.highlighted,'select-option-selected': option.selected,'select-option-hidden': !option.visible,'select-option-new': option.newValue}"
    ng-transclude="" style="">
    <span class="ng-scope">On Duty</span>
   </div>
  </kt-select-option>
 </div>
</div>

Please check the code and let me know how to access the dropdown menu and select an element. Elements being " on duty" "sleeper" "off duty"

Given html only displays the word **driving**. without any dropdown menu. Can you share some more details on HTML. Also where exactly is the problem? — MKay, Nov 04 '15 at 05:49
I have edited the HTML can you please have a look. I am new to HTML and selenium so i have problem accessing the main dropdown menu and than selecting any of one options " off duty" "sleeper" "on duty", I want to select any option of the following.@mk08 — Shah, Nov 04 '15 at 06:07
There is something missing in your edit. Can you share the URL instead? — MKay, Nov 04 '15 at 06:09
Please check your Edited code.HTML is code is never been like this — Sagar007, Nov 04 '15 at 06:14
Redirecting you to similar question already answered on SO. [Working with dropdowns in selenium](http://stackoverflow.com/questions/12940592/how-to-select-an-item-from-a-dropdown-list-using-selenium-webdriver-with-java) — MKay, Nov 04 '15 at 06:42
btw given HTML still not displays dropdown. It only shows 4 options. Try SO's `Run Code Snippet` option before posting HTML. — MKay, Nov 04 '15 at 06:43
Possible duplicate of [How to select/get drop down option in Selenium 2](http://stackoverflow.com/questions/6430462/how-to-select-get-drop-down-option-in-selenium-2) — Synoon, Nov 04 '15 at 07:26
@mk08 and @Synoon the links you shared applied to actual `SELECT` elements. This case is not a `SELECT` element, it just looks like one. — JeffC, Nov 07 '15 at 20:36
@JeffC Oh..You mean the HTML shared is complete and we need to select out of those 4 options.Can you share your answer to get more clarification? — MKay, Nov 08 '15 at 03:26
@mk08 Yes, I believe Striker's answer is correct. In cases like this, you have to click the SELECT-like element to open it and then scrape the desired element from inside the dropdown and click it. It just confuses people because on the page it looks like a `SELECT` but it's not... it's actually other elements formatted to look like one. Hopefully that makes sense... — JeffC, Nov 08 '15 at 03:50
@JeffC yes that makes sense... it just my experience is too less to come accross such scenarios... Thanks! — MKay, Nov 08 '15 at 04:09

score 2 · Answer 1 · answered Nov 04 '15 at 08:38

If your are familiar with HTML, you would know that dropdowns are implemented traditionally with the Select tag. Selenium WebDriver provides a Class to handle such select(s).

Select select = new Select(driver.findElement(By.id("select")))

However, the newer websites developed using jQuery Bootstrap and other technologies implement this differently using spans, divs, li and other tags. Your code is also developed in this way. So we have to follow the following approach. Usually, the drop down and drop down values are located in different parts of DOM. We have to correctly identify it by checking the page source.

Click on the drop down box and wait for the drop down values to appear

WebElement dropDown = driver.findElement(By.className("select-dropdown-icon"));
dropDown.click();

Select the required drop down value by clicking on it.

WebElement dropDownValueOffDuty  = driver.findElement(By.xpath("//kt-select-option[@value='off_duty']/div"));
dropDownValueOffDuty.click();

I hope this helps you.

How to Select an element from dropdown menu using selenium web driver with java?

1 Answers1