How to handle react auto complete field

Question

In my application we have some many react auto complete fields. Focus have to go on that particular fields. We have to enter 1st three letter of the word and the data fetch from database, it load like auto suggesstion we have to choose from the list. When we click to enter the other fields are displayed. How to handle this scenario any body know means kindly share sample code.

Answer 1

I have encountered scenarios like this before.

Just to clarify, how to handle this scenario means how to click on a random auto-generated suggestions or how to click on a pre-determined auto-generated suggestion?

What I have done before:

• The most common scenario is perhaps address searching, when we type in a few characters in the search bar, a list of potentially matching addresses will be displayed.

If you are to choose a some-what random item from the list, what you can do is:

1. Build an enumerated list of items that consist of three valid characters (three valid characters means there are entries in the database that start with the three valid characters)
2. When you execute your test case, choose a random item from this enumerated list and type them into the field
3. Perhaps give it a bit wait to allow a list is auto-generated
4. ListOfItems = Selenium.FindAllElements(EachAutoGeneratedItemFromTheList_Xpath) or ListOfItems =Selenium.FindAllElements(EachAutoGeneratedItemFromTheList_CssSelector)
5. From this ListOfItems, click on one of them.
6. Repeat step 1~5 for other auto-generated field.

If you are to choose a pre-determined item, what you can do is:

1. Type in a pre-determined three character string, then repeat step 2 ~ 6 from above.

I am not sure if this is what you are after, please leave me a comment if you have any other further questions.

Answer 2

Try the below code for Auto Suggestion drop-down
1.find dropdown box "id\xpath" and send the value
2.find the listing dropdown generic xpath and store the value in the list
3.after iterator list of value and select

WebElement autoOptions = driver.findElement(By.id("ui-id-1"));
            wait.until(ExpectedConditions.visibilityOf(autoOptions));
            List<WebElement> optionsToSelect = autoOptions.findElements(By.tagName("li"));
            for(WebElement option : optionsToSelect){
                if(option.getText().equals(textToSelect)) {
                    System.out.println("Trying to select: "+textToSelect);
                    option.click();
                    break;
                }
            }