在执行Selenium自动浏览器测试时，很多时候需要处理下拉菜单。下拉菜单通常用于表单中，在节省空间和防止用户在表单中选择错误的选项时非常有用。因此在测试任何网站或访问表单时，如何使用Selenium处理下拉列表显得尤为重要。
为了对下拉菜单执行操作，可以在Selenium WebdriverIO中使用Select类。在本文中，演示如何使用Select来处理下拉菜单。
下拉菜单的不同类型
通常会在网站上找到两种主要的下拉菜单。
- 正常下拉菜单
- 自定义下拉菜单
正常的下拉菜单是我们在Selenium中处理访问表单时经常遇到的下拉菜单。识别正常的下拉菜单很容易，只需在浏览器中打开element标签，然后查看该下拉HTML标签即可。HTML标记应为<selcet>，id应为dropdown。
正常下拉列表
代码语言：javascript复制<select id="dropdown">
<option value="" disabled="disabled" selected="selected">Please select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
自定义下拉菜单
由于使用<selcet>的样式选项不多，因此开发人员可以使用自定义下拉菜单。正如我们所讨论的，自定义下拉列表不是使用<selcet>标记开发的，而是使用<div>标记或基于前端框架的其他一些自定义标记开发的。
<div class="fsw_inputBox travelFor inactiveWidget ">
<label data-cy="travellingFor" for="travelFor">
<span class="lbl_input latoBold appendBottom10">Travelling For</span><input data-cy="travelFor" id="travelFor" type="text" class="hsw_inputField font20" readonly="" value="">
<div class="code latoBold font14 blackText makeRelative">
<p></p>
<p class="font14 greyText">Select a Reason (optional)</p>
</div>
</label>
</div>
现在，了解了这两个下拉菜单之间的区别。在Selenium测试自动化中，自定义下拉列表是根据开发人员定义的事件进行处理的，而常规下拉列表则由称为Select类的特殊Selenium类对象进行处理。
处理下拉菜单
处理WebDriverIO中的下拉菜单非常简单！没有像Java或任何其他编程语言这样的单独的类对象。在这里，WebDriverIO下拉列表也可以通过简单的选择器访问。
在正常下拉菜单中使用给定的HTML示例，您可以使用以下使用ID选择器的语法查找下拉菜单对象。
Const drp = $("#dropdown");
下拉菜单有两个选项。
- 单值下拉
- 多值下拉
访问单个或多个值下拉菜单没有区别，只是多个值下拉菜单允许用户从下拉选项中选择多个值。
WebDriverIO在下拉菜单上提供以下操作。
selectByIndex()selectByVisibleText()selectByAttribute()
selectByIndex
可以通过提供值的索引来选择值的下拉列表。索引不过是下拉值的位置。索引始终从0开始。因此，第一个值被视为第0个索引。
句法：
$("selector").selectByIndex(index)
如果要选择选项1，则可以使用以下代码。
$("#dropdown").selectByIndex(0)
注意：当下拉列表值随着值索引的频繁变化而动态变化时，避免使用selectByIndex()。
selectByVisibleText
另一个选项是selectByVisibleText()。使用此选项非常安全，因为我们需要使用下拉值中显示的下拉可见文本。
我们可以使用选项1或选项2作为选择
句法：
$("Selector").selectByVisibleText(text)
如果要使用selectByVisibleText()选择选项2，则使用下面的代码；
$("#dropdown").selectByVisibleText("Option 2")
注意：使用selectByVisibleText()时，请保持可见文本不变，否则该元素将无法识别。
selectByAttribute
与其他用于Selenium测试自动化的框架相比，selectByAttribute()是非常灵活的东西。通常，在其他Selenium测试自动化框架中，您将使用selectByValue()选项，该选项允许用户仅使用value属性选择下拉列表。但是，WebDriverIO提供了使用任何属性的功能，并且其值存在于下拉列表中。
句法：
$("Selector").selectByAttribute(attribute, value)
在这里，属性参数可以是
$("#dropdown").selectByAttribute("value", "1")
如果考虑普通的HTML下拉代码，则只能看到一个value属性。如果提供了任何其他属性，那么也可以使用它。
多值下拉
如果您看到<select>标签具有multiple="true"属性，则此下拉列表具有选择多个选项的功能。当您使多个值下拉列表自动化时，必须多次调用上述方法。当然也可以自定义方法实现这些功能，很可能需要借助JavaScript，这个有机会再讲。
