如何用Python Selenium操作自定义bc-dropdown下拉框切换页面内容？

问题背景 #

我有一个自定义的<bc-dropdown>组件，代码如下：

<bc-dropdown class="hydrated" options="Week 1,Week 2,Week 3,Week 4,Week 5,Week 6,Week 7,Week 8,Week 9,Week 10,Week 11,Week 12,Week 13,Week 14,Week 15,Bowls" selected="Week 1" uid="fd5704d7-8531-483b-9f92-96340b80da78">
            <!--r.4-->
            <div class="bc-dropdown bc-wc-select-container bc-week-dropdown-width d-flex justify-content-end">
              <div class="position-relative w-100">
                <div class="bg-white h-100 sport-dropdown w-100">
                  <div class="align-items-center d-flex h-100 justify-content-between my-auto">
                    <p>
                      <strong class="category font-sf-ui-display-medium my-auto pl-3">
                        Week 2</strong>
                    </p>
                    <span class="pr-3">
                      <i class="fa-angle-down fas"></i>
                    </span>
                  </div>
                </div>
                <div class="bc-week-dropdown-width dropdown-menu overflow-auto">
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 1">
                    <strong class="category-text">
                      Week 1</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 2">
                    <strong class="dropdown-item-selected">
                      Week 2</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 3">
                    <strong class="category-text">
                      Week 3</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 4">
                    <strong class="category-text">
                      Week 4</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 5">
                    <strong class="category-text">
                      Week 5</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 6">
                    <strong class="category-text">
                      Week 6</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 7">
                    <strong class="category-text">
                      Week 7</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 8">
                    <strong class="category-text">
                      Week 8</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 9">
                    <strong class="category-text">
                      Week 9</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 10">
                    <strong class="category-text">
                      Week 10</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 11">
                    <strong class="category-text">
                      Week 11</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 12">
                    <strong class="category-text">
                      Week 12</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 13">
                    <strong class="category-text">
                      Week 13</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 14">
                    <strong class="category-text">
                      Week 14</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 15">
                    <strong class="category-text">
                      Week 15</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Bowls">
                    <strong class="category-text">
                      Bowls</strong>
                  </div>
                </div>
              </div>
            </div>
          </bc-dropdown>

尝试修改selected属性（如下代码）无法触发页面变化，且该组件不是原生select，无法使用Selenium的Select类：

dropdown = browser.find_element(By.TAG_NAME, "bc-dropdown")
browser.execute_script("arguments[0].setAttribute('selected',arguments[1])",dropdown, value)

解决方案 #

方法1：模拟真实用户交互 #

直接模拟点击下拉框展开，再点击目标选项：

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

# 等待下拉框触发器可点击并点击展开
dropdown_trigger = WebDriverWait(browser, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "bc-dropdown .sport-dropdown"))
)
dropdown_trigger.click()

# 等待目标选项出现并点击
target_value = "Week 5"  # 替换成需要选中的值
target_option = WebDriverWait(browser, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, f"bc-dropdown .dropdown-item[data-value='{target_value}']"))
)
target_option.click()

这种方法完全复刻用户操作流程，能触发组件绑定的所有事件，是最稳妥的解决方案。

方法2：用JS直接触发选项点击事件 #

如果模拟点击遇到加载或渲染问题，可以用JS直接触发选项的点击事件：

target_value = "Bowls"  # 替换目标值
# 定位目标选项元素
target_option = browser.find_element(By.CSS_SELECTOR, f"bc-dropdown .dropdown-item[data-value='{target_value}']")
# 执行JS点击
browser.execute_script("arguments[0].click();", target_option)

方法3：调用自定义组件的内部API #

自定义Web组件通常会暴露内部方法用于更新状态，可尝试调用对应方法并触发变更事件：

target_value = "Week 3"
dropdown = browser.find_element(By.TAG_NAME, "bc-dropdown")
# 先更新selected属性，再触发change事件
browser.execute_script("""
    arguments[0].selected = arguments[1];
    arguments[0].dispatchEvent(new Event('change'));
""", dropdown, target_value)

如果组件有专门的更新方法（比如setValue、updateSelection），可以替换成对应方法调用。

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