Selenium自动化测试：处理自定义下拉菜单与隐藏Select元素

<div class="selection-box" alt="selection" title="selection" role="select" tabindex="0">
    <select id="select" style="display: none;">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3" selected="selected">Third</option>
    </select>
    <div class="current">Third</div>
    <ul class="options" style="display: none;">
        <li class="search--option" alt="First option" title="First option" aria-label="First option" role="option" tabindex="0">First</li>
        <li class="search--option" alt="Second option" title="Second option" aria-label="Second option" role="option" tabindex="0">Second</li>
        <li class="search--option selected" alt="Third option" title="Third option" aria-label="Third option" role="option" tabindex="0">Third</li>
    </ul>
</div>

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

# 1. 初始化WebDriver
driver = webdriver.Chrome()
driver.maximize_window() # 最大化窗口以确保元素可见
wait = WebDriverWait(driver, 15) # 设置显式等待，最长15秒

# 2. 定义处理自定义下拉菜单的函数
def select_dropdown_option_by_text(dropdown_opener_selector, option_selector, text_to_select):
    """
    通过模拟用户行为选择自定义下拉菜单中的选项。

    Args:
        dropdown_opener_selector (tuple): 下拉菜单触发器的定位器 (e.g., (By.CSS_SELECTOR, '.selection-box')).
        option_selector (tuple): 下拉选项的定位器 (e.g., (By.CSS_SELECTOR, '.search--option')).
        text_to_select (str): 要选择的选项的可见文本。
    """
    print(f"尝试选择下拉选项: {text_to_select}")

    # 步骤1: 定位并点击下拉菜单的触发器，使其展开
    # 使用 presence_of_element_located 确保元素存在于DOM中
    dropdown_opener = wait.until(EC.presence_of_element_located(dropdown_opener_selector))
    dropdown_opener.click()
    print("已点击下拉菜单触发器。")

    # 步骤2: 等待所有选项可见，然后找到并点击目标选项
    # 使用 visibility_of_all_elements_located 确保选项列表已展开且可见
    options = wait.until(EC.visibility_of_all_elements_located(option_selector))

    found_option = None
    for element in options:
        # 匹配文本时通常建议转换为小写以进行不区分大小写的比较
        if element.text.strip().lower() == text_to_select.lower():
            found_option = element
            break

    if found_option:
        found_option.click()
        print(f"已选择选项: {text_to_select}")
        # 步骤3 (可选但推荐): 等待下拉菜单关闭或选定元素不可见
        # 这有助于确保页面状态已更新，避免后续操作出现StaleElementReferenceException
        wait.until(EC.invisibility_of_element(found_option))
        print("下拉菜单已关闭。")
    else:
        raise ValueError(f"未找到文本为 '{text_to_select}' 的选项。")

# 3. 处理潜在的页面干扰元素（例如：Google Ads）
# 有时页面上会有广告或其他浮层阻挡元素，导致 ElementClickInterceptedException
# 可以通过JavaScript注入来移除这些元素
def remove_obstructing_elements_js():
    """
    通过JavaScript移除页面上常见的广告iframe或其他浮层。
    此函数会等待并移除匹配到的元素。
    """
    print("尝试移除页面干扰元素...")
    script = """
      function waitForElementAndRemove() {
        let element = document.querySelector('[id*=google_ads_iframe],[id*=ad_iframe], .some-popup-ad-class');
        if (element) {
            element.remove();
            console.log('Removed obstructing element');
        } else {
           // 如果找不到，可以继续尝试，或者在一定次数后停止
           // 为了简化，这里只移除一次或不执行循环
           // setTimeout(waitForElementAndRemove, 1000); 
        }
    }
      waitForElementAndRemove();
    """
    driver.execute_script(script)
    print("已执行移除干扰元素的JavaScript。")


# --- 实际操作 ---
try:
    # 假设我们要访问一个包含类似下拉菜单的页面
    driver.get("https://www.wwe.com/superstars") # 示例URL，请替换为您的目标URL

    # 移除可能的广告或其他浮层，以防阻挡下拉菜单
    remove_obstructing_elements_js()

    # 调用函数选择下拉选项
    # 根据示例HTML，下拉菜单触发器是 class="superstar-search--selection-box" (假设，根据原答案提供)
    # 选项是 class="superstar-search--option"
    select_dropdown_option_by_text(
        (By.CSS_SELECTOR, '.superstar-search--selection-box'),
        (By.CSS_SELECTOR, '.superstar-search--option'),
        'all superstars' # 示例文本
    )

    # 可以继续其他自动化操作
    # ...

except Exception as e:
    print(f"发生错误: {e}")
finally:
    # 确保在完成或出错时关闭浏览器
    driver.quit()
    print("浏览器已关闭。")