如何使用Selenium自动选择Datepicker中的指定日期？

问题场景 #

你的Datepicker组件将日期拆分存储在元素的data-date、data-month、data-year属性中，例如要选择2023年8月1日，对应元素为：

<div class="datepicker--cell datepicker--cell-day" data-date="1" data-month="8" data-year="2023">1</div>

但直接用find_element定位失败，需要正确实现自动选择逻辑。

解决方案 #

1. 精准定位目标日期元素 #

利用CSS选择器组合三个data属性，实现唯一元素定位：

from selenium.webdriver.common.by import By

# 构造CSS选择器
date_selector = 'div.datepicker--cell-day[data-date="1"][data-month="8"][data-year="2023"]'
# 定位并点击元素
target_date = driver.find_element(By.CSS_SELECTOR, date_selector)
target_date.click()

2. 处理目标日期不在当前显示月份的情况 #

如果目标日期不在日历当前展示的月份，需要先切换到对应年月：

• 读取当前日历的年月标题（datepicker--nav-title元素）
• 对比目标年月，点击prev或next按钮切换
• 直到目标年月显示后，再定位并点击日期

3. 等待元素可交互，避免定位失败 #

使用WebDriverWait等待元素加载完成并可点击，防止因页面渲染延迟导致的异常：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

wait = WebDriverWait(driver, 10)
target_date = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, date_selector)))
target_date.click()

4. 完整可复用代码示例（Python） #

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

def select_target_date(driver, target_year, target_month, target_day):
    # 月份名称与数字的映射（根据你的Datepicker语言调整）
    month_name_map = {
        'Janeiro': 1, 'Fevereiro': 2, 'Março': 3, 'Abril': 4, 'Maio': 5, 'Junho': 6,
        'Julho': 7, 'Agosto': 8, 'Setembro': 9, 'Outubro': 10, 'Novembro': 11, 'Dezembro': 12
    }

    # 循环切换到目标年月
    while True:
        # 获取当前显示的年月
        nav_title = driver.find_element(By.CLASS_NAME, 'datepicker--nav-title').text.strip()
        current_month_name, current_year = nav_title.split(', ')
        current_month_num = month_name_map[current_month_name]

        # 判断是否已到达目标年月
        if int(current_year) == target_year and current_month_num == target_month:
            break
        # 需要切换到下一月
        elif int(current_year) < target_year or (int(current_year) == target_year and current_month_num < target_month):
            next_btn = driver.find_element(By.CSS_SELECTOR, 'div.datepicker--nav-action[data-action="next"]')
            next_btn.click()
        # 需要切换到上一月
        else:
            prev_btn = driver.find_element(By.CSS_SELECTOR, 'div.datepicker--nav-action[data-action="prev"]')
            prev_btn.click()
    
    # 定位并点击目标日期
    date_selector = f'div.datepicker--cell-day[data-date="{target_day}"][data-month="{target_month}"][data-year="{target_year}"]'
    target_date = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, date_selector)))
    target_date.click()

# 调用示例：选择2023年8月1日
select_target_date(driver, 2023, 8, 1)

注意事项 #

• 确认月份索引规则：检查你的Datepicker中data-month是0-based（如8月对应7）还是1-based（如8月对应8），调整代码中的月份映射和参数。
• 处理其他状态类：目标日期元素可能带有-other-month-类，但只要data属性匹配，依然可以正常定位和点击。
• 适配语言差异：如果Datepicker的月份名称是其他语言，修改month_name_map的键值对即可。

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