Testing Telerik Extensions for MVC with Selenium

This website is no longer actively supported

Written by John DeVightJohn DeVight on 18 Jul 2011 20:20

Download Unit Test Source Code
Download XPathBuilder.dll Library

Overview

I have been working on an application that uses Telerik Extensions for MVC and I wanted to be able to the test the web application. I have been using Selenium to create my unit tests, but found that it can be a bit painful to have to figure out all the XPath syntax for the controls all the time. I decided to create a utility library to build the XPath for me. I decided that lambda expressions would be the most intuitive approach to building the interface for the utility library. All the base class for building the XPath queries is the XPathBuilder.XPathExpression class. With the XPathExpression the attributes, text and position of an element can be defined. Also, the element's parent, sibling, child and descendant elements can be defined. The classes defined in the XPathBuilder.Telerik.Mvc namespace simplify the use of the XPathExpression class as it applies to the Telerik Extensions for MVC controls.

While I use Selenium to create unit tests to test my application, the XPathBuilder utility library does not require Selenium to be used. The XPathBuilder utility library simply creates XPath strings that could also be used with other automated testing tools such as Telerik's Free Testing Framework

The TelerikMvcXPathBuilder Class

The TelerikMvcXPathBuilder class contains static methods used to get instances of "Telerik control expressions" for the various Telerik Extensions for MVC controls. Here is a list of the methods:

namespace XPathBuilder.Telerik.Mvc
{
    public static class TelerikMvcXPathBuilder
    {
        public static IAutoCompleteExpression AutoComplete(string name);
 
        public static ICalendarExpression Calendar(string name);
 
        public static IComboBoxExpression ComboBox(string name);
 
        public static IDatePickerExpression DatePicker(string name);
 
        public static IDropDownListExpression DropDownList(string name);
 
        public static IGridExpression Grid(string name);
 
        public static IMenuExpression Menu(string name);
 
        public static ITabStripExpression TabStrip(string name);
 
        public static ITreeViewExpression TreeView(string name);
    }
}

Getting Started with XPathBuilder and Selenium

The following examples demonstrate the use of XPathBuilder and Selenium to test the Telerik Extensions for MVC controls on the Telerik Extensions for MVC Demos website.


Testing the Calendar Control

To perform a unit test that will select a date in a Calendar Control:

  • Get an instance of the ICalendarExpression from the TelerikMvcPathBuilder.Calendar() method
  • Call the ICalendarExpression.Date() method to set the date to select.

Below is an example of building the XPath query to select tomorrow's date. The Selenium test demonstrates testing the Calendar on the Calendar "First Look" page.

// Define the Calendar control and select a date.
ICalendarExpression calendarExpression = TelerikMvcXPathBuilder.Calendar("Calendar")
    .Date(d => d.Equals(DateTime.Today.AddDays(1)));

Download the attached unit test application and look at the CalendarSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.


Testing the ComboBox Controls

Telerik has 3 types of "item selection" controls; ComboBox, DropDownList and AutoComplete.

ComboBox Control

To perform a unit test that will select an item from the drop down list of a ComboBox Control:

  • Get an instance of the IComboBoxExpression from the TelerikMvcPathBuilder.ComboBox() method.
  • Call the IComboBoxExpression.ShowList() method to show the drop down list.
  • Call the IComboBoxExpression.List().SelectItem() method to select an item from the list.

Below is an example of building the XPath queries to show the drop down list of items and then select an item from the list. The Selenium test demonstrates testing the ComboBox on the ComboBox "First Look" page.

// Define the ComboBox control to show the drop down list values.
IComboBoxExpression comboBoxExpression = TelerikMvcXPathBuilder.ComboBox("ComboBox").ShowList();
 
// Select a value.
comboBoxExpression.List().SelectItem("Chocolade");
 
// Get the input field.
comboBoxExpression.Input()

DropDownList Control

To perform a unit test that will select an item from the drop down list of a DropDownList Control:

  • Get an instance of the IDropDownListExpression from the TelerikMvcPathBuilder.DropDownList() method.
  • Call the IDropDownListExpression.ShowList() method to show the drop down list.
  • Call the IDropDownListExpression.List().SelectItem() method to select an item from the list.

Below is an example of building the XPath queries to show the drop down list of items and then select an item from the list. The Selenium test demonstrates testing the DropDownList on the ComboBox "First Look" page.

// Define the DropDownList control to show the drop down list of values.
IDropDownListExpression dropDownListExpression = 
    TelerikMvcXPathBuilder.DropDownList("DropDownList").ShowList();
 
// Select a value.
dropDownListExpression.List().SelectItem("Chocolade");
 
// Get the input field.
dropDownListExpression.Input();

AutoComplete Control

To perform a unit test that will begin to type a value into the AutoComplete control and then select an item from the drop down list of an AutoComplete Control:

  • Get an instance of the IAutoCompleteExpression from the TelerikMvcPathBuilder.AutoComplete() method.
  • Use the selenium.TypeKeys method begin typing a value into the AutoComplete control which will show the drop down list.
  • Call the IAutoCompleteExpression.List().SelectItem() method to select an item from the list.

Below is an example of building the XPath queries to show the drop down list of items and then select an item from the list. The Selenium test demonstrates testing the AutoComplete on the ComboBox "First Look" page.

// Define the AutoComplete control.
IAutoCompleteExpression autoCompleteExpression = TelerikMvcXPathBuilder.AutoComplete("AutoComplete");
 
// Select a value.
autoCompleteExpression.List().SelectItem("ocolade");

Download the attached unit test application and look at the ComboBoxSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.


Testing the DatePicker Control

To perform a unit test that will select a date in a DatePicker Control:

  • Get an instance of the IDatePickerExpression from the TelerikMvcPathBuilder.DatePicker() method
  • Call the IDatePickerExpression.OpenCalendar() method to display the calendar.
  • Call the IDatePickerExpression.DatePickerCalendar().Date() method to select a date.
  • Call the IDatePickerExpression.Input() method to get the input field to validate the date.

Below is an example of building the XPath query to select tomorrow's date. The Selenium test demonstrates testing the DatePicker on the DatePicker "First Look" page.

// Define the DatePicker control to open the DatePicker Calendar.
IDatePickerExpression datePickerExpression = TelerikMvcXPathBuilder.DatePicker("DatePicker").OpenCalendar();
 
// Select a date from the DatePicker Calendar.
datePickerExpression.DatePickerCalendar().Date(d => d.Equals(tomorrow));
 
// Get the DatePicker input field.
datePickerExpression.Input();
 
// Convert a date to the "default DatePicker input format" for comparison.
datePickerExpression.DateInDefaultInputFormat(tomorrow);

Download the attached unit test application and look at the DatePickerSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.


Testing the Grid Control

Select Row

To perform a unit test that will select a row in a Grid Control:

  • Get an instance of the IGridExpression from the TelerikMvcPathBuilder.Grid() method.
  • Call the IGridExpression.Content() method to get the content portion of the grid.
  • In the IGridExpression.Content() method, call the IGridContent.Row() method to define a row in the grid.
  • In the IGridContent.Row() method, Call the IGridRow.Cells() method define the cells in the grid row.
  • In the IGridRow.Cells() method, use the IGridCellBuilder.Add() method to define each cell in the grid row.
  • In the IGridCellBuilder.Add() method, use the XPathExpression.Where() method to define the contents for each cell.

Below is an example of building the XPath query to select a row in a grid. The Selenium test demonstrates testing the Grid on the Grid "Client Selection" page.

IGridExpression gridExpression = TelerikMvcXPathBuilder.Grid("Customers")
    .Content(content => content
        .Row(row => row
            .Cells(cells =>
            {
                cells.Add(cell => cell.Where(condition => condition.Text(OperationType.Equals, "BLAUS")));
                cells.Add(cell => cell.Where(condition => condition.Text(OperationType.Equals, "Blauer See Delikatessen")));
            })
        )
    );

Sort Column

To perform a unit test that will sort rows in a Grid Control by clicking on a column heading:

  • Get an instance of the IGridExpression from the TelerikMvcPathBuilder.Grid() method.
  • Call the IGridExpression.Header() method to get the header portion of the grid.
  • In the IGridExpression.Header() method, call the IGridHeader.ColumnHeader() method to define a column header in the grid.
  • In the IGridHeader.ColumnHeader() method, call the IGridColumnHeader.TextEquals() method define the text that appears in the column heading and call IGridColumnHeader.Action() to set the action to GridColumnHeaderActionType.Sort.

Below is an example of building the XPath query to sort grid rows based on values in a column. The Selenium test demonstrates testing the Grid on the Grid "Client Selection" page.

IGridExpression gridExpression = TelerikMvcXPathBuilder.Grid("Customers")
    .Header(header => header
        .ColumnHeader(col => col
            .TextEquals("Contact Name")
            .Action(GridColumnHeaderActionType.Sort)
        )
    );

Download the attached unit test application and look at the GridSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.


Testing the Menu Control

To perform a unit test that will select a menu "list" and select an item in the list for a Menu Control:

  • Get an instance of the IMenuExpression from the TelerikMvcPathBuilder.Menu() method.
  • Call the IMenuExpression.Menu() method to get the menu "list".
  • In the IMenuExpression.Menu() method, call the IMenuItem.Text() method to define the menu list to select.
  • Call the IMenuExpression.GetMenu() method to get the menu "list" and call the IMenuItem.List() method to get the list.
  • In the IMenuItem.List() method, call the IMenuItemList.Add() method to define the menu item to select.
  • In the IMenuItem.List() method, use the IMenuItem.Text() method to define the menu item to select and the IMenuItem.Action() method to set the action to MenuItemActionType.Select to select the menu item.

Below is an example of building the XPath query to select a menu "list" and then select a menu item from the menu "list". The Selenium test demonstrates testing the Menu on the Menu "First Look" page.

// Define the menu "list" to select.
IMenuExpression menuExpression = TelerikMvcXPathBuilder.Menu("Menu")
    .Menu(menu => menu.Text(OperationType.Equals, "ASP.NET AJAX"));
 
// Define the menu item to select in the menu "list".
menuExpression.GetMenu()
    .List(list => list
            .Add(menuItem => menuItem
                .Text(OperationType.Contains, "and 28 more")
                .Action(MenuItemActionType.Select)
            )
        );

Download the attached unit test application and look at the MenuSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.


Testing the TabStrip Control

To perform a unit test that will select a tab in the TabStrip Control:

  • Get an instance of the ITabStripExpression from the TelerikMvcPathBuilder.TabStrip() method.
  • Call the ITabStripExpression.SelectTab() method to select a tab.

Below is an example of building the XPath query to select a tab from the tabstrip. The Selenium test demonstrates testing the TabStrip on the TabStrip "First Look" page.

// Define the TabStrip control and select a Tab.
ITabStripExpression tabStripExpression = TelerikMvcXPathBuilder.TabStrip("TabStrip")
    .SelectTab("ASP.NET AJAX");

Download the attached unit test application and look at the TabStripSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.


Testing the TreeView Control

To perform a unit test that will expand a node in the TreeView Control:

  • Get an instance of the ITreeViewExpression from the TelerikMvcPathBuilder.TreeView() method.
  • Call the ITreeViewExpression.RootNode() method to define the root node of the treeview.
  • In the ITreeViewExpression.RootNode() method, call the ITreeViewNode.TextEquals() method and/or the ITreeViewNode.ValueEquals() method to describe the root node and then call the ITreeViewNode.Action() method to expand the node with TreeViewNodeActionType.Expand.

Below is an example of building the XPath query to select a expand a node in a treeview. The Selenium test demonstrates testing the TreeView on the TreeView "First Look" page.

ITreeViewExpression treeViewExpression = TelerikMvcXPathBuilder.TreeView("TreeView")
    .RootNode(node => node
        .TextEquals("Mail")
        .ValueEquals("Mail")
        .Action(TreeViewNodeActionType.Expand));

Download the attached unit test application and look at the TreeViewSeleniumTests.cs class file in the XPathBuilder.SeleniumTests project to see the above code in action.

// To see examples of how to select a treenode, download the attached unit test application and look at the TreeViewUnitTests.cs class file inthe XPathBuilder.UnitTests project.//


What's Next

As I continue to build unit tests to test the application using Selenium, I will add to the XPathBuilder utility library and provide examples of how to use it to test Telerik Extensions for MVC controls. I will also be providing examples to how to build unit tests to test an application using Telerik's Free Testing Framework. Finally, I will be creating examples of how to test the Telerik Extensions For ASP.NET MVC : Extended Client API as described in the article Telerik MVC : Extending the Client API.

References

Discussion Closed

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License