如何用Selenium操作style为display:none的隐藏下拉选择框？

问题场景 #

目标<select>元素被父级<div>（id="ID_1"）通过display: none隐藏，使用Selenium的Select类选择选项时触发以下错误：

ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated

相关HTML代码 #

<div id = "ID_1" class="mb-outer-container" style="display: none;">
.....
     <select style="font-size:10px" onchange="dg_send('contractNonParticipationsDatagrid2080-form');">
        <option selected="selected" value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
     </select>
</div>

已尝试的方法（均失败） #

方法一：通过可见文本选择

sel = Select(browser.find_element_by_xpath("//select[@style='font-size:10px']"))
sel.select_by_visible_text("20")

方法二：通过value值选择

sel.select_by_value("20")

原因分析 #

Selenium的交互API（包括Select类的方法）要求目标元素必须处于可见且可交互状态，当前<select>的父元素设置了display: none，导致元素被隐藏，无法通过常规交互方法操作。

解决方案 #

方案1：先让元素可见再操作 #

通过JavaScript修改父元素的样式，使其可见后再使用Select类操作：

# 定位隐藏的父容器
parent_container = browser.find_element_by_id("ID_1")
# 执行JS修改display属性，让容器可见
browser.execute_script("arguments[0].style.display = 'block';", parent_container)

# 正常操作下拉菜单
sel = Select(browser.find_element_by_xpath("//select[@style='font-size:10px']"))
sel.select_by_value("20")

方案2：直接用JavaScript操作元素（无需显示元素） #

绕过Selenium的交互限制，直接通过JS修改<select>的value并触发onchange事件：

# 定位select元素
select_elem = browser.find_element_by_xpath("//select[@style='font-size:10px']")
# 设置select的value为目标值
browser.execute_script("arguments[0].value = '20';", select_elem)
# 触发onchange事件，确保页面执行对应的回调逻辑
browser.execute_script("arguments[0].dispatchEvent(new Event('change'));", select_elem)

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