使用Python Selenium点击非选择型下拉菜单选项的问题

正在自动化文件下载与预处理任务，下载时需指定日期（网站隐私无法分享），但无法选中Dec 2022、Jan 2023这类日期选项。

对应的HTML代码：

<button type="button" ng-click="clickDrop($event)" ng-show="showButton()" data-wt="toggle">
         <span class="ng-binding">Current Month</span>
         <span ng-hide="dropOpen" class="caret ng-hide"></span>
         <span ng-show="dropOpen" class="dropup"><span class="caret"></span></span>
     </button>
 <div class="rpt-dext-select-dropdown-options" data-wt="dropdown" ng-show="isEditable()">
 <div ng-repeat="option in options|filter:{label:searchFilter}" ng-click="selectOption(option,$event)" class="rpt-dext-select-dropdown-checkable ng-scope" data-wt="202301">   <span ng-class="{'rpt-dext-select-dropdown-checked':selections.includes(option)}" class="ng-binding">Jan 2023</span>
                <span class="fas fa-check check-mark ng-hide" ng-show="selections.includes(option)"></span>
             </div>
 <div ng-repeat="option in options|filter:{label:searchFilter}" ng-click="selectOption(option,$event)" class="rpt-dext-select-dropdown-checkable ng-scope" data-wt="202212">   <span ng-class="{'rpt-dext-select-dropdown-checked':selections.includes(option)}" class="ng-binding">Dec 2022</span>
                <span class="fas fa-check check-mark ng-hide" ng-show="selections.includes(option)"></span>
             </div>

已实现打开下拉菜单的代码：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, '.ng-isolate-scope:nth-child(3) .ng-isolate-scope~ .ng-isolate-scope button .ng-binding'))).click()

但无法用click()方法选中选项，select()方法也不生效。

方法1：通过data-wt属性精准定位选项 #

利用日期对应的编码属性定位，避免文本或DOM结构变动的影响：

# 打开下拉菜单
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, '.ng-isolate-scope:nth-child(3) .ng-isolate-scope~ .ng-isolate-scope button .ng-binding'))).click()

# 选中Jan 2023
jan_option = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'div[data-wt="202301"]')))
jan_option.click()

# 选中Dec 2022则替换为：
# dec_option = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'div[data-wt="202212"]')))
# dec_option.click()

方法2：通过选项文本定位 #

直接根据显示的日期文本定位，适合文本固定的场景：

# 打开下拉菜单后
jan_option = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[text()='Jan 2023']/parent::div")))
jan_option.click()

# Dec 2022对应的定位代码：
# dec_option = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[text()='Dec 2022']/parent::div")))
# dec_option.click()

方法3：直接执行AngularJS的selectOption方法 #

页面基于AngularJS开发，直接调用页面内置方法可避免DOM交互问题：

# 打开下拉菜单后，获取目标选项元素
jan_element = WebDriverWait(driver, 20).until(EC.presence_of_element_located((By.CSS_SELECTOR, 'div[data-wt="202301"]')))

# 执行元素的click事件（模拟原生点击）
driver.execute_script("arguments[0].click()", jan_element)

方法4：确保下拉菜单完全渲染后操作 #

部分场景下，下拉菜单点击后选项未完全加载，需等待容器可见：

# 打开下拉菜单
dropdown_button = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, '.ng-isolate-scope:nth-child(3) .ng-isolate-scope~ .ng-isolate-scope button .ng-binding')))
dropdown_button.click()

# 等待下拉选项容器完全可见
WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CLASS_NAME, 'rpt-dext-select-dropdown-options')))

# 选中目标选项
jan_option = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'div[data-wt="202301"]')))
jan_option.click()

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