Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Automate Telerik Kendo Grid With WebDriver and JavaScript

DZone's Guide to

Automate Telerik Kendo Grid With WebDriver and JavaScript

I am going to show you how to automate Telerik Kendo Grid control using Selenium WebDriver and the JavaScript API.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Have you had a problem trying to automate custom-tuned web controls? Your team has probably purchased these from some dedicated UI controls vendor. There are a lot of them on the market. I am working at Telerik, one of the leading providers of UI controls. My team develops the backend systems of our company and for the UI parts we are using the Telerik’s controls. As you can guess, I needed to automate most of these custom controls. The approach that I am going to share with you in this article applies to all tuned controls no matter the vendor. Here, I am going to show you how to automate Telerik Kendo Grid control.

Automate Telerik Kendo Grid

To automate these controls I used Selenium WebDriver and the JavaScript API, provided by the controls' vendor. Most of the web controls on the market expose their UI JavaScript API. Another approach is to try to automate them through the regular WebDriver functions, but usually this never works because these type of controls depend heavily on JavaScript.

Automation Use Case

In the examples, I am going to automate the Telerik Kendo Grid control.

Telerik Kendo Grid

Automate Telerik Kendo Grid


Create Kendo Grid Element

First, you need to find the JavaScript API documentation of the control you are trying to automate. You can find the documentation for the Telerik Kendo Grid on the following URL.

Next, you need to test some of the methods through the browsers’ JavaScript Console.

Open the Kendo Grid’s demo in Chrome and open developers tools. Open the Console.

Kendo Grid Demo Chrome JavaScript ConsoleTest all API’s methods that you are going to use in the automation process. The next step is to wrap all of them in C# code.

Here is the skeleton of the Kendo Grid Element.

View the code on Gist.

All operations are executed through the JavaScript executor of WebDriver, because the first parameter of the new element is the WebDriver’s instance. It is cast in the constructor to IJavaScriptExecutor. The second parameter is the wrapper DIV element of the grid. We pass it to the constructor only to get its ID.

Kendo Grid Div

With the following JS code, we can get an instance of Kendo Grid. View the code on Gist.

This code is wrapped in the GetGridReference method. It is later called before any other API’s methods. View the code on Gist.

The above JS code is used to navigate to a particular grid page. It is wrapped in the NavigateToPage method.

Add More Methods to Kendo Grid Element

This is the skeleton of the Kendo Grid element. You can add as many methods as you need. Below I am going to show you the most interesting ones and their usage in tests.

Sort

View the code on Gist.

Just pass the name of the column that you want to sort and choose between Asc and Descsorting.

Change Page Size

View the code on Gist.

You can show more items in the grid by just passing the new number as a parameter.

GetItems

One of the most unusual methods is GetItems. The JavaScript method returns a JSON representation of the data items in the grid. After that, we deserialize it to a list of C# objects. Next, you can perform different actions and validations on them.

View the code on Gist.

Something specific to the WebDriver’s IJavaScriptExecutor is that to get the JS method’s response you need to add the return keyword (in other automation frameworks this is working out of the box). Secondly in order the result to be formatted as JSON you need to use the JavaScript’s method JSON.stringify.

To deserialize the JSON to C#, I installed the Newtonsoft.Json NuGet that provides the JsonConvert.DeserializeObject method.

Filter

View the code on Gist.

Another interesting and a little bit complicated logic is the filtering. There are two overloads of the Filter C# wrapper. The first applies a single filter. The second one can be used to apply multiple ones. If dates need to be filtered the code creates new JS date objects otherwise the JS’s filter function won’t work. You can use the FilterOperator enum to choose the filter type. Later it is converted to the API’s version.

View the code on Gist.

Kendo Grid Element Full Source Code

View the code on Gist.

Kendo Grid Element’s Usage in Tests

View the code on Gist.

Above you can find sample test usages of the most compelling Kendo Grid Element’s methods.

So Far in the "WebDriver" Series

1. Getting Started with WebDriver C# in 10 Minutes 

2. Most Underrated WebDriver Locator – XPath 

3. WebDriver Selenium Tor Integration C# Code 

4. Test URL Redirects with WebDriver and HttpWebRequest 

5. Microsoft Edge WebDriver- What Everybody Ought to Know About 

6. Speed up Selenium Tests through RAM Facts and Myths 

7. Automate Telerik Kendo Grid with WebDriver and JavaScript

If you enjoy my publications, feel free to SUBSCRIBE Also, hit these share buttons. Thank you!

The post Automate Telerik Kendo Grid with WebDriver and JavaScript appeared first on Automate The Planet.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
javascript ,webdriver ,web dev

Published at DZone with permission of Anton Angelov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}