How to locate an element who has the same class/id with other element in Selenium

Question

I'm trying to locate this dropdown element:

<input aria-invalid="false" autocomplete="off" required="" type="text" class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-2duac4" aria-autocomplete="list" aria-expanded="false" autocapitalize="none" spellcheck="false" role="combobox" value="" id="mui-284">

<div class="MuiAutocomplete-endAdornment css-2iz2x6">
  <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiAutocomplete-popupIndicator css-uge3vf" tabindex="-1" type="button" aria-label="Open" title="Open">
    <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowDropDownIcon">
      <path d="M7 10l5 5 5-5z"></path>
    </svg>
    <span class="MuiTouchRipple-root css-w0pj6f"></span>
  </button>
</div>

Using the CSS Selector like:

element = driver.find_element(By.CSS_SELECTOR, "svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-vubbuv[data-testid='ArrowDropDownIcon']")

time.sleep(2)

element.click()

Expectation: Able to locate the targeted element

Actual: it will locate another element that has the same class/id

Any idea on how should I locate this element?

score 1 · Answer 1 · answered Jun 28 '23 at 12:02

"it will locate another element that has the same class/id"

Ah! so, what you need to do is come up with another selector that will be unique. based on the data-testid value, I gather that this is some sort of down arrow button. that must be part of some other control or dialog. the HTML that is wrapping the code snippet you have shown us likely has a , or some other element that may also include a data-testid attribute. If you can find that, you could use a CSS selector that theoretically looks something like:

'div[data-testid="some_parent_element_id"] svg[data-testid="ArrowDropDownIcon"]'

You'll have to figure out what that parent element's css should look like

score 1 · Answer 2 · answered Jun 28 '23 at 12:08

An alternative strategy is useful if you happen to know which of those multiple elements you get is the correct one. Just ask Selenium to give you the list of them, and choose your target by index.

target_arrow_index = 3
elements = driver.find_elements(By.CSS_SELECTOR, "svg[data-testid='ArrowDropDownIcon']")
elements[target_arrow_index].click()

Note that I simplified the CSS selector to avoid using classes that are likely randomly assigned and will change

score 0 · Answer 3 · answered Jun 27 '23 at 16:34

Instead of the <svg> element you need to click on the on the <button> element inducing WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeMedium.MuiAutocomplete-popupIndicator[aria-label='Open'][title='Open']"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[contains(@class, 'MuiButtonBase-root')][@aria-label='Open' and @title='Open']"))).click()

Note: You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

How to locate an element who has the same class/id with other element in Selenium

3 Answers3