如何從下拉菜單中選擇使用selenium web驅動程序與java的元素？

Question

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

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

請檢查代碼，讓我知道如何訪問下拉菜單並選擇一個元素。元素是「值班」「臥鋪」「下班」

Answer 1

如果您熟悉HTML，您會知道傳統上使用Select標記實現了下拉菜單。 Selenium WebDriver提供了一個類來處理這樣的選擇。

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

然而，使用jQuery引導和其他技術開發的新網站實現這種不同的使用spans，divs，li等標籤。您的代碼也是以這種方式開發的。所以我們必須遵循以下方法。通常，下拉和下拉值位於DOM的不同部分。我們必須通過檢查頁面源來正確識別它。

1. 點擊下拉框，並等待下拉值出現

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

2. 選擇需要通過單擊下拉值。

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

我希望這可以幫助你。