Testing Framework / Write Tests in Code / Intermediate Topics / HTML Control Suite

New to Telerik Test Studio? Download free 30-day trial

Creating Your Own Custom HtmlControls

Let's suppose you're testing a web site that uses a third party or custom control. You can easily create your own custom HtmlControl class and then design tests that interact with the custom control via your custom HtmlControl class.

As an example, let's create a custom HtmlControl that wraps the ASP.NET calendar control. We'll give it some methods for reading and controlling the date selection along with a custom ClientSideLocator just for an example. First here's our ASPX web page containing a calendar control that we want to test

<% @ Page Language="C#" MasterPageFile="~/AppMaster.master" Title="Untitled Page" %>
<% @ Import Namespace="System.Data" %>
<% @ Register Assembly="ArtOfTest.WebAii.AspNet" Namespace="ArtOfTest.WebAii.AspNet.WebControls" TagPrefix="test" %>
<script runat="server">
     /// <summary>
     /// Page Load
     /// </summary>
     /// <param name="sender"></param>
     /// <param name="e"></param>
     protected void Page_Load(object sender, EventArgs e)
     {
           if (!Page.IsPostBack)
           {
                // Bind the grid and cache the data in the session.
                grid1.DataSource = GetData();
                DataBind();
           }
     }
     /// <summary>
     /// Return a DataSet of some random data.
     /// </summary>
     /// <returns>DataSet</returns>
     private DataSet GetData()
     {
          DataSet data = new DataSet();
          DataTable dt = new DataTable();
          Random r = new Random(3);
          data.Tables.Add(dt);
          dt.Columns.Add("ID", typeof(int));
          dt.Columns.Add("Date", typeof(DateTime));
          dt.Columns.Add("FirstName", typeof(string));
          dt.Columns.Add("LastName", typeof(string));
          dt.Columns.Add("Balance", typeof(int));
          for (int i = 0; i < 15; i++)
          {
               DataRow row = dt.NewRow();
               row.ItemArray = new object[] {i,DateTime.Today.AddDays(i),"Name" + i.ToString(),
                    "Last" + i.ToString(), r.Next(3000)};
               dt.Rows.Add(row);
          }
          return data;
     }
     /// <summary>
     /// OnCalendarSelectionChange()
     /// </summary>
     /// <param name="sender"></param>
     /// <param name="e"></param>
     protected void cal1_SelectionChanged(object sender, EventArgs e)
     {
          // Get DataSet from Session
          TimeSpan diffDate = cal1.SelectedDate.Subtract(DateTime.Today);
          if (cal1.SelectedDate >= DateTime.Today && diffDate.Days < 15)
          {
               grid1.SelectedIndex = diffDate.Days;
               grid1.EditIndex = diffDate.Days;
           }
           grid1.DataSource = GetData();
           grid1.DataBind();
     }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="Server">
     <!-- This Data Page Content -->
     <test:TestRegion ID="DataPageContent" runat='server'>
          You are logged in.
         <table style="border: dotted 1px black; background-color: beige; width:80%;" cellpadding="15">
              <tr>
              <td>
                   Select A Date:
                   <!-- The Calendar Control Region -->
                   <test:TestRegion ID="CalendarControl" runat="server">
                        <asp:Calendar ID="cal1" runat="server" OnSelectionChanged="cal1_SelectionChanged"
                             BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" Font-Names="Verdana"
                             Font-Size="8pt" ForeColor="#663399" Height="200px" Width="220px" DayNameFormat="Shortest"
                             ShowGridLines="True">
                             <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                             <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                             <OtherMonthDayStyle ForeColor="#CC9966" />
                             <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                             <DayHeaderStyle Font-Bold="True" BackColor="#FFCC66" Height="1px" />
                             <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
                             <SelectorStyle BackColor="#FFCC66" />
                        </asp:Calendar>
                   </test:TestRegion>
                   <!-- The Calendar Control Region -->
              </td>
              <td valign="top" style="border: solid 1px black;">
                   Customer Balances:
                   <!-- The GridView Region -->
                   <test:TestRegion ID="GridControl" runat="server">
                        <asp:GridView ID="grid1" runat="server" AutoGenerateColumns="False" BackColor="White" 
                             BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Size="XX-Small">
                             <Columns>
                                  <asp:TemplateField HeaderText="ID">
                                       <ItemTemplate>
                                            <%# Eval("ID") %>
                                       </ItemTemplate>
                                       <EditItemTemplate>
                                            <!-- ID Column Region [Will persist only in Edit Mode] -->
                                            <test:TestRegion ID="GridEditId" runat="server">
                                                 <%# Eval("ID") %>
                                            </test:TestRegion>
                                            <!-- ID Column Region -->
                                       </EditTemplate>
                                  </asp:TemplateField>
                                  <asp:BoundField HeaderText="FirstName" DataField="FirstName" ReadOnly="true" />
                                  <asp:BoundField HeaderText="LastName" DataField="LastName" ReadOnly="true" />
                                  <asp:BoundField HeaderText="Date" DataField="Date" ReadOnly="true" />
                                  <asp:TemplateField HeaderText="Balance">
                                       <ItemTemplate>
                                            <%# Eval("Balance") %>
                                       </ItemTemplate>
                                       <EditItemTemplate>
                                            <!-- Balance Column Region [Will persist only in Edit Mode] -->
                                            <test:TestRegion ID="GridEditBalance" runat="server">
                                                 <asp:TextBox ID="newBalance" Text='<%# Eval("Balance") %>' runat="server"></asp:TextBox>
                                            </test:TestRegion>
                                            <!-- Balance Column Region -->
                                       </EditItemTemplate>
                                  </asp:TemplateField>
                             </Columns>
                             <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                             <RowStyle BackColor="White" ForeColor="#330099" />
                             <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                             <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                             <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                        </asp:GridView>
                   </test:TestRegion>
                   <!-- The GridView Region -->
              </td>
              </tr>
         </table>
     </test:TestRegion>
     <!-- This Data Page Content -->
</asp:Content>

Let's put together our custom HtmlControl that we can use interact with an ASP.NET calendar control:

 public class AspNetCalendar : HtmlTable
       {
           /// <summary>
           /// Custom ClientSideLocator for demonstration purposes only.
           /// The framework calls this function as part of the JavaScript call when getting/setting
           /// values. Put any logic in here you want to select the element/object the framework
           /// should act upon. The framework prepends this string to the getvalue function.
           /// In this example asking to get the value of the color will equate to executing this JavaScript:
           /// document.getElementsByTagName('{table}')[0].color
           /// </summary>
           public override string ClientSideLocator
           {
               get
               {
                   return String.Formt("document.getElementsByTagName('{0}')[{1}]", this.TagName,  this.BaseElement.TagNameIndex);
               }
           }

           /// <summary>
           /// Gets the current year/month as a DateTime object.
           /// </summary>
           /// <returns>DateTime object with the calendars current year/month. Day will always be 1.</returns>
           public DateTime GetDate()
           {
                   HtmlTableCell cell = this.Rows[0].Cells[0];
                   HtmlTable headTable = cell.ChildNodes[0].As<HtmlTable>();

                   string MonthYear = headTable.Rows[0].Cells[1].InnerText;

                   DateTime date = DateTime.Parse(MonthYear);
                   return date;
           }

           /// <summary>
           /// Moves calendar to the specified year/month.
           /// </summary>
           /// <param name="TargetDate">The target year/month to move to.</param>
           public void GotoDate(DateTime TargetDate)
           {
               // Must strip out the day of month and time so we compare on the year/month only.
               DateTime CompareDate = new DateTime(TargetDate.Year, TargetDate.Month, 1);
               while (GetDate() < CompareDate)
               {
                   NextMonth();
               }
               while (GetDate() > CompareDate)
               {
                   PrevMonth();
               }
           }

           /// <summary>
           /// Moves calendar to the current year/month.
           /// </summary>
           public void GotoNow()
           {
               GotoDate(DateTime.Now);
           }

           /// <summary>
           /// Moves the calendar to the specified year/month and then clicks on the specified day.
           /// </summary>
           /// <param name="date">The target date to be clicked on.</param>
           public void ClickOnDate(DateTime date)
           {
               GotoDate(date);
               HtmlAnchor dayElem = this.Find.ByAttributes<HtmlAnchor>("title=" + date.ToString("MMMM dd"));
               dayElem.Click();
           }

           /// <summary>
           /// Gets the calendar's month value.
           /// </summary>
           /// <returns>Month as a string.</returns>
           public string GetMonth()
           {
               HtmlTableCell cell = this.Rows[0].Cells[0];
               HtmlTable headTable = cell.ChildNodes[0].As<HtmlTable>();

               string MonthYear = headTable.Rows[0].Cells[1].InnerText;

               string[] parts = MonthYear.Split(' ');
               // Always displayed as 'Mmm YYYY'
               return parts[0];
           }

           /// <summary>
           /// Gets the calendar's year value.
           /// </summary>
           /// <returns>Year as a string.</returns>
           public string GetYear()
           {
               HtmlTableCell cell = this.Rows[0].Cells[0];
               HtmlTable headTable = cell.ChildNodes[0].As<HtmlTable>();

               string MonthYear = headTable.Rows[0].Cells[1].InnerText;
               string[] parts = MonthYear.Split(' ');
               return parts[1];
           }

           /// <summary>
           /// Moves the calendar to the next month.
           /// </summary>
           /// <returns>The new month as a string.</returns>
           public string NextMonth()
           {
               HtmlAnchor nextMonthElem = this.Find.ByAttributes<HtmlAnchor>("title=Go to the next month");

               nextMonthElem.Click();
               this.OwnerBrowser.WaitUntilReady();
               this.Refresh();

               return GetMonth();
           }

           /// <summary>
           /// Moves the calendar to the previous month.
           /// </summary>
           /// <returns>The new month as a string.</returns>
           public string PrevMonth()
           {
               HtmlAnchor nextMonthElem = this.Find.ByAttributes<HtmlAnchor>("title=Go to the previous month");

               nextMonthElem.Click();
               this.OwnerBrowser.WaitUntilReady();
               this.Refresh();

               return GetMonth();
           }
       }

Notice how we derive from an HtmlTable. That way we can take advantage of all the functionality already built into a standard table. We'll just add all the functions useful for our calendar control which include:

  • NextMonth

  • PrevMonth

  • GetYear

  • GetMonth

  • GetDate

  • GotoDate

  • GotoNow

  • ClickOnDate

All these functions are fairly straightforward Telerik Testing Framework code that don't really need explanation.

For the purposes of demonstration there's also a ClientSideLocator override in lines 201-207 so you can see how it works and how to implement it when you want to create a more complex custom control. For our HtmlControl extenders, you can make your HtmlControl map to any object on the client side. Previously an HtmlControl object had to map to element with an HTML tag. This restriction has been removed. You can override the HtmlControl "ClientSideLocator" property and give it any JavaScript find logic to execute on the client (e.g. in ASP.NET $find("foo") ) and the HtmlControl will map itself to that object on the client. Any future calls on this object using GetValue, SetValue or CallMethod, will use this JavaScript to select the right object on the client side before getting or setting it's value, or calling your custom method on it.

In this article
Related articles
Not finding the help you need? Improve this article