Selenium自动化预约：遍历日期选择器并选择可用日期与时段

一、直接通过JS操作实现（利用日期选择器的JS控制逻辑） #

因为日期选择器本身由JS驱动，直接用JS遍历验证是最高效的方式，可直接在浏览器控制台或自动化脚本中执行：

1. 定位所有可用日期 #

先抓取页面上所有符合条件的可用日期元素（对应你提供的<td class="day activeClass" title="Book">23</td>格式）：

// 获取所有带"Book"标题、有activeClass的日期单元格
const availableDates = Array.from(document.querySelectorAll('td.day.activeClass[title="Book"]'));

2. 遍历日期并检查时段可用性 #

循环每个可用日期，点击后验证是否有可预约时段，没有则切换回日期选择器继续下一个：

// 自定义函数：检查当前日期是否有可用时段
function hasAvailableSlots() {
  // 这里的选择器要换成你页面中"可用时段"元素的真实选择器，比如可点击的时段按钮
  return document.querySelectorAll('.time-slot.enabled').length > 0;
}

// 主逻辑：遍历找符合条件的日期
async function pickValidDate() {
  for (const dateEl of availableDates) {
    // 点击当前日期
    dateEl.click();
    // 等待时段列表加载（根据页面实际加载速度调整等待时间）
    await new Promise(resolve => setTimeout(resolve, 1200));
    
    // 检查是否有可用时段
    if (hasAvailableSlots()) {
      console.log(`找到可用日期：${dateEl.textContent.trim()}`);
      return dateEl;
    } else {
      // 无可用时段，重新打开日期选择器（替换成你页面中打开日期选择器的按钮选择器）
      document.querySelector('#date-picker-btn').click();
      await new Promise(resolve => setTimeout(resolve, 600));
    }
  }
  // 所有可用日期都无时段的情况
  console.log('没有找到可预约的日期');
  return null;
}

// 执行函数
pickValidDate();

二、结合自动化工具（如Selenium）调用JS #

如果用Python/Java写自动化脚本，可以把上述JS代码嵌入到工具中执行，以Python Selenium为例：

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

driver = webdriver.Chrome()
driver.get("你的预约页面URL")

# 先打开日期选择器（替换成实际打开按钮的定位方式）
driver.find_element(By.ID, "date-picker-btn").click()
time.sleep(0.6)

# 执行JS逻辑
js_script = """
const availableDates = Array.from(document.querySelectorAll('td.day.activeClass[title="Book"]'));
function hasAvailableSlots() {
  return document.querySelectorAll('.time-slot.enabled').length > 0;
}
async function pickValidDate() {
  for (const dateEl of availableDates) {
    dateEl.click();
    await new Promise(resolve => setTimeout(resolve, 1200));
    if (hasAvailableSlots()) {
      return dateEl.textContent.trim();
    } else {
      document.querySelector('#date-picker-btn').click();
      await new Promise(resolve => setTimeout(resolve, 600));
    }
  }
  return null;
}
return pickValidDate();
"""

valid_date = driver.execute_script(js_script)
if valid_date:
    print(f"成功找到可预约日期：{valid_date}")
else:
    print("所有可用日期均无预约时段")

关键注意点 #

• 选择器适配：代码中的时段选择器（.time-slot.enabled）、日期选择器打开按钮选择器（#date-picker-btn）需要根据你页面的真实DOM结构修改。
• 等待优化：尽量用wait.until等精准等待方式替代固定时长的setTimeout/time.sleep，避免页面加载慢导致的判断错误。
• 异常处理：可添加try-catch块，处理元素点击失败、元素不存在等异常情况。

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