WebDriver Change ComboBox Selection "webkit-user-select"

Question

I tried to modify the combobox selection of a "webkit-user-select" type by various means but it would never work.

1)

import org.openqa.selenium.support.ui.Select;

Select select = new Select(driver.findElement(By.cssSelector("#BirthMonth")); // Exception
select.selectByValue("July"); // Select item by value

org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span"

2)

WebElement element = driver.findElement(By.cssSelector("#BirthMonth"));
element.click(); // Open comboBox
element.sendKeys(Keys.DOWN); // Navigate down (Exception)

org.openqa.selenium.WebDriverException: unknown error: cannot focus element

3) import org.openqa.selenium.JavascriptExecutor;

((JavascriptExecutor)driver).executeScript("arguments[0].click();", driver.findElement(By.xpath("//*[@id=\":9\"]")); // Select item October directly (Exception)

org.openqa.selenium.NoSuchElementException: no such element

HTML:

<label id="month-label" class="month">
  <span id="BirthMonth" class=" " aria-invalid="false"><div class="goog-inline-block goog-flat-menu-button jfk-select" aria-expanded="false" role="button" tabindex="0" aria-haspopup="true" title="Birthday" style="-webkit-user-select: none;"><div class="goog-inline-block goog-flat-menu-button-caption">July</div><div class="goog-inline-block goog-flat-menu-button-dropdown" aria-hidden="true">&nbsp;</div></div><div class="goog-menu goog-menu-vertical" role="listbox" aria-haspopup="true" style="-webkit-user-select: none; visibility: visible; left: 0px; top: -158.5px; display: none;"><div class="goog-menuitem" role="option" id=":0" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">January</div></div><div class="goog-menuitem" role="option" id=":1" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">February</div></div><div class="goog-menuitem" role="option" id=":2" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">March</div></div><div class="goog-menuitem" role="option" id=":3" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">April</div></div><div class="goog-menuitem" role="option" id=":4" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">May</div></div><div class="goog-menuitem" role="option" id=":5" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">June</div></div><div class="goog-menuitem" role="option" id=":6" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">July</div></div><div class="goog-menuitem" role="option" id=":7" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">August</div></div><div class="goog-menuitem" role="option" id=":8" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">September</div></div><div class="goog-menuitem" role="option" id=":9" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">October</div></div><div class="goog-menuitem" role="option" id=":a" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">November</div></div><div class="goog-menuitem" role="option" id=":b" style="-webkit-user-select: none;"><div class="goog-menuitem-content" style="-webkit-user-select: none;">December</div></div></div><input type="hidden" name="BirthMonth" id="HiddenBirthMonth" value="07"></span>
  </label>

The 2nd solution seems to partially work since the combobox is opened but navigating using the up / down keys won't succeed (not even with the Actions class, same exception).

Answer 1

@Purus is correct, since your combo box is a span, you cannot use the Select wrapper as it can only be used on select tagname.

I think what you were trying to do was right, click on the combo, that opens up the months then click on the appropriate month. Did you try something like this,

 WebDriverWait wait = new WebDriverWait(driver,30);
 WebElement element = driver.findElement(By.cssSelector("#BirthMonth"));
 element.click();
 WebElement month = wait.until(ExpectedConditions.elementToBeClickable(By.xpath(".//div[text()='July']")));
      month.click(); 

Answer 2

As the error message states, the element should be of <select> tag. But in your case, its a span element. So its obvious that the identification fails.

The rendered element in your browser may look like a select or combo box. But in the world of HTML, Selenium sees it as a SPAN element.

The below HTML code has select element.

<select id="testid" name ="testname>
<option selected="" value="a">a</option>
<option selected="" value="b">b</option>
</select>

Selenium Code is as below.

Select select = new Select(driver.findElement(By.cssSelector("#testid"));
select.selectByValue("a"); // Select item by value

With JavaScript, try the below.

((JavascriptExecutor)driver).executeScript("arguments[0].click();", driver.findElement(By.id(":9"));