Dynamic dropdown options selection in selenium java and React dropdown with no select class and no ids to select the options

Question

How to select the required dropdown value when there is no id for the dropdown options and there is no select class and the order of the dropdown values changes each time. This is a react material ui dropdown?

<input aria-invalid="false" autocomplete="off" id="condition_selector" placeholder="Type at least 3 characters" type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense" aria-autocomplete="both" autocapitalize="none" spellcheck="false" value="Essential Hypertension" aria-controls="condition_selector-popup" aria-activedescendant="condition_selector-option-2">

This is the dropdown entry field.

Here when I hover over the options shown under the dropdown, the "aria-activedescendant" value changes according to the hovered option value like aria-activedescendant="condition_selector-option-2", aria-activedescendant="condition_selector-option-3", etc..

But how to click that particular active-descendant and also how to know which option value is what? You can see the the dropdown and its html structure here

sashkins · Accepted Answer · 2024-02-09 20:59:22Z

0

You shouldn't look for the options near the <input> element.
Your options should be located in some <div> (most likely) element somewhere at the end of your DOM.

If you clear the input, that div most likely disappears, and as soon as you enter smth into the input, the element will pop up.

So, basically, you need to enter the required option into the input field, then find the required option by some unique attribute (if it has any) or by a text, like //*[text()='Essential hypertension'].

Make sure to wait for the element to be clickable, before interacting with it.

answered Feb 9, 2024 at 20:59

sashkins

9712 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Suhas V Over a year ago

WebElement selectMyElement = driver.findElement(By.id("condition_selector")); selectMyElement.sendKeys("Essential Hypertension); Thread.sleep(4000); driver.findElement(By.xpath("//div[contains(string(), 'Essential Hypertension')]")).click(); Thread.sleep(3000); But, this is giving error: no such element: Unable to locate element: {"method":"xpath","selector":"//div[contains(string(), 'Essential Hypertension')]"}

Suhas V Over a year ago

I used the above code. But still getting the error: Not able to find the xpath element. As you said, there is one <div>element added at the bottom of the DOM as soon as the options pop-up is opened. But there is no particular option values in the div and there is no way to select the particular element

sashkins Over a year ago

@Suhas, it must be present somewhere. When options pop up, have you tried searching for the required text in the 'Elements' tab of the Dev Tools? Is the website you are working with private? Or you can share the link, so I can take a look.

Suhas V Over a year ago

As soon as I click Inspect on one of the dropdown option, it will go to the <input> filed and the options dropdown popup is also gone. So not able to search for the particular text. Sorry it is very confidential to share the webpage.

sashkins Over a year ago

@SuhasV, you can open the dev tools in advance (before clicking on the input), collapse all the elements, and then click on the input to see which elements get added to the dom. Also, you can look over this question and try different ways of how to 'catch' elements that 'disappear' (basically you need to find and disable some JS event). Another option would be to search for the any element that contains the required text: //*[contains(text(), 'Essential Hypertension')] (if there is no iframe)

nanny · Accepted Answer · 2024-05-20 10:36:00Z

0

Use the below Style to select a value from the dropdown Create a dynamic locator like below String selectValue=“//input[@aria-activedescendant=‘condition_selector-option-‘“+k’”; WebElement dropdownValue=driver.findElement(By.xpath(selectValue));

use switch case and pass k value . Based on your parameter it will select value from dropdown

answered May 20, 2024 at 10:36

nanny

93 bronze badges

Collectives™ on Stack Overflow

Dynamic dropdown options selection in selenium java and React dropdown with no select class and no ids to select the options

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related