Once upon a time, I showed you how you can automate complex custom-tuned controls like a grid. You can read about it in my article Automate Telerik Kendo Grid with WebDriver and JavaScript. However, this is just the beginning. The hardest part is figuring out how to design proper automated tests for every grid's column. It is even more challenging if you want your tests to be able to run against an empty DB. In this publication, I am going to share my opinion about writing decent grid control's automated tests. In the first part of this mini-series, I am going to talk about how to automate ID and text columns.

Examples Explained

In the code examples, I am going to automate one of the demos of the Kendo Grid Control. To be able to create a proper automation of controls like this, you need an API that enables you to perform basic CRUD operations against the DB (table) that the grid gets its data. For simplicity, I am going to use dummy wrapper methods in the examples. In a real-world project, you will need to replace the dummy code with a DB repository or a web-service to be able to get/insert/update/delete entities.

As you will notice in the examples, I will use the so-called KendoGrid element and all of its methods. I suggest you to read all about it in my article- Automate Telerik Kendo Grid with WebDriver and JavaScript. Additionally, to be able the tests to run properly, we will need a couple of additional methods.

Until is a utility method that accepts a condition as C# Func that returns a bool. It will wait a specified amount of time and will try again after a couple of milliseconds (also configurable). We are going to use the WaitForGridToLoad function after a JavaScript filter is applied. It will wait for a specific amount of items to be present on the grid. The another method WaitForGridToLoadAtLeast does almost the same thing, except the number of loaded items can be greater than the specified one.

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.

Design Tests- Unique Identifier 'ID' Column

There are six filters that need to be automated- EqualTo, NotEqualTo, GreaterThan, GreaterThanOrEqualTo, LessThan and LessThanOrEqualTo. Also, an additional test should be added to verify that the clear filter functionality is working as expected.

Order ID EqualTo Filter

First, we create a new item in the DB. As the order ID is unique, we can filter directly on it, and we expect that only one object should be displayed. After the filtration, we wait for the grid to load a single item, get all the elements and assert that only one item is present.

Order ID NotEqualTo Filter

This test has a little bit trickier arrange phase. We create two new items. We assign them a unique shipping name that is the same for both. Then we apply two filters, one by the shipping name, this way only these two items should be displayed. After that, we filter by NotEqualTo OrderId. Only the first item should be shown on the grid.

Order ID GreaterThanOrEqualTo Filter

Again we create two items with an identical shipping name. Usually, the unique identifiers are incremental, meaning that the new IDs will be bigger than the previous ones. So we apply two filters again. Filtering by shipping name displayes only the two items. After that, we apply the GreaterThanOrEqualTo filter by OrderId. We assume that nothing will change, and these two elements will be still visible in the grid.

Order ID GreaterThan Filter

Almost identical to the previous example, except in the end we verify that a single item is present in the grid, the one with the bigger ID.

Order ID LessThanOrEqualTo Filter

It is almost the same as the test for the GreaterThanOrEqualTo filter, except this time we filter by the OrderId of the second item which is bigger. In the end, two items should be displayed in the grid.

Order ID LessThan Filter

The difference is that we change the type of the filter, and only a single element should be visible on the grid.

Order ID Clear Filter

The first part of the test is identical to the one for the EqualTo filter. After a single item is displayed, we remove all filters and expect that more items should be shown. As the test should be capable of being run against an empty DB, we create a second object before hand.

Design Tests- Shipping Name 'Text' Column There are six filters that need to be automated- EqualTo, NotEqualTo, Contains, NotContains, StartsWith and EndsWith. Also, an additional test should be added to verify that the clear filter functionality is working as expected. Shipping Name EqualTo Filter

Create a new item with a unique shipping name. After we filter by it, only a single element should be displayed.

Shipping Name NotEqualTo Filter

We apply two filters. The first filter by ID should leave only the newly created item. We expect that the second filter by NotEqualTo shipping name should empty the grid.

Shipping Name Contains Filter

We trim the start and the end of the unique shipping name, this way if a single element is visible after the filter, means that the filter works correctly.

Shipping Name NotContains Filter

It is identical to the test for the EqualTo filter, except we trim the start and the end of the shipping name.

Shipping Name StartsWith Filter

To be sure that the filter is different from the Contains filter, we trim the end of the shipping name. Shipping Name EndsWith Filter

To be sure that the filter is different from the Contains filter, we trim the start of the shipping name.

Shipping Name Clear Filter