CODEWITHSUNDEEP
javascripthtmlseleniumselenium-webdriver
user1559625
user1559625

Reputation: 2673

How to select aria-autocomplete input field in Selenium?

I run into this autocomplete input text field. HTML is:

<div id="customfield_11930-single-select" class="aui-ss ajax-ss long-field" data-query="35mm Capture - 2.7.1">
    <input id="customfield_11930-field" class="text aui-ss-field ajs-dirty-warning-exempt" type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-busy="false">
    <div class="ajs-layer-placeholder">
    <span class="icon aui-ss-icon drop-menu noloading">
        <span>More</span>
    </span>
</div>
<select id="customfield_11930" class="single-select long-field hidden js-sprint-picker aui-ss-select" data-saved-state="" data-saved-id="" data-container-class="long-field" name="customfield_11930" style="display: none;" multiple="multiple">
    <option value="" selected="selected"> </option>
</select>

What i understand about this HTML is:

input(customfield_11930-field) is text field that user input in

div(ajs-layer-placeholder) store all the autocomplete/suggestion

span() is the place where user's click will pop out autocomplete/suggestion list

select(customfield_11930) is where autocomplete/suggestion is shown

So if I use code:

myDriver.findElement(By.id("customfield_11930-field")).sendKeys("35mm Capture - 2.7.1");

Below screenshot will show:

enter image description here

Now how do i select the 1st item in the autocomplete/suggestion list?

Is the 'Select' element now populated with all the suggestion list items?

I do something like:

new Select(myDriver.findElement(By.id("customfield_11930"))).selectByVisibleText("35mm Capture - 2.7.1");

but it does not work.

Actually i am quite confused at how this type of autocomplete selection menu works, it seems a lot more complicated than a normal dropdown list.

Any explanation from any one? Thanks,

Upvotes: 3

Views: 2942

Answers (1)

Mesut GUNES
Mesut GUNES

Reputation: 7421

After text entry there is a new dynamic field with id suggestions you can click the first suggestion by css selector as #suggestions > li:nth-child(1). You can see code below:

Python:

driver.find_element_by_css_selector("#customfield_11930-field").clear()
driver.find_element_by_css_selector("#customfield_11930-field").send_keys("35mm Capture - 2.7.1")
driver.find_element_by_css_selector("#suggestions > li:nth-child(1)").click()

Java:

driver.findElement(By.cssSelector("#customfield_11930-field")).clear();
driver.findElement(By.cssSelector("#customfield_11930-field")).sendKeys("35mm Capture - 2.7.1");
driver.findElement(By.cssSelector("#suggestions > li:nth-child(1)")).click();

Upvotes: 1

Related Questions