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

Question

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

请指定您正在使用的语言装订以及您目前尝试过的内容。

Algo in 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()执行的输入标记，以及您可以直接点击其中一个选项。

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

selenium语言绑定

下拉列表的html片段 - 请避免使用屏幕截图进行摘要

单击下拉列表

时出现的选项的html元素