Question

我在选择使用Div Tag开发的下拉列表时遇到问题。使用Firepath检查时，我的xpath是正确的。

我正在使用页面对象模型

 @FindBy(xpath = "//div[@name='notifications.preferredMedium']/div")
private WebElement  profPrefMedium;

@FindBys({@FindBy(xpath ="//div[@name='notifications.preferredMedium']/ul/li")})
private List<WebElement>  profPrefMediumValues;

//method to select the dropdown value

public void selectPreferredMedium() throws Exception
{
   profPrefMedium.click();
     //after click  i am getting element not clickable
   dValue =data.get("PROFILE PREFERRED MEDIUM");
   System.out.println("no.of items in list "+profPrefMediumValues.size());
    // displayed size as 7, which is correct
   itr = profPrefMediumValues.iterator();
   while(itr.hasNext()) {
         tmpWeb = itr.next();
         System.out.println("value in list " + tmpWeb.getText());
         //no value displayed.
         tmpWeb.click();
         //this is also not working.            
    }   
 }

我想首先点击Div下拉菜单然后选择值，请任何人更正代码才能正常工作。

这里是源代码

  <sf-decorator class="ng-scope" form="item" ng-repeat="item in column.items">
   <div class="form-group ng-scope is-required" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-focus': hasFocus, 'is-required': form.required}" ng-init="hasFocus = false">
   <label class="control-label ng-scope" translate="Preferred Media" ng-show="showTitle()" ng-class="::form.labelHtmlClass">Preferred Medium</label>
   <div class="control-content" ng-class="{'col-sm-2': form.fieldSize === 'small', 'col-sm-5': form.fieldSize === 'medium'}">
      <div class="form-control btn-group ui-multiselect-dropdown ng-isolate-scope ng-valid ng-valid-schema-form ng-touched" data-role="multiselect" ng-init="open=false" ng-class="{open: open}" autopopulate-to="form" populate-to="form" reload-options="form" schema-name="form" sf-changed="form" schema-validate="form" auto-tab-field="" ng-model="model['notifications']['preferredMedium']" tabindex="15" ng-disabled="form.readonly || (form.enabled && !evalExpr(form.enabled,{ model: model, 'arrayIndex': arrayIndex }))" preselected="model['notifications']['preferredMedium']" options="form.titleMap" name="notifications.preferredMedium" style="">
     <div class="ui-multiselect-dropdown-description ng-binding" ng-bind="selectedDescription || 'Select'">Select</div>
     <ul class="dropdown-menu" autofocus="autofocus">
        <li class="ui-multiselect-dropdown-option" data-value="select-all" data-role="option" ng-click="selectAll()">Check All</li>
        <li class="ui-multiselect-dropdown-option" data-value="unselect-all" data-role="option" ng-click="deselectAll();">Uncheck All</li>
        <li class="divider"/>
        <li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="email">
           Email
           <span ng-class="{'glyphicon glyphicon-ok pull-right': isChecked(option.value)}"/>
        </li>
        <li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="mobileNo">
           SMS
           <span ng-class="{'glyphicon glyphicon-ok pull-right': isChecked(option.value)}"/>
        </li>
        <li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="phoneNo">
           Phone
           <span ng-class="{'glyphicon glyphicon-ok pull-right': isChecked(option.value)}"/>
        </li>
        <li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="fax">
           Fax
           <span ng-class="{'glyphicon glyphicon-ok pull-right': isChecked(option.value)}"/>
        </li>
     </ul>
    </div>
  <div class="help-block" sf-message=""/></div>
  </div>
</sf-decorator>

由于 Sarada

Answer 1

您的代码中有一个错误，可以试试吗？

您的代码是：

@FindBys({@FindBy(xpath ="//div[@name='notifications.preferredMedium']/ul/li")})

请将其更改为：

@FindBys({@FindBy(xpath ="//div[@name='notifications.preferredMedium']//ul/li")})

或

@FindBys({@FindBy(xpath ="//div[@name='notifications.preferredMedium']/div/ul/li")})

Answer 2

Finally, I got answer.  
It worked with javascriptExecutor.  

First clicked on dropdown and then value using javascriptExecutor
 jse = (JavascriptExecutor)driver;
//click on dropdown
 jse.executeScript("arguments[0].click();",profPrefMedium); 
//click on the value
dValue = data.get("PROFILE PREFERRED MEDIUM");

        if(dValue.equalsIgnoreCase("Email"))
        {
            jse.executeScript("arguments[0].click();",profPrefMediumEmail);

        }

Thanks all for your help.

如何选择在Selenium中使用Div Tag开发的下拉菜单

2 个答案: