How to find CSS value of Kendo date picker elements ( Selenium + .Net )

 Kendo UI is a framework provided by Telerik which provides interactive controls in websites.

If you are trying to automate any of the Kendo widgets, it will be difficult to find controls since it uses jQuery.

So we may have to find controls of those elements in an unconventional way.

Usually, we use XPath to find elements and do actions. In kendo, since this is an angular widget we may not be able to find the XPath.

So the solution to find controls is to use a CSS selector in selenium.

Kendo Date picker comes in different types. Let's consider one example and check how we can automate that to use our string input to select the Date, Month, and Year.

For this example, we are selecting a date picker is below.

This is a completely scrollable date picker, where we can navigate to our needed date just by scrolling between Year and Months.

Clicking on Year Label on top will give you a decade-wise view then clicking on year will give you the month view.

The easy way to use this date picker will be to click on TODAY button, then it will select today's date in the input.

But the TODAY button will not have any XPath, so we need to follow the below steps.

• Open the calendar by clicking the calendar icon (You can use the Xpath)
• Then use the CSS selector to click on the TODAY button

How can you find the CSS value of the button using chrome browser?

driver.FindElement(By.CssSelector("span.k-today"));

public void clickCalendarDate(string expDate)
{
	waitImplicit(3000);

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

	}
}

Complete code is available in the below link.
Kendo Date picker automation code sample