如何在C＃中使用Selenium WebDriver从以下HTML代码的下拉列表中选择元素

Question

基于代码，我想知道如何从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>

我尝试使用xpath：

1. // div [@ id ='ServiceTypeId_chzn']

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

Answer 1

第一个建议是在li元素中添加一些属性，以便从其他元素中更清楚地标识它（如果要按名称或值选择元素）。 另外，在对子元素执行操作之前，您需要打开dropDown。 假设语言为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中的任何元素

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

PS更好地为元素添加了一些属性，恕我直言，因为使用索引错误的解决方案访问元素（例如