在执行Selenium
自动浏览器测试时,很多时候需要处理下拉菜单。下拉菜单通常用于表单中,在节省空间和防止用户在表单中选择错误的选项时非常有用。因此在测试任何网站或访问表单时,如何使用Selenium
处理下拉列表显得尤为重要。
为了对下拉菜单执行操作,可以在Selenium WebdriverIO
中使用Select
类。在本文中,演示如何使用Select
来处理下拉菜单。
下拉菜单的不同类型
通常会在网站上找到两种主要的下拉菜单。
- 正常下拉菜单
- 自定义下拉菜单
正常的下拉菜单是我们在Selenium
中处理访问表单时经常遇到的下拉菜单。识别正常的下拉菜单很容易,只需在浏览器中打开element
标签,然后查看该下拉HTML
标签即可。HTML 标记应为<selcet>
,id
应为dropdown
。
正常下拉列表
<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)
在这里,属性参数可以是标记中的任何属性,而 value 参数是所提供属性的值。
$("#dropdown").selectByAttribute("value", "1")
如果考虑普通的HTML
下拉代码,则只能看到一个value
属性。如果提供了任何其他属性,那么也可以使用它。
多值下拉
如果您看到<select>
标签具有multiple="true"
属性,则此下拉列表具有选择多个选项的功能。当您使多个值下拉列表自动化时,必须多次调用上述方法。当然也可以自定义方法实现这些功能,很可能需要借助JavaScript
,这个有机会再讲。
- 公众号FunTester首发,更多原创文章:FunTester420+ 原创文章,欢迎关注、交流,禁止第三方擅自转载。