Python Selenium点击<a>标签无法触发弹窗的问题求助

问题背景 #

练习爬取World Surf League网站时，使用Selenium导航到赛事结果页后，点击"Details"链接无法触发预期的弹窗，导致后续获取wave-score元素时抛出selenium.common.exceptions.NoSuchElementException。原代码如下：

from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains

url = 'https://www.worldsurfleague.com/events?all=1&year=2023'

options = webdriver.ChromeOptions()
driver = webdriver.Chrome(options=options)

driver.get(url)
link_element = driver.find_elements(By.CLASS_NAME, "event-schedule-details__event-name")
link_href = link_element[0].get_attribute('href')
driver.get(link_href.replace('/main', '/results'))

womens_heats = "//a[@title=\"Women's Heats\"]"
element = driver.find_element(By.XPATH, womens_heats)
actions = ActionChains(driver)
actions.move_to_element(element).click().perform()

details_selector = driver.find_elements(By.LINK_TEXT, 'Details')[0]

print(details_selector)
next_element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.LINK_TEXT, 'Details')))
actions.move_to_element(next_element).click().perform()

print(driver.find_element(By.CSS_SELECTOR, 'span.wave-score').get_attribute('textContent'))

driver.quit()

问题原因 #

1. 等待条件不合理：使用presence_of_element_located仅判断元素存在，但元素可能未完全加载或处于不可点击状态。
2. 点击方式可靠性不足：ActionChains的模拟点击有时会因元素不在视口内或页面动态渲染问题失效，不如直接调用元素的click()方法稳定。
3. 未等待弹窗元素加载：点击"Details"后弹窗需要时间渲染，直接查找wave-score会因元素未存在而报错。

解决方案 #

1. 替换等待条件为element_to_be_clickable，确保元素可交互后再点击。
2. 点击前先滚动到元素位置，避免因元素在视口外导致点击失效。
3. 点击"Details"后，等待弹窗内的目标元素wave-score加载完成再进行获取。

修正后的代码 #

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

url = 'https://www.worldsurfleague.com/events?all=1&year=2023'

options = webdriver.ChromeOptions()
driver = webdriver.Chrome(options=options)
driver.maximize_window()  # 最大化窗口减少视口问题

driver.get(url)
# 等待赛事链接加载并获取第一个赛事结果页链接
link_element = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CLASS_NAME, "event-schedule-details__event-name"))
)
link_href = link_element.get_attribute('href')
driver.get(link_href.replace('/main', '/results'))

# 点击Women's Heats标签
womens_heats = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//a[@title=\"Women's Heats\"]"))
)
womens_heats.click()

# 等待第一个Details链接可点击并点击
details_link = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.LINK_TEXT, 'Details'))
)
# 滚动到元素位置
driver.execute_script("arguments[0].scrollIntoView(true);", details_link)
details_link.click()

# 等待弹窗内的wave-score元素加载并获取文本
wave_scores = WebDriverWait(driver, 10).until(
    EC.presence_of_all_elements_located((By.CSS_SELECTOR, 'span.wave-score'))
)
for score in wave_scores:
    print(score.text)

driver.quit()

关键优化点 #

• 全程使用element_to_be_clickable替代presence_of_element_located，确保元素可交互。
• 加入scrollIntoView滚动到元素位置，解决视口外元素点击失效问题。
• 点击弹窗后等待wave-score元素集合加载，避免单个元素查找的不确定性。
• 最大化浏览器窗口，减少因视口大小导致的元素不可见问题。

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