How to Select Date From Datepicker in Selenium
1. 소개
이 튜토리얼에서는 Java와 Selenium WebDriver를 사용하여 날짜 선택기 컨트롤을 통해 날짜를 선택하는 간단한 예제를 살펴보겠습니다.
이번 테스트에서는 JUnit와 Selenium을 사용하여 https://demoqa.com/automation-practice-form 페이지를 열고 “생년월일” 필드를 위한 날짜 선택기 컨트롤을 사용하여 “2024년 12월 2일”을 선택할 것입니다.
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을 사용할 것이며, 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. 특정 날짜 선택하기
지금까지 날짜 선택기가 존재하는지 확인하는 테스트를 추가했습니다. 다음으로 특정 날짜를 선택하고자 합니다. 이는 실제 날짜 선택기 요소에 따라 여러 가지 상호 작용을 포함합니다.
2024년 12월 2일의 날짜를 선택하고 올바른 날짜가 선택되었는지 확인하는 테스트를 작성해보겠습니다. 이 테스트는 네 가지 단계로 이루어집니다:
- 날짜 선택기 입력 요소 클릭
- 2024년 선택
- 12월 선택
- 2일 선택
5.1. 입력 요소 클릭
먼저 날짜 제어를 나타내는 입력 요소를 클릭합니다:
driver.get(URL);
WebElement inputElement = driver.findElement(By.xpath(INPUT_XPATH));
inputElement.click();
5.2. 연도 선택
다음으로 연도를 위한 XPath를 정의합니다. 이 Xpath는 class 속성이 react-datepickerheader인 div 요소를 찾습니다. 이 div는 날짜 선택기 UI를 포함하고 있습니다. 그 안에서 우리는 class 속성이 react-datepickeryear-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);
마지막으로 실제 월을 선택합니다. 이 경우는 12월입니다:
// 월 선택
selectMonth.selectByVisibleText("December");
여기서 명시적 대기를 사용하여 날짜 선택기의 변경 사항에 대해 실행되는 JavaScript가 다음 클릭을 수행하기 전에 실행되도록 확인했습니다.
5.4. 일 선택
마지막으로, 관심 있는 특정 일을 선택할 준비가 되었습니다. 이번 경우, 우리는 12월 2일을 보고 있습니다. 날짜 선택기 사용자 인터페이스에는 동일한 날이 여러 개 있을 수 있다는 점에 유의해야 합니다.
대부분의 날짜 선택기 인터페이스는 이전 월의 마지막 몇 일 또는 다음 월의 첫 몇 일을 표시합니다. 따라서 특정 날을 선택하는 데 필요한 코드가 더 복잡해질 수 있습니다. 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 요소를 선택합니다. 그런 다음 aria-label이 December이고 텍스트 값이 2인지를 확인하는 추가 “and” 절을 선택자에 추가합니다. 이렇게 하면 정확히 하나의 일치하는 요소를 얻을 수 있습니다.
이제 날짜를 선택할 준비가 되었습니다:
// 일 선택
WebElement dayElement = driver.findElement(By.xpath(INPUT_DAY_XPATH));
wait.until(d -> dayElement.isDisplayed());
dayElement.click();
올바른 날짜를 선택했는지 확인하기 위해 테스트 케이스를 마무리해 보겠습니다:
// 선택된 날짜 값 확인
assertEquals("02 Dec 2024", inputElement.getAttribute("value"), "Wrong Date Selected");
6. 결론
이 기사에서는 Selenium을 사용하여 날짜 선택기 요소로 날짜 값을 선택하는 방법을 배웠습니다. 날짜 선택기 요소는 표준화된 입력 요소가 아닐 수 있으며 값 선택 방법이 복잡하고 맞춤형일 수 있다는 점에 유의하십시오.
일반적인 흐름은 날짜 선택 입력을 식별하기 위해 여러 선택기를 사용한 다음, 연도, 월 및 일 순서대로 선택하는 것입니다. 일반적으로, 날짜를 선택한 후 전체 선택된 날짜 값을 날짜 입력 요소에서 사용할 수 있으며, 추가 코드 로직이나 테스트에 사용할 수 있습니다.
항상 그렇듯이, 이 기사의 소스는 GitHub에서 확인할 수 있습니다.
