使用Selenium WebDriver Java处理下拉列表

Question

I'm trying to do select options from a drop-down menu and here the source code:

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

I have done a bit of research and they all use "By.id" but the source code didn't have id so I use xpath instead and still no result. I tried something like this:

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

Here is the screenshot of the drop-down menu:

Thank you for your help!

......

Answer 1

Use browser's Developer Tools.

If you are trying to learn XPATH, you can test your attempts in Developer Tools. Check that you get 1 hit only.

Or you can find the XPATH using Developer Tools. Ugly sometimes but functional.

Answer 2

First, find an XPath which will return you all values in the drop-down. Then using List you can select any value.

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

Note:- click on the drop-down first using simple click operation and then use above code. may you also need to apply focus if the value is present in deep below in the list.

hope it will help you :)

Answer 3

As per the HTML you have shared you can't handle the Modal (Angular) Dropdown through Select as the options are within a <input> tag. To click on the Dropdown with text as Gender and then on the Checkbox with text as Male you can use the following code block :

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

In order to detect absolute Xpaths of your elements you can use fire-bug extentions firepath functionality. As long as you don't have to use absolute xpath, go for other options, but sometimes using it solves your detection problem.

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

Instead of using "//* [@id=\\"offenderListView\\"]/div/div[1]/ul/form/div[2]/span/button" , try to use absolute Xpath of your element. (longest version of your xpath, not a dynamic one). In order to make it more see able put a thread of 100 milisec. between selecting element and selecting value from dropdown options.