如何在 Selenium 中從 Datepicker 選擇日期
1. 簡介
在本教程中，我們將查看一個使用 Java 的 Selenium WebDriver 透過日期選擇器控制項選擇日期的簡單範例。
對於此測試，我們將使用 JUnit 和 Selenium 開啟頁面https://demoqa.com/automation-practice-form並使用日期選擇器控制項在「 Date of Birth 」欄位中選擇「 2 Dec 2024 」。
2.依賴項
首先，我們需要將selenium-java和webdrivermanager依賴項加入我們的pom.xml檔中：
<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，並首先下載其最新版本：
@BeforeEach
public void setUp() {
WebDriverManager.chromedriver().setup();
driver = new ChromeDriver();
}我們使用帶有@BeforeEach註釋的方法在每次測試之前進行初始設定。接下來，我們使用WebDriverManager來取得 Chrome 驅動程序，而無需明確下載並安裝它。
當測試完成後，我們將關閉瀏覽器視窗。我們將在@AfterEach方法中呼叫driver.close()確保即使測試失敗它也會執行：
@AfterEach
public void cleanUp() {
driver.close();
}4. 尋找日期選擇器元素
現在基本配置已經完成，我們可以開始日期選擇器測試了。有幾種方法可以幫助 Selenium 選擇元素，例如使用ID、CSS 選擇器或 Xpath。但是，日期選擇器可能與常規輸入元素不同。
4.1.了解日期選擇器
日期選擇器通常比其他輸入元素更複雜。雖然有**日期**輸入**類型**，但許多網站並不使用標準輸入類型。
原因是，與其他輸入類型不同，日期選擇器可以具有不同的美感，並且通常，實現涉及後台的專門的 HTML、CSS 和 JavaScript 程式碼來自訂日期選擇器，例如添加品牌顏色。
一旦點擊主日期控制元素，就會顯示另一組控件，提供選擇特定年份、月份和日期的機會。因此，我們需要識別年份、月份和日期輸入元素的 XPath。
首先聲明一下我們將要造訪的網站：
private static final String URL = "https://demoqa.com/automation-practice-form";
4.2.尋找日期控件
首先，我們與日期選擇器控制項的互動涉及選擇控制項以開啟日期選擇器。這通常是一個按鈕或一個輸入元素。對於我們的例子，它是text類型的輸入元素。
此處的 Xpath 表達式尋找具有id屬性且值為dateOfBirthInput的input元素：
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
- 選月 十二月
- 選擇日期值 2
5.1.點選輸入元素
首先，讓我們點擊代表日期控制項的輸入元素：
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
inputElement.click();
5.2.選擇年份
接下來，我們將定義年份的 XPath。此 Xpath 尋找具有class屬性值react-datepicker__header的div元素。此div包含日期選擇器 UI。其中，我們對具有react-datepicker__year-select class屬性的select元素感興趣：
private static final String INPUT_YEAR_XPATH = "//div[@class='react-datepicker__header']"
+ "//select[@class='react-datepicker__year-select']";然後，我們添加一個明確的等待以允許 JavaScript 在點擊後運行並顯示 Datepicker：
Wait<WebDriver> wait = new FluentWait(driver);
WebElement yearElement = driver.findElement(By.xpath(INPUT_YEAR_XPATH));
wait.until(d -> yearElement.isDisplayed());等待實際的日期選擇器控制顯示後，我們從下拉式選單中選擇2024年：
// Select Year
Select selectYear = new Select(yearElement);
selectYear.selectByVisibleText("2024");5.3.選擇月份
接下來，我們需要選擇月份。因此，讓我們建立對應的Xpath。這次，我們的 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 ：
// Select Month
selectMonth.selectByVisibleText("December");
我們在這裡使用了明確等待，以確保在執行下一次點擊之前，對日期選擇器進行更改時運行的任何 JavaScript。
5.4.選擇日期
最後，我們準備挑選我們感興趣的特定日子。在這種情況下，我們尋找的是十二月的第二天。這裡要注意的是，日期選擇器使用者介面中同一天可能有多個值。
通常，日期選擇器介面也會顯示上個月的最後幾天或下個月的頭幾天。因此，選擇特定日期所需的代碼可能會變得更加複雜。讓我們來寫 XPath 表達式：
private static final String INPUT_DAY_XPATH = "//div[contains(@class,\"react-datepicker__day\") and "
+ "contains(@aria-label,\"December\") and text()=\"2\"]";在這個表達式中，我們使用class “react-datepicker__day”來選擇代表月份天數的所有div元素。然後，我們在選擇器中加入額外的「 and”子句來檢查aria-label是否為December ，最後檢查文字值是否為2. 。
現在，我們可以選擇日期了：
// Select Day
WebElement dayElement = driver.findElement(By.xpath(INPUT_DAY_XPATH));
wait.until(d -> dayElement.isDisplayed());
dayElement.click();
讓我們用斷言來完成我們的測試案例來檢查我們是否選擇了正確的日期：
// Check selected date value
assertEquals("02 Dec 2024", inputElement.getAttribute("value"), "Wrong Date Selected");
6. 結論
在本文中，我們學習如何使用 Selenium 透過日期選擇器元素選擇日期值。請注意，日期選擇器元素可能不是標準化的輸入元素，並且選擇值的方法可能很複雜且是客製化的。
一般流程使用多個選擇器來識別日期選擇器輸入，然後依序選擇年、月、日。通常，我們希望在選擇日期後，完整的選定日期值可在日期輸入元素中獲取，並可用於進一步的程式碼邏輯或測試。
與往常一樣，本文的源代碼可在 GitHub 上找到。