在 selenium webdriver 中处理 vue-js 下拉插件

Question

我正在测试一个 Web 应用程序，该应用程序具有 v-select vuejs 下拉插件的 Country 字段。如何使用 selenium webdriver 在下拉列表中选择值。 它没有选择/div。

下面是从下拉列表中选择国家之前的 HTML

<div data-v-ce984332="" id="country-fg" class="mg-t-20">
   <p data-v-ce984332="" class="control has-icon has-icon-right">
   <div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="false">
      <div class="dropdown-toggle clearfix">
         <input type="search" autocomplete="false" placeholder="Country" aria-label="Search for option" class="form-control" style="width: 100%;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i> 
         <div class="spinner" style="display: none;">Loading...</div>
      </div>
      <!---->
   </div>
   <span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>

这是从下拉列表中选择国家为美国后的 HTML

<div data-v-ce984332="" id="country-fg" class="mg-t-20">
   <p data-v-ce984332="" class="control has-icon has-icon-right">
   <div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="true">
      <div class="dropdown-toggle clearfix">
         <span class="selected-tag">
            United States
            <!---->
         </span>
         <input type="search" autocomplete="false" aria-label="Search for option" class="form-control" style="width: auto;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i> 
         <div class="spinner" style="display: none;">Loading...</div>
      </div>
      <!---->
   </div>
   <span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>

Answer 1

请指定您正在使用的语言绑定以及到目前为止您尝试过的事情。

Java 中的算法：

单击“下拉”字段：driver.findElement(By.name("country")).click()

点击选项：driver.findElement(By.name("country-1")).click()

这些类型的“下拉”字段通常与另一个 div / element 相关联。
例如，当您单击“下拉”字段（第 1 项）时，可能会出现另一个动态 div，其中包含某种形式的标签中的选项。

最常见的例子是<li>, <div>, <span>。然后，您必须在您想要的选项上再做一次click()。 （第 2 项）

在某些情况下，下拉列表 div 包含一个输入标签，您可以在其中执行 sendKeys() 或 setAttribute() 以及您可以在其中一个选项中直接单击 javascript 的情况。

建议您提供更多信息，以便我们更好地帮助您。

硒语言绑定

html sn-p 的下拉列表 - 请避免使用 sn-ps 的屏幕截图

单击下拉菜单时出现的选项的 html 元素