Harry Harry - 3 months ago 17
Java Question

How to click combobox search dropdown in selenium?

I want to select an item from the combobox search dropdown.

Html Code of the website is:

<div class="form-group">
<div class="row">
<div class="col-sm-6 margin-bottom">
<select id="CustomerCard_state" class="form-control m-b drop_state" tabindex="-1" name="CustomerCard.state" data-val-required="Please enter State" data-val="true" style="display: none;">
<option value="">Please select state</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<div id="CustomerCard_state_chosen" class="chosen-container chosen- container-single chosen-with-drop chosen-container-active" style="width: 100%;" title="">
<a class="chosen-single" tabindex="-1">
<span>Please select state</span>
<div>
<b/>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" tabindex="16"/>
</div>
<ul class="chosen-results">
<li class="active-result result-selected" style="" data-option-array- index="0">Please select state</li>
<li class="active-result" style="" data-option-array-index="1">Alaska</li>
<li class="active-result" style="" data-option-array-index="2">Alabama</li>
<li class="active-result" style="" data-option-array-index="3">Arizona</li>
<li class="active-result" style="" data-option-array- index="4">Arkansas</li>
<li class="active-result" style="" data-option-array-index="5">California</li>
<li class="active-result" style="" data-option-array- index="6">Colorado</li>
<li class="active-result" style="" data-option-array- index="7">Connecticut</li>
<li class="active-result" style="" data-option-array-index="8">Delaware</li>
<li class="active-result" style="" data-option-array-index="9">Florida</li>
<li class="active-result" style="" data-option-array- index="10">Georgia</li>
<li class="active-result" style="" data-option-array-index="11">Hawaii</li>
<li class="active-result" style="" data-option-array-index="12">Idaho</li>
<li class="active-result" style="" data-option-array-index="13">Illinois</li>
<li class="active-result" style="" data-option-array-index="14">Indiana</li>
<li class="active-result" style="" data-option-array-index="15">Iowa</li>
<li class="active-result" style="" data-option-array-index="16">Kansas</li>
<li class="active-result" style="" data-option-array-index="17">Kentucky</li>
<li class="active-result" style="" data-option-array-index="18">Louisiana</li>
<li class="active-result" style="" data-option-array-index="19">Maine</li>
<li class="active-result" style="" data-option-array-index="20">Maryland</li>
<li class="active-result" style="" data-option-array-index="21">Massachusetts</li>
<li class="active-result" style="" data-option-array-index="22">Michigan</li>
<li class="active-result" style="" data-option-array-index="23">Minnesota</li>
<li class="active-result" style="" data-option-array-index="24">Mississippi</li>
<li class="active-result" style="" data-option-array-index="25">Missouri</li>
<li class="active-result" style="" data-option-array-index="26">Montana</li>
<li class="active-result" style="" data-option-array-index="27">Nebraska</li>
<li class="active-result" style="" data-option-array-index="28">Nevada</li>
<li class="active-result" style="" data-option-array-index="29">New Hampshire</li>
<li class="active-result" style="" data-option-array-index="30">New Jersey</li>
<li class="active-result" style="" data-option-array-index="31">New Mexico</li>
<li class="active-result" style="" data-option-array-index="32">New York</li>
<li class="active-result" style="" data-option-array-index="33">North Carolina</li>
<li class="active-result" style="" data-option-array-index="34">North Dakota</li>
<li class="active-result" style="" data-option-array-index="35">Ohio</li>
<li class="active-result" style="" data-option-array-index="36">Oklahoma</li>
<li class="active-result" style="" data-option-array-index="37">Oregon</li>
<li class="active-result" style="" data-option-array-index="38">Pennsylvania</li>
<li class="active-result" style="" data-option-array-index="39">Rhode Island</li>
<li class="active-result" style="" data-option-array-index="40">South Carolina</li>
<li class="active-result" style="" data-option-array-index="41">South Dakota</li>
<li class="active-result" style="" data-option-array-index="42">Tennessee</li>
<li class="active-result" style="" data-option-array-index="43">Texas</li>
<li class="active-result" style="" data-option-array-index="44">Utah</li>
<li class="active-result" style="" data-option-array-index="45">Vermont</li>
<li class="active-result" style="" data-option-array-index="46">Virginia</li>
<li class="active-result" style="" data-option-array-index="47">Washington</li>
<li class="active-result" style="" data-option-array-index="48">West Virginia</li>
<li class="active-result" style="" data-option-array-index="49">Wisconsin</li>
<li class="active-result" style="" data-option-array-index="50">Wyoming</li>
</ul>
</div>
</div>
<span class="text-danger drop_state-error " style="display:none;"/>
</div>


My selenium code is:

WebElement select = BrowserSetup.driver.findElement(By.xpath("//div[contains(@class,'chosen-container')]"));
select.click();

List<WebElement> dropDowns = BrowserSetup.driver.findElements(By.className("chosen-results"));

WebElement dropDownOne = dropDowns.get(0); // perform further action
dropDownOne.click();


It is throwing an exception :
org.openqa.selenium.ElementNotVisibleException: element not visible at line :
WebElement dropDownOne = dropDowns.get(0); dropDownOne.click();

I have also tired to add explicit wait with following code

WebElement select = BrowserSetup.driver.findElement(By.xpath("//div[contains(@class,'chosen- container')]"));
select.click();

WebDriverWait wait = new WebDriverWait(BrowserSetup.driver, 20);
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.className("chosen-results")));

List<WebElement> dropDowns = BrowserSetup.driver.findElements(By.className("chosen-results"));

WebElement dropDownOne = dropDowns.get(0); // perform further action
dropDownOne.click();


What can I do to resolve this issue? It is working when i debug my code, but it throws exception when i run my program.

Answer

Please change

WebDriverWait wait = new WebDriverWait(BrowserSetup.driver, 20);
wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.className("chosen-results")));

to:

WebDriverWait wait = new WebDriverWait(BrowserSetup.driver, 20);
wait.until(ExpectedConditions.elementToBeClickable(By.className("chosen-results")));

May it helps!!