本文提供一种稳定、可复用的 selenium 自动化方案，用于精准定位并选择 grange hotels 官网日期选择器中的目标日期，解决因动态渲染、dom 延迟加载导致的元素无法 inspect 和点击失败问题。
本文提供一种稳定、可复用的 selenium 自动化方案，用于精准定位并选择 grange hotels 官网日期选择器中的目标日期，解决因动态渲染、dom 延迟加载导致的元素无法 inspect 和点击失败问题。
在自动化测试中操作日期选择器（datepicker）常面临诸多挑战：元素非初始加载、日期单元格动态生成、月份切换后 DOM 重绘、文本内容与实际值不一致（如显示“5”但包含空格或换行），以及传统 XPath 定位易受结构变动影响等。以 Grange Hotels 官网 的日期选择器为例，其日历面板采用纯前端渲染，
以下是一个经过验证的专业级解决方案，核心思想是：基于语义化定位 + 时间逻辑驱动 + 显式等待保障，而非依赖静态 HTML 结构。
✅ 推荐实现：面向时间语义的日期设置方法
首先，在测试用例中构造标准 Java 8 时间对象，并调用封装好的 SetDate() 工具方法：
String url = "https://www.php.cn/link/26a5a7a3e1700415f4f7cbde86c52ff0";
driver.get(url);
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
// 依次处理 Cookie 弹窗、预订入口、酒店下拉框、触发日期选择器
wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("#cookieConsent button"))).click();
wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("label.bookingmenu"))).click();
new Select(wait.until(ExpectedConditions.elementToBeClickable(By.id("Hotel")))).selectByVisibleText("Grange Buckingham Hotel");
wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("input[name='check_in_date']"))).click();
// 构造目标日期（清晰、不可变、时区无关）
LocalDate checkInDate = LocalDate.of(2023, Month.MAY, 5);
SetDate(checkInDate); // 调用下方工具方法
对应的核心工具方法如下（建议封装为 DatePickerHelper 类的静态方法）：
public static void SetDate(LocalDate targetDate) {
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
// 1. 精准定位当前可见的日历表格（避免被其他浮动层干扰）
WebElement calendar = wait.until(
ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.calendar-table > table"))
);
// 2. 定位并解析当前日历页眉的月份年份（如 "May 2023"）
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MMM yyyy");
boolean monthMatched = false;
while (!monthMatched) {
// 每次循环重新获取 calendar 元素，防止 StaleElementReferenceException
calendar = wait.until(
ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.calendar-table > table"))
);
String currentMonthYear = calendar.findElement(By.cssSelector("th.month")).getText().trim();
try {
YearMonth currentPanel = YearMonth.parse(currentMonthYear, formatter);
YearMonth targetPanel = YearMonth.from(targetDate);
if (currentPanel.equals(targetPanel)) {
monthMatched = true;
} else if (currentPanel.isBefore(targetPanel)) {
// 当前月份早于目标 → 点击右箭头
driver.findElement(By.cssSelector("i.fa-chevron-right")).click();
// 添加轻量等待，确保月份切换动画完成
Thread.sleep(300);
} else {
// 当前月份晚于目标 → 点击左箭头（Grange 支持向左翻页）
driver.findElement(By.cssSelector("i.fa-chevron-left")).click();
Thread.sleep(300);
}
} catch (DateTimeParseException | InterruptedException e) {
throw new RuntimeException("Failed to parse or navigate calendar: " + e.getMessage(), e);
}
}
// 3. 在目标月份内精准点击可用日期单元格
// 使用 XPath 相对定位（.//）确保在当前 calendar 范围内查找，且限定 class="available"
String dayXPath = String.format(".//td[@class='available' and text()='%s']", targetDate.getDayOfMonth());
wait.until(ExpectedConditions.elementToBeClickable(By.xpath(dayXPath))).click();
}
⚠️ 关键注意事项
- 避免硬编码 XPath：原始代码中 //body[1]/div[3]/... 强耦合 DOM 层级，一旦页面结构调整即失效；应优先使用 cssSelector 或相对 XPath（如 .//td[...]）。
- 显式等待不可省略：日历面板是异步加载的，必须使用 WebDriverWait 等待 visibilityOfElementLocated 或 elementToBeClickable，而非 Thread.sleep()。
-
区分“可用”与“禁用”日期：Grange 的日历中，不可选日期带有 class="unavailable"，直接遍历所有
可能误点禁用项。务必通过 @class='available' 过滤。 - 日期文本需严格匹配：.getText() 可能返回 " 5 "（含空格），建议使用 trim() 或改用 getAttribute("textContent").trim()；本方案通过 XPath 中 text()='5' 实现精确匹配，更鲁棒。
- 异常处理增强健壮性：在生产环境建议补充超时机制（如最大翻页次数限制）、日志输出及截图诊断。
✅ 总结
该方案摒弃了“暴力遍历+字符串匹配”的脆弱模式，转而以 LocalDate 为统一契约，将日期操作抽象为时间比较 → 月份导航 → 精确点击三阶段流程。它具备高可读性、强健壮性与良好可维护性，适用于任何遵循类似交互逻辑的 jQuery UI / Bootstrap Datepicker 类组件。对于持续集成环境，推荐将其沉淀为团队共享的 Page Component 或 Utility Library，显著提升自动化脚本的长期稳定性。
