How to Select Drop down developed with Div Tag in Selenium

Question

I am facing issue to select a drop down developed using Div Tag. When Check with Firepath my xpaths are correct.

I am using Page Object Model

 @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.            
    }   
 }

I want to click on the Div drop down first and then select value, please any one correct the code to work.

Here the source code

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

Thanks Sarada

Yu Zhang · Accepted Answer · 2016-07-26 08:16:00Z

1

There is one mistake in your code, can you please try this?

Your code is:

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

Please change it to:

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

or

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

answered Jul 26, 2016 at 8:16

Yu Zhang

2,1196 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sarada Akurathi Over a year ago

Hi Yu Zhang,Thanks for your reply. Still it is not working. First of all, i am not able to click on the drop down using profPrefMedium.click();

Yu Zhang Over a year ago

@SaradaAkurathi, what exception did you get this time?

Sarada Akurathi Over a year ago

sorry i didn't get what i am expecting. I want to click on the list and want to select the option based on the value sent through Map (data.get)

Sarada Akurathi · Accepted Answer · 2016-07-31 03:16:57Z

0

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.

answered Jul 31, 2016 at 3:16

Sarada Akurathi

1,1967 gold badges32 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to Select Drop down developed with Div Tag in Selenium

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related