Automating Telerik (kendo) Date picker with selenium

Here the DatePicker combines the Kendo UI Date Input and Calendar components to enable the user to pick a date from the calendar shown in UI.

Kendo Date picker can be of different types, CSS selector in selenium is the most apt to way to enter values to a kendo-dateinput.

If we try to enter the value to the Kendo inputbox directly using XPath , we may get the below error.

OpenQA.Selenium.ElementNotInteractableException: element not interactable

In this case, the only option in front of us is to do clicks on elements inside the calendar one by one.

But this becomes if the page is scrollable and there are no clickable buttons.

We can below code to automate these by applying some conditions in these clicks using CSS selector.

How to find CSS value of a Kendo Widget button

Some of the properties of the date picker we used are

No forward or backward button
Fully scrollable UI
Years are separated by 10 Years
Days before the current date are disabled to select

We can reuse the code given by making some minor changes to adapt every model of Kendo calendars.

The basic method will look like this.

We can start by opening the calendar by clicking the icon and then the below code will take care of the date selection.

/// <summary>
/// Method to select date from Kendo date picker
/// </summary>
/// <param name="expDate"> Format : Date-Month-Year</param>
public void selectKendoDate(string expDate)
{
	//splitting date
	String[] Date = expDate.Split('-');
	String expDay = null;
	if (Date[0].Substring(0,1)=="0")
	{
		expDay = Date[0].Replace("0", "");
	}
	else
	{
		expDay = Date[0];
	}
	String expMonth = Date[1];
	String expYear = Date[2];

	clickCalendarYear(expYear);
	clickCalendarMonth(expMonth);
	clickCalendarDate(expDay);
}

Method to select Year

public void clickCalendarYear(string yearToClick)
{
	//Navigate upto decade selection screen
	driver.FindElement(By.CssSelector("css=span.k-button.k-title.k-calendar-title")).Click();
	waitImplicit(3000);
	driver.FindElement(By.CssSelector("css=span.k-button.k-title.k-calendar-title")).Click();
	waitImplicit(3000);
	driver.FindElement(By.CssSelector("css=span.k-button.k-title.k-calendar-title")).Click();


	//select the decade
	projectBase.webelementActions.waitImplicit(3000);
	driver.FindElements(By.CssSelector("css=span.k-link"));
	IList<IWebElement> calendarLinks = driver.FindElements(By.CssSelector("css=span.k-link"));
	foreach (IWebElement dates in calendarLinks)
	{
		if ((Convert.ToInt32(dates.Text)- Convert.ToInt32(yearToClick))>=-9)
		{
			dates.Click();
			break;
		}

	}
	
	//Provide enough wait for angular component to load
	waitImplicit(3000);

	//select the year
	calendarLinks = driver.FindElements(By.CssSelector("css=span.k-link"));
	foreach (IWebElement dates in calendarLinks)
	{ 
		if (Convert.ToInt32(dates.Text) == Convert.ToInt32(yearToClick))
		{
			dates.Click();
			break;
		}

	}

}

Method to Select Month

public void clickCalendarMonth(string expMonth)
{

	List<String> months = new List<string>();
	string[] monthsList = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
	months.AddRange(monthsList);

	waitImplicit(3000);

	//select the month
	IList<IWebElement> calendarLinks = driver.FindElements(By.CssSelector("css=span.k-link"));
	foreach (IWebElement monthsName in calendarLinks)
	{
		Console.Out.WriteLine(monthsName.Text);
		if (monthsName.Text == months[Convert.ToInt32(expMonth) - 1])
		{
			monthsName.Click();
			break;
		}

	}

}

Method to Select Date

public void clickCalendarDate(string expDate)
{
	projectBase.webelementActions.waitImplicit(3000);

	//select the date
	IList<IWebElement> calendarLinks = driver.FindElements(By.CssSelector("css=span.k-link"));
	foreach (IWebElement dates in calendarLinks)
	{
		Console.Out.WriteLine(dates.Text);
		if (dates.Text == expDate)
		{
			dates.Click();
			break;
		}

	}
}

Here we have used the method of getting all the child elements of a particular CSS selector, then use the list to match with the text to find the exact element we need.

This method is used since we are not able to use text along with the CSS selector.

In some cases, innertext of each element also will work while working with Kendo date picker/calendar.

March 4, 2021

Automating Telerik (kendo) Date picker with selenium

Method to select Year

Method to Select Month

Method to Select Date

No comments:

Post a Comment

Verify Zip file contents without extracting using C# + Selenium