Automate material ui autocomplete using selenium (single and multi-select)

user_8293585 0
Viewed 452

Need to be able to click one/more elements from the elements list.
The front-end is written in ReactJS and for styling Material-UI is used.
WHAT HAPPENS: When clicked on <input'> element, a popup with a list of elements opens up.
I tried accessing the "popup elements" of input unsuccessfully using xpath (input element is accessible though).

By chiefComplaintInputElem= By.cssSelector("#single-imit-tagschief_complaint");
By chiefComplaintOption0= By.xpath("//input[@id='single-imit-tagschief_complaint' and 
                              @aria-activedescendant='single-imit-tagschief_complaint-option-0']");  
By chiefComplaintOption1= By.xpath("//input[@id='single-imit-tagschief_complaint' and 
                              @aria-activedescendant='single-imit-tagschief_complaint-option-1']"); 
**approach-1**
driver.findElement(chiefComplaintInputElem).click();   //works fine
driver.findElement(chiefComplaintOption0).click();   //error here
**approach-2** 
webDriverWait.until(ExpectedConditions.visibilityOfElementLocated(chiefComplaintInputElem)).click(); //works fine
webDriverWait.until(ExpectedConditions.presenceOfElementLocated(chiefComplaintOption0)).click();   //error here

While inspecting the <input'> element, It has the following attributes at the beginning.

<input aria-invalid="false" autocomplete="off" id="multiple-limit-tagschief_diagnosis" placeholder="Select conditions"  
type="text" class="MuiInputBase-input MuiOutlinedInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused  
MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd" aria-autocomplete="list" autocapitalize="none"  
spellcheck="false" value="" xpath="1">

When clicked on the input field, new HTML attribute 'aria-controls' gets appended to the input element attributes.

<input ... aria-controls="multiple-limit-tagschief_diagnosis-popup">

And a popup opens with a list of elements.
when I "mouse-over" to the elements of the list, an additional HTML attribute 'aria-activedescendant' gets appended in the input element with a unique value.
(When the mouse pointer is moved over to each option is tied to a unique value like below, where NUM has values 0,1,2,...)

<input ... aria-activedescendant="multiple-limit-tagschief_diagnosis-option-NUM">

See if the following images are of any help...

input field at begining
input field upon clicking

automated-tests selenium automation
1 Answers

If your goal is to simply select one of the options from the list you can use the filter with combination of keyboard.

// Assuming this is an option you would like to select
String condition = "Typhoid";
// you can first narrow down the selection to have just the one element available
driver.findElement(chiefComplaintInputElem).sendKeys(condition);
// then select it using the keyboard
driver.findElement(chiefComplaintInputElem).sendKeys(Keys.ARROW_DOWN, Keys.ENTER);

One thing to keep in mind is that, this "solution" breaks if there are multiple items that pass the filter: For elements ["Diabetes A", "Diabetes Alpha"] the final selected element for phrase "Diabetes A" is dependent on the sort - and could likely be either of the two.

user_137745280
Related