Selenium WebDriver: Unable to locate dynamically changing React InputBase component element

Question

I tried to locate an element with id. The Developer tools shows this:

<input aria-invalid="false" autocomplete="off" placeholder="Partner name" type="text" class="MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd" aria-autocomplete="list" autocapitalize="none" spellcheck="false" value="" id="mui-85700">

The id always changing every time I reload the page.

I think I find a solution to locate the element:

findElement(By.xpath("//*[contains(@id,'mui')]")).click();

But now I get the following error:

(org.openqa.selenium.ElementClickInterceptedException: Element <p id="mui-51640" class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"> is not clickable at point (1124,747) because another element <div class="MuiDialog-container MuiDialog-scrollPaper"> obscures it

How can I solve it?

Side note: In developer tool I see 4 web elements which contains "mui" String. On the page I only see 2 web elements: one with <input id="mui85700"...> and another one is <label id="mui85700"...> As before I said I need the input id field.

Answer 1

The <input> element is a React InputBase component and a dynamic element and the trailing dynamic value of the id attribute will will get changed everytime you access the application afresh. So you have to construct a dynamic locator strategy.

---

Solution

To click on the <input> element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.MuiInputBase-input.MuiInput-input.MuiAutocomplete-input.MuiAutocomplete-inputFocused.MuiInputBase-inputAdornedEnd[id^='mui'][placeholder='Partner name']"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd' and starts-with(@id, 'mui')][@placeholder='Partner name']"))).click();
  

Answer 2

You may use findElements and get all the elements form web page Use a loop and check if the element is visible or element is clickable. This is solve your issue.

Answer 3

you can use like this,

List<WebElement> products = driver.findElements(By.xpath("xpath"));


            for (int i=0; i<products.size(); i++){


                String name = products.get(i).getText();

                    System.out.println(name);

                if(name.containsAll('text')) {

                    driver.findElements(By.xpath("xpath")).get(i).click();
    }
        }