在执行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

可以通过提供值的索引来选择值的下拉列表。索引不过是下拉值的位置。索引始终从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,这个有机会再讲​。​


热文精选


↙↙↙阅读原文可查看相关链接,并与作者交流