How to populate drop down when it is built using an input tag using java and selenium

user_5160940 0
Viewed 150

I have a drop down built with extJS.

<input id="combo-1786-inputEl" data-ref="inputEl" type="text" size="1" name="Query Category" placeholder="Select query category" role="combobox" aria-hidden="false" aria-disabled="false" aria-readonly="false" aria-invalid="true" aria-required="true" aria-haspopup="true" aria-expanded="false" aria-autocomplete="list" class="x-form-field x-form-required-field x-form-text x-form-text-default  x-form-invalid-field x-form-invalid-field-default x-form-empty-field x-form-empty-field-default" autocomplete="off" data-componentid="combo-1786" data-errorqtip="<ul class=&quot;x-list-plain&quot;><li>This field is required</li></ul>" aria-describedby="combo-1786-ariaErrorEl">

As we can see the tag used is 'input' and not 'select'.

So when I looked up about how to populate it, most answers were made under the assumption that it was created using a 'select' tag and it did not work.

Also the drop downitems are fetched from DB only when I click on the arrow on the dropdown: Notice the arrow button on only if we click, the drop down items are retrieved

So as a result of this, the drop down items cant be found on the page source.

Can someone one please suggest how to populate such downs using the best practice?

P.S-I do have a workaround, but its not at all good code practice and not at all generic:

driver.findElement(By.xpath("//*[@id='combo-1731-trigger-picker']")).click();//clicking on the arrow key of the drop down.
//Once the drop down item comes, I am trying to replicate pressing the keyboard arrow key,by sending down arrow key to the drop down item(web element)
//This works for me because I know the extact position of my drop down item in the drop down item list.It will stop working if the postion of the drop item changes
//so below loop just presses the down arrow key required number of times.
for(int i=0;i<5;i++){
    driver.findElement(By.xpath("//*[@id='combo-1731-inputEl']")).sendKeys(Keys.ARROW_DOWN);
}
driver.findElement(By.xpath("//*[@id='combo-1731-inputEl']")).sendKeys(Keys.ENTER);

If you read the comments mentioned along with the above code, then you can understand how fragile the logic is. Please help.

selenium-chromedriver selenium-webdriver ui-automation webdriver selenium
1 Answers

You are trying to click/ select the item in the drop down correct? Do the drop down items have unique id's? If so you should be able to just pass it the specific xpath id.

I personally use Css to find elements, in that case it would be 

driver.find_element(By.CSS_SELECTOR,'#combo-1731-trigger-picker').click()

driver.find_element(By.CSS_SELECTOR, '#combo-1731-inputEl > nth:child(x)').click()

where x = the count of your drop down item.

or if they have unique id's then use

driver.find_element(By.CSS_SELECTOR, '#theUniqueIdGoesHere').click()

I wrote a whole weeks worth of tests, using xpath selectors, it was painful day to day running the test and watching it fail. Going back and changing everything to Css selectors has saved me many head aches since I started writing Auto tests.

Edit: you could try the following,

driver.findElement(By.linkText("Your Links Text Here")).click();

This will only work if each links text is unique as well, if not it will select the first one it finds.

If these work for you would you mind accepting my answer?

user_83466800
Related