Design Grid Control Automated Tests Part 3

In my previous articles Design Grid Control Automated Tests Part 1 and Design Grid Control Automated Tests Part 2 I started a mini-series about writing decent grid control’s automated tests. In this third part, I am going to talk about how to automate grid’s paging.

Design Grid Control’s Paging Tests

We want to design tests about the paging functionality of the grid controls. The available buttons may vary but the most frequent are- go to the first page, go to last page, go to next page and go to previous page. Of course usually, you can navigate to a specific page by clicking the number of the concrete page. In the example that I am going to use there are two additional buttons- next more pages and previous more pages. They load the next or previous batch of pages. I am going to present to you my opinion about the most appropriate automated tests of these buttons.

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.

Grid Control’s Paging Tests- Arrange Methods

There are two important arrange methods that all tests use for this functionality.

private void InitializeInvoicesForPaging()
{
    int totalOrders = 11;
    if (!string.IsNullOrEmpty(this.uniqueShippingName))
    {
        uniqueShippingName = Guid.NewGuid().ToString();
    }
    this.testPagingItems = new List<Order>();
    for (int i = 0; i < totalOrders; i++)
    {
        var newOrder = this.CreateNewItemInDb(this.uniqueShippingName);
        testPagingItems.Add(newOrder);
    }
}

If we assume that our grid control’s paging is setup to use 10-sized paging, we create 11 unique items for every test with an identical unique shipping name. This way when we change the grid to display one element per page, we will have an item for every page plus an additional one for the more pages buttons.

private void NavigateToGridInitialPage(KendoGrid kendoGrid, int initialPageNumber)
{
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.NavigateTo();
    kendoGrid.Filter(ShipNameColumnName, Enums.FilterOperator.EqualTo, this.uniqueShippingName);
    kendoGrid.ChangePageSize(1);
    this.WaitForGridToLoad(1, kendoGrid);
    kendoGrid.NavigateToPage(initialPageNumber);
    WaitForPageToLoad(initialPageNumber, kendoGrid);
    this.AssertPagerInfoLabel(gridFilterPage, initialPageNumber, initialPageNumber, this.testPagingItems.Count);
}

Through this method, we configure the grid to display only a single item. Also, we navigate to the grid control’s page and to a previously specified in the current test case page number. Additionally, we apply an EqualTo filter by the unique shipping name of the previously created for the test case’s 11 elements. At the end of the method, we assert the grid control’s paging label.

Go To First Page Button

public void NavigateToFirstPage_GoToFirstPageButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 11);
    int targetPage = 1;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToFirstPageButton.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

We use the second utility method to navigate to the last 11th page of the grid. Then when we click on the Go To First Page button, we assert that the 1 - 1 of 11 items label is displayed. Additionally, we know which element should be displayed on the first page so we assert that it is present there.

Go To First Page Button Disabled

public void GoToFirstPageButtonDisabled_WhenFirstPageIsLoaded()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 11);
    int targetPage = 1;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToFirstPageButton.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    Assert.IsFalse(gridFilterPage.GoToFirstPageButton.Enabled);
}

Initially, the test starts at 11th page then we navigate to the first page and we assert that the go to first page button is disabled.

Go To Last Page Button

public void NavigateToLastPage_GoToLastPageButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 11;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToLastPage.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.Last().OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

The test case loads the first page of the grid. Then it clicks the Go To Last Page button. Then we assert that the expected item is displayed and that the correct paging label is visible.

Go To Last Page Button Disabled

public void GoToLastPageButtonDisabled_WhenLastPageIsLoaded()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 11;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToLastPage.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    Assert.IsFalse(gridFilterPage.GoToLastPage.Enabled);
}

Again we start at the first page. Then we navigate to the last 11th page and we assert that the Go To Last Page button is disabled.

Go To Previous Page Button

public void NavigateToPageNine_GoToPreviousPageButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 11);
    int targetPage = 10;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToPreviousPage.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

Here the test starts on page eleven. Then when we click on the Previous Page button we expect that the 10th page is loaded and that the correct item is shown.

Go To Previous Page Button Disabled

public void GoToPreviousPageButtonDisabled_WhenFirstPageIsLoaded()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 11);
    int targetPage = 1;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToFirstPageButton.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    Assert.IsFalse(gridFilterPage.GoToPreviousPage.Enabled);
}

When the first page loads, we assert that the Previous Page button is disabled.

Go To Next Page Button

public void NavigateToPageTwo_GoToNextPageButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 2;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToNextPage.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

The test navigates from page one to page to two through the Next Page button. At the end, it applies the default asserts.

Go To Next Page Button Disabled

public void GoToNextPageButtonDisabled_WhenLastPageIsLoaded()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 11;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToLastPage.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    Assert.IsFalse(gridFilterPage.GoToNextPage.Enabled);
}

When you are on the last page of the grid, the test asserts that the Next Page button cannot be clicked.

Next More Pages Button

public void NavigateToLastPage_MorePagesNextButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 11;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.NextMorePages.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

As mentioned earlier, this button skips the next 10 pages. So when we are on the first page and click it, we assert that the grid is on the 11th page.

Next More Pages Button Disabled

public void NextMorePageButtonDisabled_WhenLastPageIsLoaded()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 11;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToLastPage.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    Assert.IsFalse(gridFilterPage.PreviousMorePages.Enabled);
}

When the last page is reached the Next More Pages button should be disabled.

Previous More Pages Button

public void NavigateToPage10_MorePagesPreviousButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 11);
    int targetPage = 1;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.PreviousMorePages.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

Analogically, to the previous example when we load the 11th page and click the Previous More Pages button, we expect that the first page is displayed.

Previous More Pages Button Disabled

public void PreviousMorePagesButtonDisabled_WhenFirstPageIsLoaded()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 11);
    int targetPage = 1;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.GoToFirstPageButton.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    Assert.IsFalse(gridFilterPage.PreviousMorePages.Displayed);
}

The Previous More Pages button should not be clickable if you are on the first page of the grid.

Number Pages’ Buttons

public void NavigateToPageTwo_SecondPageButton()
{
    var kendoGrid = new KendoGrid(this.driver, this.driver.FindElement(By.Id("grid")));
    this.InitializeInvoicesForPaging();
    this.NavigateToGridInitialPage(kendoGrid, 1);
    int targetPage = 2;
    GridFilterPage gridFilterPage = new GridFilterPage(this.driver);
    gridFilterPage.PageOnSecondPositionButton.Click();
    this.WaitForPageToLoad(targetPage, kendoGrid);
    var results = kendoGrid.GetItems<Order>();
    Assert.AreEqual(this.testPagingItems.OrderId, results.First().OrderId);
    this.AssertPagerInfoLabel(gridFilterPage, targetPage, targetPage, this.testPagingItems.Count());
}

When you click on a numeric button, the test asserts that the page that corresponds to that number is loaded.