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
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.
