Selenium中如何定位类/ID重复的目标下拉元素？

问题场景 #

我尝试定位一个下拉元素，其HTML结构如下：

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

使用以下CSS选择器定位时，总是定位到页面上另一个拥有相同类和属性的元素：

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

time.sleep(2)

element.click()

请问该如何正确定位目标下拉元素？

解决方案 #

可以通过关联唯一父元素或更精准的层级选择来避免定位冲突，以下是几种可行方式：

1. 基于关联的input元素定位

利用目标下拉按钮旁input的唯一ID（mui-284），通过层级关系锁定目标：

# 方法1：先找input再找相邻按钮
input_element = driver.find_element(By.ID, "mui-284")
dropdown_button = input_element.find_element(By.XPATH, "../div/button")
dropdown_button.click()

# 方法2：用CSS选择器直接关联
element = driver.find_element(By.CSS_SELECTOR, "#mui-284 + div.MuiAutocomplete-endAdornment button")
element.click()

2. 直接定位按钮而非SVG元素

下拉交互的实际触发元素是外层button，而非内部SVG图标，结合button的专属类和属性缩小范围：

# 基础版：通过button的专属类和aria-label定位
element = driver.find_element(By.CSS_SELECTOR, "button.MuiAutocomplete-popupIndicator[aria-label='Open']")
element.click()

# 精准版：结合input层级进一步筛选
element = driver.find_element(By.CSS_SELECTOR, "#mui-284 + div button.MuiAutocomplete-popupIndicator[aria-label='Open']")
element.click()

3. 用显式等待替代固定sleep

固定sleep稳定性差，建议用显式等待确保元素可点击后再操作：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

element = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "#mui-284 + div button.MuiAutocomplete-popupIndicator[aria-label='Open']"))
)
element.click()

内容的提问来源于stack exchange，提问作者XirrusX