Chrome中Selenium无法与下拉框交互的问题求助

我是Python初学者，尝试使用Selenium从下拉列表中选择选项时，持续出现“Element not interactable”异常。手动可正常点击该下拉框，且确认无标签覆盖。已尝试多种方法（代码中已注释），但均失败并触发对应错误。

原代码 #

import selenium
from selenium import webdriver
from selenium.webdriver.chrome.service import Service

from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
#from selenium.webdriver.common.action_chains import action_chains
#from selenium.webdriver.common.actions import Actions
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.select import Select
#from selenium.webdriver.remote import Remote
from selenium.webdriver.chrome.options import Options as ChromeOptions

service = Service()

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)

driver = webdriver.Chrome(service=service, options=chrome_options)
driver.get("https://gtc.clubautomation.com/")

#
# removed code to login and move to reservations page
#

reserve_court_link = driver.find_element(by=By.ID, value="menu_reserve_a_court")
reserve_court_link.click()

driver.maximize_window()
driver.refresh()
driver.execute_script("window.scrollTo(0,600)")

#Choose service (unecessary manually, but hopefully driving further options?? Only one option to pick)
service_dropdown = Select(driver.find_element(by=By.XPATH, value="//select[@id='component'][@name='component']"))
service_dropdown.select_by_value("2")

#Choose pickleball option
pickleball_dropdown = Select(driver.find_element(by=By.XPATH, value="//select[@id='location'][@name='location']"))
dropdown_element = driver.find_element(by=By.XPATH, value="//select[@id='location'][@name='location']")

#Verify dropdown exists
if pickleball_dropdown is not None: 
    print("drop down exists")
else:
    print("dropdown does NOT exist")

#Verify I have the right dropdown
test_option = pickleball_dropdown.first_selected_option
print(test_option.get_attribute("innerHTML"))

#print values of dropdown
for opt in pickleball_dropdown.options:
    print("option: " + opt.get_attribute("innerHTML") + " : " + opt.get_attribute("value"))

#select by visible text doesn't seem to do anything.
pickleball_dropdown.select_by_visible_text("All Service Locations")

# expand housing type dropdown using javascript -- doesn't seem to actually expand dropdown
dropdown_trigger = driver.find_element(by=By.XPATH, value="//select[@id='location'][@name='location']")
driver.execute_script("arguments[0].click();", dropdown_trigger)

#Wait for object to be clickable -- times out.
#WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//select[@id='location'][@name='location']"))).click()

#error: ElementNotInteractableException: Message: element not interactable
dropdown_element.click()

#AttributeError: 'Select' object has no attribute 'click'
#pickleball_dropdown.click()

#ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated
pickleball_dropdown.select_by_value("35")

目标页面HTML结构 #

<div class="reserve-court-new-header">Make a New Reservation</div>
<div class="reserve-court-new">
<div class="ca-element-error-wrapper">
     <input type="hidden" name="user_id" value="37688" id="user_id">
</div>    
<div class="ca-element-error-wrapper">
     <input type="hidden" name="event_member_token_reserve_court" value="b3f10b9d113922226d18db05b8c3a448" id="event_member_token_reserve_court">
</div>    
<div class="ca-element-error-wrapper">
     <input type="hidden" name="current_guest_count" value="0" id="current_guest_count">
</div>    
<div class="r-line">
     <div class="t-block">What Service?</div>
     <div class="i-block"><div class="ca-element-error-wrapper">
          <span class="ca-pro-ui"><span class="select-input-container">
               <select name="component" id="component" class="ca-select">
                   <option value="2" selected="selected">Tennis</option>
             </select>
             <script type="text/javascript">
                    (function($) {
                        $(document).ready(function() {
                            $("#component").caSelect({"width":150,"tickWidth":30,"selectType":"select"});
                        });
                    })(jQuery)
              </script>
       </span>
   </span>
 </div>
 </div>
 <div class="clear-both"></div>
 </div>
 <div class="r-line" >
      <div class="t-block">Where?</div>
      <div class="i-block"  style="display: none;">
           <div class="ca-element-error-wrapper">
                <span class="ca-pro-ui"><span class="select-input-container">
                     <select name="club" id="club" class="ca-select">
                         <option value="-1" selected="selected">All Locations</option>
                         <option value="1">Lifetime Tennis GTC</option>
                    </select>
                <script type="text/javascript">
                    (function($) {
                        $(document).ready(function() {
                            $("#club").caSelect({"width":150,"tickWidth":30,"selectType":"select"});
                        });
                    })(jQuery)
                </script>
            </span>
       </span>
  </div>
</div>
<div class="i-block"><div class="ca-element-error-wrapper">
     <span class="ca-pro-ui"><span class="select-input-container">
          <select name="location" id="location" class="ca-select">
              <option value="-1">All Service Locations</option>
              <option value="1">Tennis</option>
              <option value="35">Pickleball / Mini Tennis</option>
          </select>

目标页面截图 #

• 主页面截图
• 第一个下拉框截图
• 无法点击的目标下拉框截图

解决方案 #

问题核心是页面用了caSelect jQuery插件美化原生下拉框，原生<select>元素被插件隐藏，直接操作它必然触发ElementNotInteractable异常。必须操作插件生成的可见模拟下拉框元素，而非原生select。

修改后的关键代码：

# 等待插件生成的location下拉框触发按钮加载并可点击
location_dropdown_trigger = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "#location + .select-input-container .ca-select-selected"))
)
location_dropdown_trigger.click()

# 等待并点击Pickleball选项
pickleball_option = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//div[contains(@class, 'ca-select-options')]//div[text()='Pickleball / Mini Tennis']"))
)
pickleball_option.click()

额外优化建议：

1. 移除不必要的页面刷新，登录跳转后直接操作元素即可
2. 滚动页面改用元素定位后滚动到视图，比固定值滚动更可靠：

# 等待目标区域元素加载后滚动到视图
target_element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "location")))
driver.execute_script("arguments[0].scrollIntoView(true);", target_element)

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