Selenium 3.141.0网页爬虫：无法检测并选择自定义下拉菜单

我使用Selenium 3.141.0编写网页爬虫脚本，需要从包含Draft、Submitted、Reviewed、Released、Rejected、Obsolete选项的状态下拉菜单中选择指定选项，但始终无法检测到该下拉菜单元素。尝试通过类、CSS选择器及ID定位均无效，对应的HTML代码如下：

<div class="controls col-md-5 angular2-multiselect" id="status-field">
   <ctf-angular2-multiselect class="defaultSettings ng-valid ng-touched ng-dirty">
      <div class="cuppa-dropdown" qa-name="dropdown-multiselect">
         <div class="selected-list" tabindex="0">
            <div class="c-btn" qa-name="toggle-dropdown-statusField">
               <!----><!----><!---->
               <span>
                  <!----><span qa-name="item-0">Draft</span>
               </span>
               <!----><!----><!---->
               <div class="dropdown-caret"></div>
            </div>
         </div>
         <div class="dropdown-container" qa-name="dropdown" hidden="">
            <div class="dropdown-list">
               <div class="list-area" qa-name="list-area">
                  <!----><!----><!----><!----><!---->
                  <ul class="lazyContainer">
                     <!----><!---->
                     <span>
                        <!---->
                        <li class="pure-checkbox single-select-label-selected">
                           <!----><label qa-name="item-0" title="Draft" class="single-select-label">Draft</label>
                        </li>
                        <li class="pure-checkbox">
                           <!----><label qa-name="item-1" title="Submitted" class="single-select-label">Submitted</label>
                        </li>
                        <li class="pure-checkbox">
                           <!----><label qa-name="item-2" title="Reviewed" class="single-select-label">Reviewed</label>
                        </li>
                        <li class="pure-checkbox">
                           <!----><label qa-name="item-3" title="Released" class="single-select-label">Released</label>
                        </li>
                        <li class="pure-checkbox">
                           <!----><label qa-name="item-4" title="Rejected" class="single-select-label">Rejected</label>
                        </li>
                        <li class="pure-checkbox">
                           <!----><label qa-name="item-5" title="Obsolete" class="single-select-label">Obsolete</label>
                        </li>
                     </span>
                     <!---->
                  </ul>
                  <!----><!----><!----><!---->
               </div>
            </div>
         </div>
      </div>
   </ctf-angular2-multiselect>
</div>

我尝试过以下两段代码，均未实现预期效果：

Select(driver.find_element(By.CSS_SELECTOR, 'ctf-angular2-multiselect')).select_by_value("Released")

Select(driver.find_element_by_id('status-field')).select_by_value("Released")

解决方法 #

这个下拉菜单是Angular自定义组件，不是原生<select>标签，因此不能用Selenium的Select类操作，需要模拟人工交互步骤：

1. 点击触发下拉菜单展开
2. 等待选项列表加载完成
3. 点击目标选项

示例代码

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

# 显式等待下拉触发按钮可点击并点击
toggle_button = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.QA_NAME, "toggle-dropdown-statusField"))
)
toggle_button.click()

# 显式等待目标选项可点击并选择
target_option = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//label[@title='Released']"))
)
target_option.click()

可选定位方式

• 可以通过qa-name属性直接定位目标选项：(By.QA_NAME, "item-3")
• 也可以通过文本内容定位：(By.XPATH, "//label[text()='Released']")

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