select2下拉菜单

Question

我在WordPress产品页面中有一个下拉菜单，它是启用了select2 ajax的

我已经使用selenium成功地显示了下拉菜单中的选项。

但是我无法从列表中选择一个选项。

我能够使用下面的代码获得元素。但是该元素不能被赋值为Select，也不能被点击。

driver.findElement(By.cssSelector("[class='multiselect attribute_values wc-enhanced-select select2-hidden-accessible enhanced']"))

你知道如何从中选择任何选项吗?

下拉列表的HTML代码是

<tr>
<td class="attribute_name">
<label>Name:</label>
<strong>Brand</strong>
<input type="hidden" name="attribute_names[0]" value="pa_brand">
<input type="hidden" name="attribute_position[0]" class="attribute_position" value="0">
</td>
<td rowspan="3">
<label>Value(s):</label>
<select multiple="" data-placeholder="Select terms" class="multiselect attribute_values wc-enhanced-select select2-hidden-accessible enhanced" name="attribute_values[0][]" tabindex="-1" aria-hidden="true">
<option value="107">Adidas</option>
<option value="110">Gul Ahmed</option>
<option value="111">Khadi</option>
</select>
<span class="select2 select2-container select2-container--default select2-container--above select2-container--open" dir="ltr" style="width: auto;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" aria-haspopup="true" aria-expanded="true" tabindex="-1" aria-owns="select2-attribute_values0-to-results" aria-activedescendant="select2-attribute_values0-to-result-d16b-111">
<ul class="select2-selection__rendered" aria-live="polite" aria-relevant="additions removals" aria-atomic="true">
<li class="select2-search select2-search--inline"><input class="select2-search__field" type="text" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Select terms" style="width: 418.797px;" aria-owns="select2-attribute_values0-to-results" aria-activedescendant="select2-attribute_values0-to-result-d16b-111"></li>
</ul>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
<button class="button plus select_all_attributes">Select all</button>
<button class="button minus select_no_attributes">Select none</button>
<button class="button fr plus add_new_attribute">Add new</button>
</td>
</tr>

Answer 1

根据HTML:

<select multiple="" data-placeholder="Select terms" class="multiselect attribute_values wc-enhanced-select select2-hidden-accessible enhanced" name="attribute_values[0][]" tabindex="-1" aria-hidden="true">

WebElement显然是一个<select>节点，要从html-select标签中选择一个选项，你需要为elementToBeClickable()诱导WebDriverWait，你可以使用以下定位策略:

• 使用cssSelector和selectByVisibleText():

  new Select(new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.cssSelector("select.multiselect.attribute_values.wc-enhanced-select.select2-hidden-accessible.enhanced[data-placeholder='Select terms']")))).selectByVisibleText("Adidas");
  

• 使用xpath和selectByValue():

  new Select(new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//select[@class='multiselect attribute_values wc-enhanced-select select2-hidden-accessible enhanced' and @data-placeholder='Select terms']")))).selectByValue("110");