Drop down menu 如何在C中使用SeleniumWebDriver从以下html代码的下拉列表中选择元素

基于代码，我想知道如何从Span标签中的下拉列表中选择项目

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>

我尝试使用xpath：

//div[@id='ServiceTypeId\u chzn']

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

---

第一个建议是在li元素中添加一些属性，以便在希望按名称或值选择元素时，能够更清楚地将其与其他元素区分开来。另外，在对子元素执行操作之前，需要打开下拉列表。假设语言js=并且您希望按索引选择元素

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();
            })
     });
});

所有这些代码都可以使用pageObject进行包装，最终结果如下

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();
            });
        }
    };
}

您可以使用下一行访问此下拉列表中的任何元素

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

另外，最好给li元素添加一些属性，因为使用索引访问元素的方法不好，例如