使用Python+Selenium 4.0按含空格类名定位元素点击翻页问题

问题根源 #

By.CLASS_NAME 不支持空格分隔的多个类名——空格代表元素拥有多个独立的CSS类，你之前用点替换空格的写法是CSS选择器的语法，但错误地用在了By.CLASS_NAME定位方式上，导致定位失败。

正确定位方案 #

1. 使用CSS选择器（推荐）

把类名中的空格替换为.，直接用By.CSS_SELECTOR定位：

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

# 定位翻页按钮（需区分页码按钮，可结合父元素属性）
next_page_btn = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "span.vtex-button__label.flex.items-center.justify-center.h-100.ph5"))
)
next_page_btn.click()

如果该类名同时出现在页码按钮和翻页按钮上，可通过父元素的aria-label等属性区分（比如下一页按钮的父元素通常有“下一页”相关标识）：

# 精准定位下一页按钮
next_page_btn = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "button[aria-label='Siguiente página'] > span.vtex-button__label.flex.items-center.justify-center.h-100.ph5"))
)
next_page_btn.click()

2. 使用XPATH定位

通过匹配所有类名来定位元素：

next_page_btn = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//span[contains(@class, 'vtex-button__label') and contains(@class, 'flex') and contains(@class, 'items-center') and contains(@class, 'justify-center') and contains(@class, 'h-100') and contains(@class, 'ph5')]"))
)
next_page_btn.click()

同样，可结合其他属性区分页码和翻页按钮：

# 定位带下一页箭头的目标按钮
next_page_btn = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//button[contains(@aria-label, 'Siguiente página')]/span[@class='vtex-button__label flex items-center justify-center h-100 ph5']"))
)
next_page_btn.click()

额外注意事项 #

• 若按钮在页面底部，需先滚动到元素可见位置再点击：

  driver.execute_script("arguments[0].scrollIntoView();", next_page_btn)
  next_page_btn.click()
  

• 延长等待时间（比如10秒）确保页面完全加载，避免因元素未就绪导致的定位失败
• 检查页面是否存在iframe，若按钮在iframe内，需先切换到对应iframe再定位

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