Selenium Python如何选择动态值下拉框的首个选项？

已成功点击展开“Available Slots（可用时段）”下拉框，但无法选中第一个有效选项，下拉框的选项值会动态变化。

观察要点 #

• li标签的ID为动态生成，无法作为固定定位标识符
• 页面同时存在两种结构的时段选项：ul-li模拟的下拉菜单、原生select-option标签，不确定应定位哪个元素进行操作

目标区域HTML代码 #

<div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-d78257d9-b2fd-a3cd-1678-8db6a678a01e">
    <ul id="select-options-d78257d9-b2fd-a3cd-1678-8db6a678a01e" class="dropdown-content select-dropdown" tabindex="0" style="display: block; width: 184.85px; left: 0px; top: 0px; height: 108px; transform-origin: 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">
        <li class="disabled selected" id="select-options-d78257d9-b2fd-a3cd-1678-8db6a678a01e0" tabindex="0"><span>Select Slot</span></li>
        <li id="select-options-d78257d9-b2fd-a3cd-1678-8db6a678a01e1" tabindex="0"><span>12pm-3pm</span></li>
        <li id="select-options-d78257d9-b2fd-a3cd-1678-8db6a678a01e2" tabindex="0"><span>3pm-6pm</span></li>
    </ul>
    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 10l5 5 5-5z"></path>
        <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
    <select name="id_slot" required="" tabindex="-1">
        <option value="" disabled="" selected="">Select Slot</option>
        <option value="2">12pm-3pm</option>
        <option value="3">3pm-6pm</option>
    </select>
</div>

已尝试但失败的方法 #

方法1：通过Action Chains发送向下箭头 #

手动操作时按向下箭头+回车可选中目标选项，但代码执行无效：

body = driver.find_element("xpath","//*[@id='schedule_modal']/form/div[1]/div/div/div[4]/div/select")
body.send_keys(Keys.DOWN)

方法2：使用Select类操作原生select标签 #

报错信息：element not interactable: Element is not currently visible and may not be manipulated
代码：

select = Select(driver.find_element("xpath","//*[@id='schedule_modal']/form/div[1]/div/div/div[4]/div/select"))
driver.implicitly_wait(100)
select.select_by_value('1')

错误详情：

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

有效解决方案 #

页面中的原生select标签被设置为tabindex=-1，说明它是隐藏状态，仅用于表单提交，实际用户交互的是ul-li模拟的下拉组件，因此需要操作可见的模拟组件：

方案1：直接定位首个非禁用的li选项 #

利用class属性匹配下拉菜单，排除默认的禁用选项后选择第一个有效选项：

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

# 等待下拉菜单的有效选项可点击
wait = WebDriverWait(driver, 10)
first_available_slot = wait.until(
    EC.element_to_be_clickable(
        (By.XPATH, "//ul[contains(@class, 'dropdown-content select-dropdown')]/li[not(@class='disabled')][1]")
    )
)
first_available_slot.click()

方案2：通过input的data-target关联对应ul #

利用input的data-target属性精准定位对应的下拉菜单ul，再选择第一个有效选项：

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

# 获取下拉触发input的data-target属性
dropdown_input = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CLASS_NAME, "select-dropdown.dropdown-trigger"))
)
target_ul_id = dropdown_input.get_attribute("data-target")

# 定位该ul下的第一个非禁用li选项并点击
first_slot = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable(
        (By.XPATH, f"//ul[@id='{target_ul_id}']/li[not(@class='disabled')][1]")
    )
)
first_slot.click()

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