Design Grid Control Automated Tests Part 2

Anton Angelov

4.80/5 (2 votes)

24 Mar 2016Ms-PL5 min read

9.4K

Detailed explanation how to design proper automated tests for grid controls. Includes examples for unique identifier and text columns.

Download full source code

Introduction

In my previous article Design Grid Control Automated Tests Part 1 I started this mini-series about writing decent grid control's automated tests. In this second part, I am going to talk about how to automate floating-point and date columns.

Design Grid Control's Tests- Floating-point 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.

private int GetUniqueNumberValue()
{
    var currentTime = DateTime.Now;
    int result = 
    currentTime.Year + 
    currentTime.Month + 
    currentTime.Hour + 
    currentTime.Minute + 
    currentTime.Second + 
    currentTime.Millisecond;
    return result;
}

Freight EqualTo Filter

[TestMethod]
public void FreightEqualToFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = this.GetUniqueNumberValue();
    this.UpdateItemInDb(newItem);
            
    kendoGrid.Filter(
        FreightColumnName, 
        Enums.FilterOperator.EqualTo,
        newItem.Freight.ToString());
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
            
    Assert.IsTrue(results.Count() == 1);
    Assert.AreEqual(newItem.Freight.ToString(), results[0].Freight);
}

First, we create a new item in the DB. After that, we assign to the freight a new unique value. We can filter directly on it, and we expect that only one entity 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.

Freight NotEqualTo Filter

[TestMethod]
public void FreightNotEqualToFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = this.GetUniqueNumberValue();
    this.UpdateItemInDb(newItem);
            
    kendoGrid.Filter(
        new GridFilter(
        FreightColumnName, 
        Enums.FilterOperator.NotEqualTo, 
        newItem.Freight.ToString()),
        new GridFilter(
        OrderIdColumnName, 
        Enums.FilterOperator.EqualTo, 
        newItem.OrderId.ToString()));
    this.WaitForGridToLoad(0, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
        
    Assert.IsTrue(results.Count() == 0);
}

The arrange phase is identical. However, the additional thing that we do is to filter by the order id. This way, only the arrange order should be visible after the first filter. After that, we apply the NotEqualTo filter and assert that no elements are visible in the grid.

Freight GreaterThanOrEqualTo Filter

[TestMethod]
public void FreightGreaterThanOrEqualToFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.Freight);
    var biggestFreight = allItems.Last().Freight;
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = biggestFreight + this.GetUniqueNumberValue();
    this.UpdateItemInDb(newItem);
            
    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.Freight = newItem.Freight + 1;
    this.UpdateItemInDb(secondNewItem);
            
    kendoGrid.Filter(
    FreightColumnName, 
    Enums.FilterOperator.GreaterThanOrEqualTo, 
    newItem.Freight.ToString());
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 2);
            
    Assert.AreEqual(1, results.Count(x => x.Freight == secondNewItem.Freight));
    Assert.AreEqual(1, results.Count(x => x.Freight == newItem.Freight));
}

The arrange phase for this test is a little bit trickier. First, we get the biggest freight amount from the DB. Then create two new items. We make sure that we update the freight amount of the first element with a greater value than the currently largest freight. The second item's freight value is bigger than the second item's one. This way we have two unique numbers located at the end of the array of all freights' values. When we filter by the first item's freight amount, we expect that only our two new entities should be visible on the grid. If we want to extend the idea even further, we can create a new third entity and assert that it is not displayed.

Freight GreaterThan Filter

[TestMethod]
public void FreightGreaterThanFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.Freight);
    var biggestFreight = allItems.Last().Freight;
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = biggestFreight + this.GetUniqueNumberValue();
    this.UpdateItemInDb(newItem);
            
    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.Freight = newItem.Freight + 1;
    this.UpdateItemInDb(secondNewItem);
            
    kendoGrid.Filter(
    FreightColumnName,
    Enums.FilterOperator.GreaterThan, 
    newItem.Freight.ToString());
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 1);
            
    Assert.AreEqual(1, results.Count(x => x.Freight == secondNewItem.Freight));
}

The only difference with the previous example is the type of the applied filter. When we apply the GreaterThan filter, we assert that only the second item is visible on the grid.

Freight LessThanOrEqualTo Filter

[TestMethod]
public void FreightLessThanOrEqualToFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.Freight);
    var smallestFreight = allItems.First().Freight;
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = Math.Round(
    smallestFreight - this.GetUniqueNumberValue(), 
    3, 
    MidpointRounding.AwayFromZero);
    this.UpdateItemInDb(newItem);
            
    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.Freight = Math.Round(
    (newItem.Freight - 0.01), 
    3, 
    MidpointRounding.AwayFromZero);
    this.UpdateItemInDb(secondNewItem);
            
    kendoGrid.Filter(
    FreightColumnName, 
    Enums.FilterOperator.LessThanOrEqualTo, 
    newItem.Freight.ToString());
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 2);
            
    Assert.AreEqual(1, results.Count(x => x.Freight == secondNewItem.Freight));
    Assert.AreEqual(1, results.Count(x => x.Freight == newItem.Freight));
}

The arrange phase for this test is similar to the ones for the GreaterThan filter. We create two new items. Then get the smallest freight amount from the DB. We assign an even smaller new unique number to the first item's freight. Using it, we initialize the second item's freight with a lower value. When we apply the filter, we assert that only these two elements are displayed.

Freight LessThan Filter

[TestMethod]
public void FreightLessThanFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.Freight);
    var smallestFreight = allItems.First().Freight;
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = Math.Round(
    smallestFreight - this.GetUniqueNumberValue(),
    3, 
    MidpointRounding.AwayFromZero);
    this.UpdateItemInDb(newItem);
            
    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.Freight = Math.Round(
    (newItem.Freight - 0.01), 
    3, 
    MidpointRounding.AwayFromZero);
    this.UpdateItemInDb(secondNewItem);
            
    kendoGrid.Filter(
    FreightColumnName, 
    Enums.FilterOperator.LessThan, 
    newItem.Freight.ToString());
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 1);
            
    Assert.AreEqual(1, results.Count(x => x.Freight == secondNewItem.Freight));
}

The arrange is identical, at the end we assert that only the second item is visible.

Freight Clear Filter

[TestMethod]
public void FreightClearFilter()
{
    this.driver.Navigate().GoToUrl(@"http://demos.telerik.com/kendo-ui/grid/filter-row");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
            
    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.Freight);
    var biggestFreight = allItems.Last().Freight;
            
    var newItem = this.CreateNewItemInDb();
    newItem.Freight = biggestFreight + this.GetUniqueNumberValue();
    this.UpdateItemInDb(newItem);
            
    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.Freight = newItem.Freight + 1;
    this.UpdateItemInDb(secondNewItem);
            
    kendoGrid.Filter(
    FreightColumnName, 
    Enums.FilterOperator.EqualTo, 
    newItem.Freight.ToString());
    this.WaitForGridToLoad(1, kendoGrid);
    kendoGrid.RemoveFilters();
        
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
}

Here we create two new items. The first one has a unique freight. When we filter, it is the only element displayed on the grid. When we clear the applied filters, we assert that both entities are visible.

Design Grid Control's Tests- Date Column

There are six filters that need to be automated- EqualTo, NotEqualTo, IsAfter, IsAfterOrEqualTo, IsBefore, IsBeforeOrEqualTo. Three additional test cases should be added- one for clearing the applied filters, sorting ascending and sorting descending.

OrderDate EqualTo Filter

[TestMethod]
public void OrderDateEqualToFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderId);
    var lastOrderDate = allItems.Last().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(1);
    this.UpdateItemInDb(newItem);

    kendoGrid.Filter(
    OrderDateColumnName, 
    Enums.FilterOperator.EqualTo, 
    newItem.OrderDate.ToString());
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 1);
    Assert.AreEqual(newItem.OrderDate.ToString(), results[0].OrderDate);
}

We create a new item. Then we get the biggest order date from the DB. After that, update the new item's order date with the biggest order date + 1 day. This way when you apply the EqualTo filter by order date, only the new item should be displayed. Again, if you want to run the tests against an empty DB, probably it is a good idea to create a second entity and make sure that it is not visible.

OrderDate NotEqualTo Filter

[TestMethod]
public void OrderDateNotEqualToFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.Last().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
        new GridFilter(
        OrderDateColumnName,
        Enums.FilterOperator.NotEqualTo, 
        newItem.OrderDate.ToString()),
        new GridFilter(
        ShipNameColumnName, 
        Enums.FilterOperator.EqualTo, 
        newItem.ShipName));
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 1);
    Assert.AreEqual(secondNewItem.ToString(), results[0].OrderDate);
}

Here we create two new entities. Make sure that they have new bigger order dates than the largest date present in the DB. Also, the new items contain an identical new unique shipping name. The first filter we apply is by the shipping name. We expect that only the new entities should be displayed. With the second NotEqualTo filter by the shipping name, we expect that only the new objects should be shown. With the second NotEqualTo filter, we can verify that only the second item is visible on the grid.

OrderDate IsAfter Filter

[TestMethod]
public void OrderDateAfterFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.Last().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
        new GridFilter(
            OrderDateColumnName, 
            Enums.FilterOperator.IsAfter,
            newItem.OrderDate.ToString()),
        new GridFilter(
            ShipNameColumnName, 
            Enums.FilterOperator.EqualTo, 
            newItem.ShipName));
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 1);
    Assert.AreEqual(secondNewItem.ToString(), results[0].OrderDate);
}

The arrange phase is the same as the one for the NotEqualTo filter. The dates are arranged in such a way that the first item's date is before the second item's one. So when we apply the After filter, only the second entity should be displayed.

OrderDate IsAfterOrEqualTo Filter

[TestMethod]
public void OrderDateIsAfterOrEqualToFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.First().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
        new GridFilter(
        OrderDateColumnName, 
        Enums.FilterOperator.IsAfterOrEqualTo, 
        newItem.OrderDate.ToString()),
        new GridFilter(
        ShipNameColumnName, 
        Enums.FilterOperator.EqualTo, 
        newItem.ShipName));
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 2);
    Assert.AreEqual(secondNewItem.ToString(), results[0].OrderDate);
    Assert.AreEqual(newItem.ToString(), results[1].OrderDate);
}

Identical to the above example except we assert that both items are visible on the grid.

OrderDate IsBefore Filter

[TestMethod]
public void OrderDateBeforeFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.First().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(-1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(-2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
        new GridFilter(
            OrderDateColumnName, 
            Enums.FilterOperator.IsBefore,
            newItem.OrderDate.ToString()),
        new GridFilter(
            ShipNameColumnName, 
            Enums.FilterOperator.EqualTo, 
            newItem.ShipName));
    this.WaitForGridToLoadAtLeast(1, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 1);
    Assert.AreEqual(secondNewItem.ToString(), results[0].OrderDate);
}

The only difference from the After filters is that instead of adding days to the smallest date we subtract them. When we apply the IsBeforeOrEqualTo filter only the second item should be displayed.

OrderDate IsBeforeOrEqualTo Filter

[TestMethod]
public void OrderDateIsBeforeOrEqualToFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.First().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(-1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(-2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
        new GridFilter(
        OrderDateColumnName, 
        Enums.FilterOperator.IsBeforeOrEqualTo, 
        newItem.OrderDate.ToString()),
        new GridFilter(
        ShipNameColumnName, 
        Enums.FilterOperator.EqualTo, 
        newItem.ShipName));
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 2);
    Assert.AreEqual(secondNewItem.ToString(), results[0].OrderDate);
    Assert.AreEqual(newItem.ToString(), results[1].OrderDate);
}

Only the applied filter is different, and we assert that both entities are shown. If you want to execute the tests against an empty DB, create a third new object, otherwise you cannot be sure that the filter is doing the right thing.

OrderDate Clear Filter

[TestMethod]
public void OrderDateClearFilter()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var newItem = this.CreateNewItemInDb();

    kendoGrid.Filter(
        OrderDateColumnName, 
        Enums.FilterOperator.IsAfter, 
        DateTime.MaxValue.ToString());
    this.WaitForGridToLoad(0, kendoGrid);
    kendoGrid.RemoveFilters();

    this.WaitForGridToLoadAtLeast(1, kendoGrid);
}

We create a new item. After that, we filter on a non-existing date. No items should be visible. When we remove the filter the new item should be displayed.

OrderDate Sort Ascending

[TestMethod]
public void OrderDateSortAsc()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.First().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(-1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(-2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
    ShipNameColumnName, 
    Enums.FilterOperator.EqualTo, 
    newItem.ShipName);
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
    kendoGrid.Sort(OrderDateColumnName, SortType.Asc);
    Thread.Sleep(1000);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 2);
    Assert.AreEqual(secondNewItem.ToString(), results[0].OrderDate);
    Assert.AreEqual(newItem.ToString(), results[1].OrderDate);
}

We apply the same arrange as for the Before filters. After the filter application, we sort ascending. At the end of the test the items are asserted that are displayed in the correct order.

OrderDate Sort Decending

[TestMethod]
public void OrderDateSortDesc()
{
    this.driver.Navigate().GoToUrl(
        @"http://demos.telerik.com/kendo-ui/grid/remote-data-binding");
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));

    var allItems = this.GetAllItemsFromDb().OrderBy(x => x.OrderDate);
    var lastOrderDate = allItems.First().OrderDate;

    var newItem = this.CreateNewItemInDb();
    newItem.OrderDate = lastOrderDate.AddDays(-1);
    this.UpdateItemInDb(newItem);

    var secondNewItem = this.CreateNewItemInDb(newItem.ShipName);
    secondNewItem.OrderDate = lastOrderDate.AddDays(-2);
    this.UpdateItemInDb(secondNewItem);

    kendoGrid.Filter(
    ShipNameColumnName, 
    Enums.FilterOperator.EqualTo, 
    newItem.ShipName);
    this.WaitForGridToLoadAtLeast(2, kendoGrid);
    kendoGrid.Sort(OrderDateColumnName, SortType.Desc);
    Thread.Sleep(1000);
    var results = kendoGrid.GetItems<Order>();

    Assert.IsTrue(results.Count() == 2);
    Assert.AreEqual(newItem.ToString(), results[0].OrderDate);
    Assert.AreEqual(secondNewItem.ToString(), results[1].OrderDate);
}

Only the assert order of the entities is different as well as the applied filter.

If you enjoy my publications, Get Instant Access to my future PRO tips and trips.

Download full source code

So Far in the 'Pragmatic Automation with WebDriver' Series

The post Design Grid Control Automated Tests Part 2 appeared first on Automate The Planet.

All images are purchased from DepositPhotos.com and cannot be downloaded and used for free.
License Agreement

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)