首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Selenium处理下拉列表

Selenium处理下拉列表

作者头像
FunTester
发布2020-07-22 11:18:19
5.9K0
发布2020-07-22 11:18:19
举报
文章被收录于专栏:FunTesterFunTester

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

在这里,属性参数可以是

$("#dropdown").selectByAttribute("value", "1")

如果考虑普通的HTML下拉代码,则只能看到一个value属性。如果提供了任何其他属性,那么也可以使用它。

多值下拉

如果您看到<select>标签具有multiple="true"属性,则此下拉列表具有选择多个选项的功能。当您使多个值下拉列表自动化时,必须多次调用上述方法。当然也可以自定义方法实现这些功能,很可能需要借助JavaScript,这个有机会再讲。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 FunTester 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 下拉菜单的不同类型
    • 正常下拉列表
      • 自定义下拉菜单
      • 处理下拉菜单
        • selectByIndex
          • selectByVisibleText
            • selectByAttribute
              • 多值下拉
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档