Selenium操作自定义下拉选择菜单遇阻，求解决方案

问题背景 #

这是一个基于自定义组件实现的下拉选择器，原生<select>被设置为display: none，实际交互依赖外层的div.selection-box和ul.options完成。手动操作时的状态变化：

• 点击外层div后，其class变为selection-box active，同时ul.options样式改为display: block展开选项列表
• 选择选项后，列表收起，div.current文本与选中li的状态同步更新

此前尝试通过Selenium的Select类操作隐藏的原生<select>，即使通过JS修改其显示状态，仍触发以下报错：

selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated

使用的错误代码：

from selenium.webdriver.support.ui import Select
drpBrand = driver.find_element(By.ID, "select");
css = 'select#select' # css selector of the element
js = """const data_options = Array.from(document.querySelectorAll('{css}'));
        data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css)
driver.execute_script(js)
drpBrand.select_by_visible_text("Third");

解决方案：模拟手动交互流程 #

这类自定义组件无法通过Select类直接操作，必须完全模拟用户手动点击的交互流程：

1. 点击外层div展开选项列表 #

先定位到div.selection-box，等待其可点击后触发菜单展开：

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

# 等待外层下拉容器可点击，点击展开选项
selection_box = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CLASS_NAME, "selection-box"))
)
selection_box.click()

2. 等待选项列表展开，点击目标选项 #

等待ul.options变为可见后，定位到目标文本对应的li元素并点击：

# 等待选项列表加载并显示
options_list = WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.CLASS_NAME, "options"))
)

# 定位并点击目标选项，示例为选择"First"
target_option = options_list.find_element(By.XPATH, ".//li[text()='First']")
target_option.click()

关键说明 #

• 原生<select>仅作为数据容器，页面交互逻辑完全绑定在自定义组件上，直接操作隐藏的select既会触发交互报错，也无法同步页面状态更新。
• 使用WebDriverWait等待元素状态变化，可避免页面加载延迟、动画过渡导致的元素定位失败问题。

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