How to select an element from drop-down list from the following html code using selenium webdriver in C#

Question

Based on code, I would like to know how to select an item from a drop down in Span Tag.

div class="controls">
<select id="ServiceTypeId" class="span12 chosen chzn-done valid" tabindex="-1" name="ServiceTypeId" data-val-required="You must provide a service type" data-val="true" style="display: none;"></select>
 <div id="ServiceTypeId_chzn" class="chzn-container chzn-container-single" style="width: 389px;">
 <a class="chzn-single" tabindex="-1" href="javascript:void(0)">
 <span></span>
 <div></div>
 </a>
 <div class="chzn-drop" style="left: -9000px; width: 387px; top: 32px;">
 <div class="chzn-search">
 <input type="text" autocomplete="off" style="width: 352px;" tabindex="5"></input>
 </div>
 <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto;">
 <ul class="chzn-results" style="overflow: hidden; width: auto;">
 <li id="ServiceTypeId_chzn_o_0" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_1" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_2" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_3" class="active-result result-selected" style=""></li>
 <li id="ServiceTypeId_chzn_o_4" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_5" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_6" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_7" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_8" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_9" class="active-result" style=""></li>
 <li id="ServiceTypeId_chzn_o_10" class="active-result" style=""></li>
 </ul>
 <div class="slimScrollBar" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); width: 15…der-radius: 7px; z-index: 99; right: 1px; height: 121.263px;"></div>
 <div class="slimScrollRail" style="width: 15px; height: 100%; position: absolute; top: 0px; dis…% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
 </div>
 </div>
 </div>
 </div>

i tried using xpath :

//div[@id='ServiceTypeId_chzn']
//div[@class='chzn-container chzn-container-single'])[1]

Andrey Egorov Andrey Egorov · Accepted Answer · 2014-08-26T06:23:12

First suggestion is to add some attribute to your li element to identify it more clearly from other elements (if you want to select element by name, or value). Also, before performing action on child element you need to open dropDown. Let's assume that language js =) and you want to select element by index;

driver.findElement(webdriver.By.css(".chzn-results")).then(function(parentElement){
     return parentElement.click().then(function(){
            return parentElement.findElements("li[class='active-result']").then(function(elem){
                   return elem.click();
            })
     });
});

All this code can be wrapped using pageObject, and final result will look like

function dropDown(driver, webdriver) {
    var dropDown = driver.findElement(webdriver.By.css(".chzn-results"));
    return {
        element: function(index) {
            return dropDownElement(dropDown, dropDown.findElements("li[class='active-result']")[index]);
        }
    };
}

function dropDownElement(parent, element) {
    return {
        select: function() {
            return parent.click().then(function() {
                return element.click();
            });
        }
    };
}

And you can access any element in this dropDown using next line

dropDown(driver, webdriver).element(0).select();

P.S. better add some attribute to li elem, imho because access to element using index bad solution (e.g.

How to select an element from drop-down list from the following html code using selenium webdriver in C#

1 Answers