Have you had this problem to try to automate custom-tuned web controls? Probably, your team has purchased these from some dedicated UI controls vendor. There are a lot of them on the market. 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 Custom-Tuned Web Controls WebDriver + JavaScript

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.

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.

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.

Test 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.

All operations are executed through the JavaScript executor of WebDriver, because of that 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.

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

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

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

While ago when we were working on the first version of the BELLATRIX test automation framework, I did this research while I was working on a similar feature for our solution.

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

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

Change Page Size

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.

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

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.

Kendo Grid Element Full Source Code

Kendo Grid Element’s Usage in Tests

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