如何用Selenium选择TablePress插件下拉菜单中的指定选项？

我正在尝试用Python和Selenium WebDriver自动化替换WordPress的TablePress插件中的现有表格，但卡在了从下拉菜单选择现有表格的步骤。需要选择下拉菜单中的“ID bcwd_stock_auto: (no name)”选项。

对应的HTML结构如下：

<td class="column-2">
    <div class="jdropdown jdropdown-default">
        <div class="jdropdown-container-header">
        <input class="jdropdown-header jss_object" type="text" autocomplete="off" placeholder="— Select or type —"></div>
        <div class="jdropdown-container" style="min-width: 744.031px;"><div class="jdropdown-close">Done</div>
        <div class="jdropdown-content">
        <div class="jdropdown-item">
            <div class="jdropdown-description">— Select or type —</div></div>
            <div class="jdropdown-item">
            <div class="jdropdown-description">ID bcwd_current_stock: (no name)</div>
            </div>
            <div class="jdropdown-item">
            <div class="jdropdown-description">ID bcwd_stock_auto: (no name)</div>
            </div>
            </div>
        </div>
    <div class="jdropdown-backdrop"></div>
        </div>
<select id="tables-import-existing-table" name="import[existing_table]" style="display: none;">
    <option value="">— Select or type —</option>
    <option value="bcwd_current_stock">ID bcwd_current_stock: (no name)</option>
    <option value="bcwd_stock_auto">ID bcwd_stock_auto: (no name)</option>
</select>
</td>

我尝试了以下两种方法，但都没有效果：

方法一：

select = Select(driver.find_element_by_id('tables-import-existing-table'))
select.select_by_value('bcwd_stock_auto')

方法二：

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//select//option[contains(., 'bcwd_stock_auto')]"))).click()

解决方案 #

问题出在页面里的原生<select>元素被设置为display: none，Selenium直接操作它不会触发前端的交互逻辑，实际需要操作的是页面上显示的自定义下拉菜单组件（jdropdown），有两种可行方案：

方案一：模拟真实用户交互流程 #

按照用户手动操作的步骤，先展开下拉菜单，再点击目标选项：

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

# 1. 等待并点击下拉菜单头部，展开选项列表
dropdown_header = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, ".jdropdown-header"))
)
dropdown_header.click()

# 2. 等待目标选项加载完成并点击
target_option = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//div[@class='jdropdown-item' and contains(., 'bcwd_stock_auto')]"))
)
target_option.click()

# 可选：如果下拉菜单需要手动关闭，点击Done按钮
done_button = WebDriverWait(driver, 5).until(
    EC.element_to_be_clickable((By.CLASS_NAME, "jdropdown-close"))
)
done_button.click()

方案二：用JavaScript强制设置隐藏select的值 #

如果不需要模拟前端交互，直接通过JS修改隐藏select的数值并触发变化事件：

# 定位到隐藏的select元素
select_element = driver.find_element(By.ID, "tables-import-existing-table")

# 设置目标值
driver.execute_script("arguments[0].value = 'bcwd_stock_auto';", select_element)

# 触发change事件，确保页面识别到值的变更
driver.execute_script("arguments[0].dispatchEvent(new Event('change'));", select_element)

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