March 4, 2021

How to find CSS value of Kendo date picker elements

  March 4, 2021

 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?

  • Navigate to webpage > Right-click anywhere > Inspect
  • Inspect window will be shown
  • Now open the calendar and Right-click and select Inspect again

  • Check the bottom of the inspect screen to find the CSS of the selected element.


  • Now we can use the CSS Selector as below to click on any element

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

If there is an element with specific text that is needed to be clicked, we may have to use the FindElements option in selenium to find child elements, and then we can loop through all the elements to match the text we needed.

If the text matches our criteria we can interact with the Kendo UI widget.

Since we are dealing with an Angular UI, make sure that you are providing enough delay between each action.

Code to find each matching child element and click after text comparison is given below.

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

logoblog

Thanks for reading How to find CSS value of Kendo date picker elements

Previous
« Prev Post

No comments:

Post a Comment

Fixing javascript error: Cannot read properties of null (reading 'querySelector') issue when using CSS identifier in selenium

 JavaScript is another way to interact with web elements when normal selenium methods fail to act. But one issue with javascript is, it does...