使用Selenium在日期选择器中选择日期 | Baeldung

1. 引言

本文将介绍一个简单示例：使用Java的Selenium WebDriver操作日期选择器控件选择日期。

测试场景：使用JUnit和Selenium打开页面https://demoqa.com/automation-practice-form，通过日期选择器为"出生日期"字段选择"2 Dec 2024"。

2. 依赖配置

首先在pom.xml中添加selenium-java和webdrivermanager依赖：

<dependency> 
    <groupId>org.seleniumhq.selenium</groupId> 
    <artifactId>selenium-java</artifactId>
    <version>4.18.1</version>
</dependency>
<dependency>
    <groupId>io.github.bonigarcia</groupId>
    <artifactId>webdrivermanager</artifactId>
    <version>5.7.0</version>
</dependency>

这些依赖支持Java调用浏览器并执行操作。此外需要JUnit创建测试用例：

<dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter-engine</artifactId>
    <version>5.9.2</version>
    <scope>test</scope>
</dependency>

添加依赖后即可开始编写测试。

3. 环境配置

接下来配置WebDriver。以Chrome为例，使用WebDriverManager自动管理驱动：

@BeforeEach
public void setUp() {
    WebDriverManager.chromedriver().setup();
    driver = new ChromeDriver();
}

通过*@BeforeEach*注解方法执行测试前初始化。关键点：使用WebDriverManager自动处理驱动下载，无需手动安装。

测试结束后关闭浏览器窗口。在*@AfterEach方法中调用driver.close()*确保即使测试失败也能执行：

@AfterEach
public void cleanUp() {
    driver.close();
}

4. 定位日期选择器元素

基础配置完成后，开始日期选择器测试。Selenium提供多种元素定位方式（如ID、CSS选择器、Xpath），但日期选择器通常比普通输入元素更复杂。

4.1 理解日期选择器

日期选择器往往比标准输入元素复杂。虽然HTML5提供了日期输入类型，但多数网站并未采用标准实现。

原因在于：日期选择器需要高度定制化（如品牌配色），通常依赖自定义HTML/CSS/JavaScript实现。点击主控件后，会弹出包含年/月/日选择的子控件。因此需要分别定位年、月、日元素的XPath。

先声明测试目标URL：

private static final String URL = "https://demoqa.com/automation-practice-form";

4.2 定位日期控件

与日期选择器的交互始于点击主控件（通常是按钮或输入框）。本例中为text类型的输入元素。

XPath表达式定位id为dateOfBirthInput的输入元素：

private static final String INPUT_XPATH = "//input[@id='dateOfBirthInput']";
private static final String INPUT_TYPE = "text";

编写简单测试验证控件存在性：

@Test
public void givenDemoQAPage_whenFoundDateInput_thenHasAttributeType() {
    driver.get(URL);
    WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
    assertEquals(INPUT_TYPE, inputElement.getAttribute("type"));
}

5. 选择特定日期

完成基础验证后，实现选择特定日期（2 Dec 2024）的功能。操作步骤因日期选择器实现而异，通常包含四步：

点击日期输入框
选择年份2024
选择月份December
选择日期2

5.1 点击输入框

首先点击代表日期控件的输入元素：

driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
inputElement.click();

5.2 选择年份

定义年份选择器的XPath：定位class为react-datepicker__header的div（日期选择器容器），再从中找到class为react-datepicker__year-select的select元素：

private static final String INPUT_YEAR_XPATH = "//div[@class='react-datepicker__header']" 
  + "//select[@class='react-datepicker__year-select']";

添加显式等待确保JavaScript渲染完成：

Wait<WebDriver> wait = new FluentWait(driver);
WebElement yearElement = driver.findElement(By.xpath(INPUT_YEAR_XPATH)); 
wait.until(d -> yearElement.isDisplayed());

等待控件显示后，从下拉框选择年份2024：

// 选择年份
Select selectYear = new Select(yearElement);
selectYear.selectByVisibleText("2024");

5.3 选择月份

定义月份选择器的XPath：定位class为react-datepicker__month-select的select元素：

private static final String INPUT_MONTH_XPATH = "//div[@class='react-datepicker__header']"
  + "//select[@class='react-datepicker__month-select']";

使用相同方式选择月份：

WebElement monthElement = driver.findElement(By.xpath(INPUT_MONTH_XPATH)); 
wait.until(d -> monthElement.isDisplayed()); 
Select selectMonth = new Select(monthElement);

选择目标月份December：

// 选择月份
selectMonth.selectByVisibleText("December");

⚠️ 显式等待确保JavaScript操作完成后再执行后续步骤。

5.4 选择日期

最后选择具体日期（12月2日）。注意：日期选择器界面可能存在多个相同日期值（如显示上月末/下月初的日期）。

编写精确的XPath表达式：

通过class包含react-datepicker__day定位所有日期元素
附加aria-label包含December的过滤条件
最终匹配文本值为2的元素

private static final String INPUT_DAY_XPATH = "//div[contains(@class,\"react-datepicker__day\") and " 
  + "contains(@aria-label,\"December\") and text()=\"2\"]";

执行日期选择：

// 选择日期
WebElement dayElement = driver.findElement(By.xpath(INPUT_DAY_XPATH));
wait.until(d -> dayElement.isDisplayed());
dayElement.click();

添加断言验证日期选择结果：

// 检查选中日期值
assertEquals("02 Dec 2024", inputElement.getAttribute("value"), "日期选择错误");

6. 总结

本文展示了使用Selenium操作日期选择器选择日期的方法。关键点：日期选择器通常是非标准控件，选择逻辑需要定制化处理。

通用操作流程：

定位日期输入框并点击
按序选择年/月/日
验证输入框中的完整日期值

✅ 日期选择后，输入框会自动填充完整日期格式，可用于后续业务逻辑或测试验证。

Persistence

REST

Security