select2 dropdown with selenium-CodePudding

I have a drop down in WordPress products page which is a select2 ajax enabled.

I have managed to show the options in the drop down using selenium.

But i am not able to select one of the options from the list.

I am able to get the element using the below code. But the element is not castable to Select nor clickable.

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

Any ideas how to select any option from it?

The HTML code for the drop down is

<tr>
  <td >
    <label>Name:</label>
    <strong>Brand</strong>
    <input type="hidden" name="attribute_names[0]" value="pa_brand">
    <input type="hidden" name="attribute_position[0]"  value="0">
  </td>
  <td rowspan="3">
    <label>Value(s):</label>
    <select multiple="" data-placeholder="Select terms"  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  dir="ltr" style="width: auto;">
         <span >
            <span  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  aria-live="polite" aria-relevant="additions removals" aria-atomic="true">
                  <li ><input  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  aria-hidden="true"></span>
    </span>
    <button >Select all</button>
    <button >Select none</button>
    <button >Add new</button>
  </td>
</tr>

CodePudding user response：

As per the HTML:

<select multiple="" data-placeholder="Select terms"  name="attribute_values[0][]" tabindex="-1" aria-hidden="true">

The WebElement is clearly a <select> node and to select one of the options from the html-select tag you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:

Using cssSelector and 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");

Using xpath and 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");