使用Selenium WebDriver Java處理下拉列表

Question

我正在嘗試從下拉菜單中選擇選項，這里是源代碼：

 <div class="multi ng-isolate-scope" isteven-multi-select="" input-model="genders" output-model="filter.genders" button-label="name" item-label="name" tick-property="ticked" on-select-all="search()" on-select-none="search()" on-item-click="search()" output-properties="id"> <span class="multiSelect inlineBlock buttonClicked"> <button id="" type="button" ng-click="toggleCheckboxes( $event ); refreshSelectedItems(); refreshButton(); prepareGrouping; prepareIndex();" ng-bind-html="varButtonLabel" ng-disabled="disable-button" class="ng-binding">None Selected<span class="caret"></span></button> <div class="checkboxLayer show"> <!-- ngIf: helperStatus.filter || helperStatus.all || helperStatus.none || helperStatus.reset --> <div class="helperContainer ng-scope" ng-if="helperStatus.filter || helperStatus.all || helperStatus.none || helperStatus.reset "> <!-- ngIf: helperStatus.all || helperStatus.none || helperStatus.reset --> <div class="line ng-scope" ng-if="helperStatus.all || helperStatus.none || helperStatus.reset "> <!-- ngIf: helperStatus.all --><button type="button" class="helperButton ng-binding ng-scope" ng-disabled="isDisabled" ng-if="helperStatus.all" ng-click="select( 'all', $event );" ng-bind-html="lang.selectAll">✓&nbsp;&nbsp;Select All</button> <!-- end ngIf: helperStatus.all --> <!-- ngIf: helperStatus.none --><button type="button" class="helperButton ng-binding ng-scope" ng-disabled="isDisabled" ng-if="helperStatus.none" ng-click="select( 'none', $event );" ng-bind-html="lang.selectNone">×&nbsp;&nbsp;Select None</button> <!-- end ngIf: helperStatus.none --> <!-- ngIf: helperStatus.reset --><button type="button" class="helperButton reset ng-binding ng-scope" ng-disabled="isDisabled" ng-if="helperStatus.reset" ng-click="select( 'reset', $event );" ng-bind-html="lang.reset">↶&nbsp;&nbsp;Reset</button> <!-- end ngIf: helperStatus.reset --> </div> <!-- end ngIf: helperStatus.all || helperStatus.none || helperStatus.reset --> <!-- ngIf: helperStatus.filter --> <div class="line ng-scope" style="position:relative" ng-if="helperStatus.filter"><input placeholder="Search..." type="text" ng-click="select( 'filter', $event )" ng-model="inputLabel.labelFilter" ng-change="searchChanged()" class="inputFilter ng-pristine ng-valid ng-touched" style=""><button type="button" class="clearButton" ng-click="clearClicked( $event )">×</button> </div> <!-- end ngIf: helperStatus.filter --> </div> <!-- end ngIf: helperStatus.filter || helperStatus.all || helperStatus.none || helperStatus.reset --> <div class="checkBoxContainer"> <!-- ngRepeat: item in filteredModel | filter:removeGroupEndMarker --> <div ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem ng-scope vertical" ng-class="{selected: item[ tickProperty ], horizontal: orientationH, vertical: orientationV, multiSelectGroup:item[ groupProperty ], disabled:itemIsDisabled( item )}" ng-click="syncItems( item, $event, $index );" ng-mouseleave="removeFocusStyle( tabIndex );" style=""> <!-- ngRepeat: i in numberToArray( item[ spacingProperty ] ) track by $index --> <div class="acol"><label><input class="checkbox focusable" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item, $event, $index )"><span ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, 'itemLabel' )" class="ng-binding">&nbsp;Male</span></label></div> <!-- ngIf: item[ groupProperty ] !== true && item[ tickProperty ] === true --> </div> <!-- end ngRepeat: item in filteredModel | filter:removeGroupEndMarker --> <div ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem ng-scope vertical" ng-class="{selected: item[ tickProperty ], horizontal: orientationH, vertical: orientationV, multiSelectGroup:item[ groupProperty ], disabled:itemIsDisabled( item )}" ng-click="syncItems( item, $event, $index );" ng-mouseleave="removeFocusStyle( tabIndex );"> <!-- ngRepeat: i in numberToArray( item[ spacingProperty ] ) track by $index --> <div class="acol"><label><input class="checkbox focusable" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item, $event, $index )"><span ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, 'itemLabel' )" class="ng-binding">&nbsp;Female</span></label></div> <!-- ngIf: item[ groupProperty ] !== true && item[ tickProperty ] === true --> </div> <!-- end ngRepeat: item in filteredModel | filter:removeGroupEndMarker --> <div ng-repeat="item in filteredModel | filter:removeGroupEndMarker" class="multiSelectItem ng-scope vertical" ng-class="{selected: item[ tickProperty ], horizontal: orientationH, vertical: orientationV, multiSelectGroup:item[ groupProperty ], disabled:itemIsDisabled( item )}" ng-click="syncItems( item, $event, $index );" ng-mouseleave="removeFocusStyle( tabIndex );"> <!-- ngRepeat: i in numberToArray( item[ spacingProperty ] ) track by $index --> <div class="acol"><label><input class="checkbox focusable" type="checkbox" ng-disabled="itemIsDisabled( item )" ng-checked="item[ tickProperty ]" ng-click="syncItems( item, $event, $index )"><span ng-class="{disabled:itemIsDisabled( item )}" ng-bind-html="writeLabel( item, 'itemLabel' )" class="ng-binding">&nbsp;Not Recorded</span></label></div> <!-- ngIf: item[ groupProperty ] !== true && item[ tickProperty ] === true --> </div> <!-- end ngRepeat: item in filteredModel | filter:removeGroupEndMarker --> </div> </div> </span> </div> 

我做了一些研究，他們都使用“ By.id”，但是源代碼沒有id，所以我改用xpath，仍然沒有結果。 我嘗試過這樣的事情：

Select gender = new Select(driver.findElement(By.xpath("//*[@id=\"offenderListView\"]/div/div[1]/ul/form/div[2]/span/button")));
    gender.selectByVisibleText("Male");

這是下拉菜單的屏幕截圖：

謝謝您的幫助！

......

Answer 1

使用瀏覽器的開發人員工具。

如果您嘗試學習XPATH，則可以在Developer Tools中測試您的嘗試。 檢查您是否只有1個命中。

或者，您可以使用開發人員工具找到XPATH。 有時很丑但是很實用。

Answer 2

首先，找到一個XPath，它將在下拉菜單中返回所有值。 然后，使用列表可以選擇任何值。

List<WebElement> myElements = driver.findElements(mySelector);
   for(WebElement e : myElements) {
     if(e.getText().equalsIgnoreCase("Your_Desire_Value")) {
         e.click();
     }

注意：-首先使用簡單的單擊操作單擊下拉列表，然后使用上面的代碼。 如果該值位於列表的深處，則可能還需要應用焦點。

希望它能對您有所幫助:)

Answer 3

按照您共享的HTML ，由於選項位於<input>標記內，因此無法通過“ 選擇”處理“ 模態（角度）”下拉 <input> 。 要單擊文本為Gender的下拉列表 ，然后單擊文本為Male的復選框 ，可以使用以下代碼塊：

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@class='multi ng-isolate-scope']//button[@class='ng-binding' and contains(normalize-space(), 'None Selected')]"))).click();
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@class='multi ng-isolate-scope']//span[@class='ng-binding' and contains(.,'Male')]//preceding::input[1]"))).click();

Answer 4

為了檢測元素的絕對Xpath，可以使用fire-bug擴展firepath功能。 只要您不必使用絕對xpath，就可以使用其他選項，但是有時使用它可以解決檢測問題。

Select elm = new Select(driver.findElement(By.Xpath("Absolute Xpath of your element")));
//Thread.sleep(100);
elm.selectByValue("Male");

代替使用“ // * [@id=\\"offenderListView\\"]/div/div[1]/ul/form/div[2]/span/button" ，請嘗試使用元素的絕對Xpath。 （xpath的最長版本，而不是動態版本）。 為了使它更多可見，可以放置一個100毫秒的線程。 在選擇元素和從下拉選項中選擇值之間。