Selenium无法点击单选按钮触发ElementClickInterceptedException异常

场景说明 #

• 爬取目标页面：https://www.velocityap.com/product/3-0l-v6-supercharged-jaguar-land-rover-aj126-ecu-tuning/
• 爬取目标：页面内的汽车配件价格，该价格需选中指定单选按钮组后才会加载显示，价格位置参考下图：
  

原有实现代码 #

options_panel_4 = driver.find_elements(By.CSS_SELECTOR,'div.summary.entry-summary > div.mspc-wrapper.mspc-clearfix.mspc-module-accordion.mspc-auto-next.mspc-step-by-step > div > div:nth-child(8) > div > div')
print('Options under options panel 3 :', len(options_panel_4))

for option_4 in options_panel_4:
    driver.execute_script("arguments[0].scrollIntoView();", option_4)
    option_4.find_element(By.CSS_SELECTOR, 'div > div.mspc-radio.ui.radio.checkbox > input[type=radio]').click()

报错信息 #

代码运行时抛出selenium.common.exceptions.ElementClickInterceptedException异常，提示目标单选按钮被顶部固定导航栏遮挡，点击操作被导航栏拦截，无法正常选中，完整报错栈如下：

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <div class="mspc-radio ui radio checkbox">...</div> is not clickable at point (890, 14). Other element would receive the click: <div class="infinite-navigation infinite-item-pdlr clearfix infinite-navigation-submenu-indicator ">...</div>
  (Session info: chrome=102.0.5005.115)
Stacktrace:
0   chromedriver                        0x00000001024162c9 chromedriver + 5120713
1   chromedriver                        0x00000001023a4e33 chromedriver + 4656691
2   chromedriver                        0x0000000101f94158 chromedriver + 393560
3   chromedriver                        0x0000000101fd0638 chromedriver + 640568
4   chromedriver                        0x0000000101fce1b3 chromedriver + 631219
5   chromedriver                        0x0000000101fcb814 chromedriver + 620564
6   chromedriver                        0x0000000101fca5b2 chromedriver + 615858
7   chromedriver                        0x0000000101fbe249 chromedriver + 565833
8   chromedriver                        0x0000000101fe6482 chromedriver + 730242
9   chromedriver                        0x0000000101fbdb05 chromedriver + 563973
10  chromedriver                        0x0000000101fe658e chromedriver + 730510
11  chromedriver                        0x0000000101ff8f41 chromedriver + 806721
12  chromedriver                        0x0000000101fe6373 chromedriver + 729971
13  chromedriver                        0x0000000101fbc609 chromedriver + 558601
14  chromedriver                        0x0000000101fbd635 chromedriver + 562741
15  chromedriver                        0x00000001023e8b1d chromedriver + 4934429
16  chromedriver                        0x00000001023ed295 chromedriver + 4952725
17  chromedriver                        0x00000001023f23cf chromedriver + 4973519
18  chromedriver                        0x00000001023edcba chromedriver + 4955322
19  chromedriver                        0x00000001023c837c chromedriver + 4801404
20  chromedriver                        0x0000000102407c68 chromedriver + 5061736
21  chromedriver                        0x0000000102407def chromedriver + 5062127
22  chromedriver                        0x000000010241d5e5 chromedriver + 5150181
23  libsystem_pthread.dylib             0x00007ff80f3874e1 _pthread_start + 125
24  libsystem_pthread.dylib             0x00007ff80f382f6b thread_start + 15

解决方法 #

问题核心原因是默认scrollIntoView()会将元素滚动到视口最顶部，刚好被固定在顶部的导航栏覆盖，导致点击落点落在导航栏上。三种可直接落地的修复方案：

• 调整滚动位置，将元素滚动到视口中间区域，避开顶部导航

import time
from selenium.webdriver.common.by import By

# 替换原有滚动逻辑
for option_4 in options_panel_4:
    # 把元素滚动到视口中央，不会被顶部导航遮挡
    driver.execute_script("arguments[0].scrollIntoView({block: 'center'});", option_4)
    time.sleep(0.3) # 等待滚动动画完成
    option_4.find_element(By.CSS_SELECTOR, 'div > div.mspc-radio.ui.radio.checkbox > input[type=radio]').click()

• 直接通过JS触发元素点击，绕过Selenium的元素可见性/点击位置校验

for option_4 in options_panel_4:
    radio_input = option_4.find_element(By.CSS_SELECTOR, 'div > div.mspc-radio.ui.radio.checkbox > input[type=radio]')
    # JS直接触发点击，不受元素遮挡影响
    driver.execute_script("arguments[0].click();", radio_input)

• 提前隐藏遮挡的导航栏元素，再执行原有点击逻辑

# 选中遮挡的导航栏，直接设置隐藏
blocking_nav = driver.find_element(By.CSS_SELECTOR, 'div.infinite-navigation')
driver.execute_script("arguments[0].style.display = 'none';", blocking_nav)

# 后续原有逻辑不需要修改即可正常点击
for option_4 in options_panel_4:
    driver.execute_script("arguments[0].scrollIntoView();", option_4)
    option_4.find_element(By.CSS_SELECTOR, 'div > div.mspc-radio.ui.radio.checkbox > input[type=radio]').click()

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