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"

Answer 1

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.

1. 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();
   

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