Intro to Telerik Testing Framework's HTML Control Element Wrappers Suite

Telerik Framework includes an extensive suite of strongly typed HTML element wrappers that abstracts out actions and verifications of the controls contained on the webpage. With the classes contained in the control suite you can do things like:

nextPageButton.Click() instead of Actions.Click(nextPageButton)

or

Assert.IsTrue(textBox.Text.Equals("foo")) instead of Assert.IsTrue(element.GetAttribute("value").Equals("foo"))

In addition there are many other features that make the abstraction even more powerful. Here is a list off all the wrapper classes currently available along with the properties and methods they expose:

HTML Control Description Properties Methods Base Class
HtmlAnchor Wraps access to a HTML <a> anchor element. HRef
Name
Target
Title
HtmlContainerControl
HtmlButton Wraps access to a HTML <button> element. Disabled Name
TabIndex
Valuee
HtmlContainerControl
HtmlDefinitionDescription Wraps access to a HTML <dd /> element . This control is used by the HtmlDefinitionList control. Description HtmlContainerControl
HtmlDefinitionList Wraps access to a HTML <dl> element. Descriptions
Terms
HtmlContainerControl
HtmlDefinitionTerm Wraps access to a HTML <dt> element. This control is used by the HtmlDefinitionList control. Terms HtmlContainerControl
HtmlDiv Wraps access to a HTML <div> container element. HtmlContainerControl
HtmlForm Wraps access to a HTML <form> element. EncType
Length
Name
Target
HtmlContainerControl
HtmlImage Wraps access to a HTML <image> element. Align
Alt
Border
Height
Src
Width
HtmlControl
HtmlInputButton Wraps access to a HTML <input type=button> element. Align
Alt
Border
Height
Src
Width
HtmlInputControl
HtmlInputCheckBox Wraps access to a HTML <input type=checkbox> element. Checked Check HtmlInputControl
HtmlInputFile Wraps access to a HTML <input type=file> element. FilePath Upload HtmlInputControl
HtmlInputHidden Wraps access to a HTML <input type=hidden> element. HtmlInputControl
HtmlInputImage Wraps access to a HTML <input type=image> element. Align
Alt
Border
Height
Src
Width
HtmlInputControl
HtmlInputPassword Wraps access to a HTML <input type=password> element. Disabled Size
TabIndex
Text
HtmlInputControl
HtmlInputRadioButton Wraps access to a HTML <input type=radio> element. Cheched Check HtmlInputControl
HtmlInputReset Wraps access to a HTML <input type=reset> element. Align
Alt
Border
Height
Src
Width
HtmlInputControl
HtmlInputSubmit Wraps access to a HTML <input type=submit> element. Align
Alt
Border
Height
Src
Width
HtmlInputControl
HtmlInputText Wraps access to a HTML <input type=text> element. Disabled
Size
TabIndex
Text
HtmlInputControl
HtmlListItem Wraps access to a HTML <li> element. This control is used by the HtmlOrdererList control and the HtmlUnorderedList control. GetItemOrder HtmlContainerControl
HtmlOption Wraps access to a HTML <option> element which is a member of a select element. Selected
Text
Value
HtmlControl
HtmlOrderedList Wraps access to a HTML <ol>. AllItems
Itemst
HtmlContainerControl
HtmlSelect Wraps access to a HTML <select> list box or drop-down list element. Options
SelectedIndex
SelectedOption
this[]
SelectByIndex
SelectByText
SelectByValue
SelectByPartialText
SelectByPartialValue
MultiSelect
MultiSelectByValue
MultiSelectByText
HtmlContainerControl
HtmlSpan Wraps access to a HTML <span> inline text container element. HtmlContainerControl
HtmlTable Wraps access to a HTML <table> table element containing rows and columns. AllRows
BodyRows
Border
Caption
CellPadding
CellSpacing
ColumnCount
FootRows
HeadRows
Rows
this[]
Width
HtmlContainerControl
HtmlTableCell Wraps access to a HTML <td> table cell element. Align
BgColor
BorderColor
CellIndex
ColSpan
Height
RowSpan
Text
VAlign
Width/td>
HtmlContainerControl
HtmlTableRow Wraps access to a HTML <tr> element. Align
BgColor
BorderColor
Cells
RowIndex
Text
this[]
HtmlContainerControl
HtmlTextArea Wraps access to a HTML <textArea> text input element. Cols
Rows
Text
HtmlContainerControl
HtmlUnorderedList Wraps access to a HTML <ul> element. AllItems
Items
HtmlContainerControl
Table 1. List of HTML element control wrappers contained in Telerik Testing Framework's HTML control suite.

Here is a list of the base classes along with the properties and methods they expose:

Base Class Description Properties Methods Base Class
HtmlContainerControl Base class for all wrapper controls that can contain other controls. Find
InnerText

TextContent
HtmlControl
HtmlInputControl Base class for all input wrapper controls. Name
Type
Value
HtmlControl
HtmlControl Base class for the entire HTML wrapper control suite. Attributes
ChildNodes
ClientSideLocator
CssClass
Events
ID
ScrollLeft
ScrollTop
Styles
TagName
Wait
AddEventListener
CallMethod
Capture
Click
Download
DragTo
DragToWindowLocation
GetComputedStyle
GetComputedStyleValue
GetRectangle
GetStyle
GetStyleValue
GetValue
InvokeEvent
IsVisible
MouseClick
MouseHover
Parent(T)
RemoveEventListener
ScrollToVisible
SetValue
Control
Control Root base class for all WebAii controls. BaseElement
IsRefresh
Locator
LocatorExpression
OwnerBrowser
Terms
AssignElement
GetFamilyElement
MatchControl
Refresh
HtmlContainerControl
Table 2. List of base classes used by Telerik Testing Framework's HTML control suite.

Here is a list of the support classes that make it easier to use the rest of the HTML control suite:

Base Class Description Properties Methods Base Class
HtmlFind An extended Find class that includes HTML specific find methods. Table
TableCell
TableRowt
Find
HtmlStyle Represents a single HtmlStyle. This object can be used to help probe and do validation against Html styles. Has functionality to convert unit styles to int values and color styles to System.Drawing.Color. Name
Value
IsColor
IsInt
(static) IsSameColor
ToColor
(static) ToHtmlColor
ToInt
Name
Value
HtmlWait An extended Wait class that includes HTML specific wait methods. ForCondition
ForExists
ForStyles
ForStylesNot
ForVisible
ForVisibleNot
Wait
Table 3. List of HtmlControl support classes contained in Telerik Testing Framework's HTML control suite.

Example of How to Fill Out a Web Form Using the HTML Element Wrapper Control Suite

Suppose we're automating a form to submit an auto classified ad. Here's how to write the code and take advantage of the HTML element wrapper suite:

[TestClass]
public class SubmitAdTestClass : BaseTest
{
    private const string TEST_PAGE_NAME = @"..\..\Pages\HTMLControls.htm";

    // Since we know the order of the input fields
    // we can use an enum to more easily reference them.
    enum TextInputFields
    {
        Model,
        Price,
        Phone,
        Email,
        FirstName,
        LastName,
        Company,
        Address,
        City,
        Zip,
        UserName,
    }
    // Same thing for the select drop downs
    enum Selects
    {
        Year,
        Make,
        AllowEmail,
        State
    }

    [TestMethod]
    [Description("Submits a used car classified ad")]
    public void SubmitAdTest()
    {
        Manager.LaunchNewBrowser();
        ActiveBrowser.NavigateTo("file:\\\\" + Path.Combine(TestContext.TestDir, TEST_PAGE_NAME));

        // Find all the required elements on the page
        HtmlForm form = Find.ById<HtmlForm>("Form2");
        IList<HtmlSelect> selectsList = form.Find.AllByTagName<HtmlSelect>("select");
        IList<HtmlInputText> textInputsList = form.Find.AllByTagName<HtmlInputText>("input");
        HtmlInputPassword passwordField = form.Find.ById<HtmlInputPassword>("txtPassword");
        HtmlTextArea description = form.Find.ById<HtmlTextArea>("txtDescription");
        HtmlInputSubmit submit = form.Find.ById<HtmlInputSubmit>("submit");

        // Enter data into the input fields
        Actions.ScrollToVisible(submit.BaseElement, ScrollToVisibleType.ElementBottomAtWindowBottom);
        selectsList[(int)Selects.Year].SelectByText("1956");
        selectsList[(int)Selects.Make].SelectByText("Ford");
        textInputsList[(int)TextInputFields.Model].Text = "T-Bird";
        textInputsList[(int)TextInputFields.Price].Text = "175000";
        textInputsList[(int)TextInputFields.Phone].Text = "555-122-5544";
        textInputsList[(int)TextInputFields.Email].Text = "test@myemail.com";
        selectsList[(int)Selects.AllowEmail].SelectByText("Yes");
        description.Text = "Beautifully restored two tone red & white classic T-Bird. Just like factory mint condition. Actual mileage is 175,600.";
        textInputsList[(int)TextInputFields.FirstName].Text = "Willard";
        textInputsList[(int)TextInputFields.LastName].Text = "Laird";
        textInputsList[(int)TextInputFields.Company].Text = "Laird Auto Restoration";
        textInputsList[(int)TextInputFields.Address].Text = "147 Industrial Dr.";
        textInputsList[(int)TextInputFields.City].Text = "Sacramento";
        selectsList[(int)Selects.State].SelectByText("California");
        textInputsList[(int)TextInputFields.Zip].Text = "22746";
        textInputsList[(int)TextInputFields.UserName].Text = "wlaird335";
        passwordField.Text = "lairdinc";

        // Submit the ad
        submit.Click();
    }
}
<TestClass()> _
 Public Class SubmitAdTestClass
    Inherits BaseTest

    Private Const TEST_PAGE_NAME As String = "..\..\Pages\HTMLControls.htm"


    Enum TextInputFields
        Model
        Price
        Phone
        Email
        FirstName
        LastName
        Company
        Address
        City
        Zip
        UserName
    End Enum


    Enum Selects
        Year
        Make
        AllowEmail
        State
    End Enum

    <TestMethod(), _
    Description("Submits a used car classified ad"), _
    DeploymentItem("Pages\\HTMLControls.htm"), _
    DeploymentItem("Pages\\Submitted.htm")> _
    Public Sub SubmitAdTest()

        Manager.LaunchNewBrowser()
        ActiveBrowser.NavigateTo("file:\\\\" + Path.Combine(TestContext.TestDir, TEST_PAGE_NAME))

        ' Find all the required elements on the page
        Dim form As HtmlForm = Find.ById(Of HtmlForm)("Form2")
        Dim selectsList As IList(Of HtmlSelect) = form.Find.AllByTagName(Of HtmlSelect)("select")
        Dim textInputsList As IList(Of HtmlInputText) = form.Find.AllByTagName(Of HtmlInputText)("input")
        Dim passwordField As HtmlInputPassword = form.Find.ById(Of HtmlInputPassword)("txtPassword")
        Dim description As HtmlTextArea = form.Find.ById(Of HtmlTextArea)("txtDescription")
        Dim submit As HtmlInputSubmit = form.Find.ById(Of HtmlInputSubmit)("submit")


        Actions.ScrollToVisible(submit.BaseElement, ScrollToVisibleType.ElementBottomAtWindowBottom)
        selectsList(Selects.Year).SelectByText("1956")
        selectsList(Selects.Make).SelectByText("Ford")
        textInputsList(TextInputFields.Model).Text = "T-Bird"
        textInputsList(TextInputFields.Price).Text = "175000"
        textInputsList(TextInputFields.Phone).Text = "555-122-5544"
        textInputsList(TextInputFields.Email).Text = "test@myemail.com"
        selectsList(Selects.AllowEmail).SelectByText("Yes")
        description.Text = "Beautifully restored two tone red & white classic T-Bird. Just like factory mint condition. Actual mileage is 175,600."
        textInputsList(TextInputFields.FirstName).Text = "Willard"
        textInputsList(TextInputFields.LastName).Text = "Laird"
        textInputsList(TextInputFields.Company).Text = "Laird Auto Restoration"
        textInputsList(TextInputFields.Address).Text = "147 Industrial Dr."
        textInputsList(TextInputFields.City).Text = "Sacramento"
        selectsList(Selects.State).SelectByText("California")
        textInputsList(TextInputFields.Zip).Text = "22746"
        textInputsList(TextInputFields.UserName).Text = "wlaird335"
        passwordField.Text = "lairdinc"


        submit.Click()

    End Sub

End Class

By taking advantage of the object oriented nature of the HTML element wrapper classes, our test code that fills in the fields and clicks the submit button is much simpler, more descriptive and more intuitive in nature. Note how simple it was to enter text into all the input fields, as well as make all the drop down selections using intuitive methods included with Telerik's HTML element wrapper classes! Also notice how we're doing a nested find. The line form.Find.AllByTagName("select"); is returning all of the <select> elements that are contained within the form "Form2" contained on the page, not the entire page itself which may contain other <select> elements on the page, perhaps even on other forms contained on the same page.

One special feature to note about the Find.AllByXXX() functions is that they filter on the type of the TControl such that the returned list only includes elements of type TControl. In the example above we're calling Find.AllByTagName("input"). Due to the filtering being performed by the framework we only get back <input type="text"> elements and not other input elements such as the <input type="password"> element that is also on the form.

By the same token all of the Fi**nd.ByXXX()** functions also verify that the found element is of type TControl. If, for example, you call Find.ByTagIndex("input", 4) and the 5th <input> element is not type="password" then the framework will throw a System.ArgumentException.