[셀레니움/Selenium, C#] 달력(Date Picker) 날짜 선택하기(예제 포함)

셀레니움에 관한 전반적인 내용은 아래 링크를 참고해주세요.

[셀레니움/Selenium, C#] C#에서 셀레니움을 사용하는 방법 총정리

[셀레니움/Selenium, C#] C#에서 셀레니움을 사용하는 방법 총정리

소개

본 포스팅에서는 웹 페이지의 달력(Date Picker) 요소를 찾아 특정 날짜를 선택하는 방법을 소개합니다.

달력(Date Picker) 동작 이해하기

달력 UI 컴포넌트는 여러 종류가 있습니다. 그 중 날짜를 마우스로 클릭하는 Date Picker 타입으로 분석을 하겠습니다.

Date Picker 달력 선택

본문의 예제는 Date Picker를 제공하는 jQuery UI 사이트에서 진행하겠습니다.
링크: https://jqueryui.com/datepicker/

jQuery UI의 Date Picker 예시

이 달력은 텍스트 박스를 클릭해야 달력이 표시되고, 날짜를 선택하면 입력이 됩니다.

Date Picker 동작

개발자 도구로 달력(Date Picker) 분석하기

먼저, 달력을 표시하기 위해 텍스트 박스의 요소부터 확인합니다.

달력을 생성하기 위한 텍스트 박스 요소 찾기

텍스트 박스를 입력하면 달력이 표시됩니다. 마찬가지로 달력의 요소를 확인합니다.

달력의 요소 찾기

달력에는 왼쪽, 오른쪽 화살표 버튼과 날짜 선택이 가능한 테이블이 존재합니다. 즉, 두 개의 버튼 요소와 클릭 가능한 테이블 요소가 있다는 의미입니다.

따라 하기

주의

 

 

해당 사이트의 텍스트 박스 및 달력은 iFrame에 존재합니다. 따라서 iFrame 전환 후 요소에 접근해야 에러가 발생하지 않습니다. 자세한 내용은 예제 코드를 참고하세요.

텍스트 박스의 XPath는 다음과 같습니다.

//*[@id="datepicker"]

텍스트 박스를 클릭하는 방법은 다음과 같습니다.

var textBox = _driver.FindElementByXPath("//*[@id='datepicker']");
textBox.Click();

그리고 달력과 왼쪽, 오른쪽 화살표 버튼의 XPath는 다음과 같습니다.

//*[@id="ui-datepicker-div"]
//*[@id="ui-datepicker-div"]/div/a[1]
//*[@id="ui-datepicker-div"]/div/a[2]

달력 요소를 찾고 버튼을 클릭하는 방법은 다음과 같습니다.

//지난 달 이동하기.
var leftButton = _driver.FindElementByXPath("//*[@id='ui-datepicker-div']/div/a[1]");
leftButton.Click();

//다음 달 이동하기.
var rightButton = _driver.FindElementByXPath("//*[@id='ui-datepicker-div']/div/a[2]");
rightButton.Click();

//a Tag로 버튼 접근하기.
var buttons = datePicker.FindElements(By.TagName("a"));
buttons[0].Click();
buttons[1].Click();

이런 방법도 있고, 달력에서 a Tag를 찾아서 클릭하는 방법도 있습니다. 구현하기 나름입니다.

다음은 날짜를 선택하는 방법입니다. 날짜는 테이블로 구성되어있고, 이전 포스팅에서 설명한 테이블 요소 접근 방법과 동일합니다.

[셀레니움/Selenium, C#] 테이블의 셀 데이터 취득하기 (예제 포함)

[셀레니움/Selenium, C#] 테이블의 셀 데이터 취득하기 (예제 포함)

var table = datePicker.FindElement(By.TagName("table"));
var tbody = table.FindElement(By.TagName("tbody"));
var trs = tbody.FindElements(By.TagName("tr"));
foreach(IWebElement tr in trs)
{
	var tds = tr.FindElements(By.TagName("td"));
	foreach(var td in tds)
	{
		//날짜 비교 후 클릭.
		if (td.Text == "3")
		{
			td.Click();
		}
	}
}

위 코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다.

예제 코드 실행 결과

마찬가지로 예제 코드를 첨부했습니다. 참고로 업로드 용량 문제로 패키지 파일은 제거했습니다. Selenium을 사용하기 위한 패키지를 설치한 후 동작해보세요.

ExamSelenium.zip

0.01MB