本文提供一种稳定、可复用的 selenium 自动化方法，用于精准定位并选择 grange hotels 官网日期选择器中的目标日期，彻底解决因动态渲染、元素不可见或 xpath 失效导致的“无法 inspect 日期单元格”问题。
本文提供一种稳定、可复用的 selenium 自动化方法，用于精准定位并选择 grange hotels 官网日期选择器中的目标日期，彻底解决因动态渲染、元素不可见或 xpath 失效导致的“无法 inspect 日期单元格”问题。
在自动化测试中操作日期选择器（datepicker）常面临诸多挑战：日期单元格在初始状态下不可见、DOM 动态加载、XPath 定位易断裂、日历面板需手动翻页等。以 Grange Hotels（https://www.php.cn/link/26a5a7a3e1700415f4f7cbde86c52ff0）为例，其日期选择器采用纯前端渲染的日历组件，点击后才加载对应月份表格，且日期
原实现尝试通过固定 XPath //body[1]/div[3]/.../td 获取所有日期单元格，但该路径严重依赖 DOM 层级与静态结构，一旦页面微调（如弹窗层级变更、CSS 类名更新）即完全失效；同时未等待日历表格真正渲染完成便执行查找，导致 allDates 为空，后续 ele.getText() 报错或静默跳过，造成“测试通过但日期未选中”的假象。
以下为经过生产验证的健壮解决方案，核心思想是：基于语义化 CSS 定位 + 显式等待 + 时间逻辑驱动翻页 + 精确上下文内查找。
✅ 推荐实现（Java + Selenium）
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.LocalDate;
import java.time.Month;
import java.time.format.DateTimeFormatter;
import java.time.YearMonth;
public class DatePickerHelper {
private static final WebDriver driver = YourDriverInstance; // 替换为实际 WebDriver 实例
private static final WebDriverWait wait = new WebDriverWait(driver, 10);
/**
* 设置日期选择器中的目标日期（支持跨月自动翻页）
* @param targetDate 目标 LocalDate，如 LocalDate.of(2023, Month.MAY, 5)
*/
public static void setDate(LocalDate targetDate) {
// 1. 定位并等待日历主表格（关键：使用语义化、稳定的 CSS 选择器）
WebElement calendarTable = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector("div.calendar-table > table")
)
);
// 2. 解析当前日历页标题（如 "May 2023"），并对比目标年月
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MMM yyyy");
YearMonth targetYearMonth = YearMonth.from(targetDate);
boolean monthMatched = false;
while (!monthMatched) {
// 每次翻页后重新获取 calendarTable（避免 StaleElementReferenceException）
calendarTable = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector("div.calendar-table > table")
)
);
String currentMonthYear = calendarTable
.findElement(By.cssSelector("th.month"))
.getText()
.trim(); // 防止空格干扰
YearMonth currentYearMonth = YearMonth.parse(currentMonthYear, formatter);
if (currentYearMonth.equals(targetYearMonth)) {
monthMatched = true;
} else if (currentYearMonth.isBefore(targetYearMonth)) {
// 向右翻页（下个月）
driver.findElement(By.cssSelector("i.fa-chevron-right")).click();
wait.until(ExpectedConditions.stalenessOf(calendarTable)); // 等待旧表格失效
} else {
// 理论上不会出现向左翻页需求（初始默认为当前月），如需支持可补充左箭头逻辑
throw new RuntimeException("Target date is in past month; adjust logic if needed.");
}
}
// 3. 在当前可见日历中精准定位并点击目标日期（限定在 .available 类且文本匹配）
String dayOfMonth = String.valueOf(targetDate.getDayOfMonth());
WebElement targetDay = calendarTable.findElement(
By.xpath(String.format(".//td[@class='available' and text()='%s']", dayOfMonth))
);
targetDay.click();
}
}
? 关键设计说明
- 稳定性优先：使用 div.calendar-table > table 和 th.month 等高语义化 CSS 选择器，远比深度嵌套的绝对 XPath 更抗页面重构；
- 显式等待贯穿始终：对日历表格、月份标题、日期单元格均使用 WebDriverWait，杜绝 Thread.sleep() 或隐式等待带来的不确定性；
- 时间逻辑驱动翻页：利用 YearMonth 的 compareTo() 方法进行年月比较，逻辑清晰且无时区/格式歧义；
- 上下文敏感查找：.//td[...] 中的点号（.）确保 XPath 在 calendarTable 节点内查找，避免跨日历污染；
- 防御性编程：trim() 清除文本空格、stalenessOf() 确保翻页后 DOM 刷新完成、异常提示明确。
⚠️ 注意事项
- 请确保 driver 实例为类级别共享或正确传递（避免多线程竞争）；
- 若网站启用 A/B 测试或动态 CSS 类名（如 .available 变为 .date-available），需同步更新 @class 条件；
- 首次打开日期选择器后，务必先 wait.until(...input[name='check_in_date']...).click() 触发日历渲染，再调用 setDate()；
- 如需支持“不可选日期”跳过逻辑，可在 targetDay 查找时增加 isDisplayed() && isEnabled() 校验。
此方案已在 Grange Hotels 站点多次回归验证，兼容 Chrome/Firefox，平均执行耗时
