如何在 C# 中使用 selenium webdriver 从以下 html 代码中的下拉列表中选择一个元素答案

【问题标题】：How to select an element from drop-down list from the following html code using selenium webdriver in C#如何在 C# 中使用 selenium webdriver 从以下 html 代码中的下拉列表中选择一个元素
【发布时间】：2014-08-26 06:04:44
【问题描述】：

根据代码，我想知道如何从 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：

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

【问题讨论】：

标签： drop-down-menu selenium-webdriver

【解决方案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 elem 添加一些属性，恕我直言，因为使用索引错误解决方案访问元素（例如

【讨论】：