New to Telerik Test Studio? Start a free 30-day trial

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)

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:

C#
[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();
    }
}
VB
<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<HtmlSelect>("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<TControl>() 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<HtmlInputText>("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 Find.ByXXX<TControl>() functions also verify that the found element is of type TControl. If, for example, you call Find.ByTagIndex<HtmlInputPassword>("input", 4) and the 5th <input> element is not type="password" then the framework will throw a System.ArgumentException.