Click here to Skip to main content
14,024,683 members
Click here to Skip to main content
Add your own
alternative version

Stats

7.5K views
4 bookmarked
Posted 14 Mar 2016
Licenced Ms-PL

Advanced Web UI Components Automation with Telerik Testing Framework

, 14 Mar 2016
Rate this:
Please Sign up or sign in to vote.
Explains different approaches how to automate advanced web UI components like a date-picker, color-picker, gauge and more.

Introduction

Most of the websites out there use commercial Web UI Components for their front end.  Most of these components are JavaScript-based, and their test automation is a little bit trickier. In this article, I am going to show you how you can automate such controls using their JavaScript API. For the examples, I am going to use the Telerik Testing Framework. However, you can easily apply the same principles for any other web automation framework.

Automate Kendo ComboBox

Use Telerik Testing Framework Default Methods

Kendo UI is a framework for building rich, smart HTML5 and JavaScript apps for any platform, browser, or device. Here in Telerik, we use it heavily in the front end of our websites. Our automated tests are Telerik Testing Framework based so first I am going to show you how this component is automated by default with it.

[TestMethod]
public void SelectItemKendoComboxWithDefaultTelerikTestFrameworkMethod()
{
    manager.ActiveBrowser.NavigateTo("http://demos.telerik.com/kendo-ui/combobox/events");
    HtmlSpan kendoInput = 
    manager.ActiveBrowser.Find.ByXPath<HtmlSpan>("//*[@id='example']/div[1]/span/span/span/span");
    kendoInput.Click();
    KendoListBox kendoListBox = 
    manager.ActiveBrowser.Find.ById<KendoListBox>("combobox_listbox");
    kendoListBox.SelectItem("Item 2");
}

Telerik Testing Framework comes with built-in translators for almost all of the Telerik's UI components. A translator describes the actions of an element that can be automated and verifications that can be performed. First the test clicks on the arrow span to open the comboBox then the built-in KendoListBox translator comes into play. To be able to use the Kendo translators you need to add a reference to Telerik.TestingFramework.Controls.KendoUI DLL that can be found in the bin folder of your Telerik Testing Framework's installation folder.

Use JavaScript Custom HTML Control

Another way to automate the Kendo comboBox is to use it's JavaScript API. Find the methods that you need. Test them in the browser's JavaScript console. Finally, wrap them in a new custom HTML control in your code.

Here is how the custom HTML control looks like. On the surface,  the comboBox is an HTML text input. We pass it as a parameter to the constructor. Then we convert it to jQuery control and use the InvokejQueryFunction to invoke the desired method from the JavaScript API of the component.
public class KendoComboBox
{
    private readonly HtmlInputText htmlInputText;
    public KendoComboBox(HtmlInputText htmlInputText)
    {
        this.htmlInputText = htmlInputText;
    }

    public void SelectItemByText(string text)
    {
        this.htmlInputText.AsjQueryControl().InvokejQueryFunction(
            string.Format("val('{0}');", text));
    }
}

The usage in tests is straightforward. First, locate the text input, pass it to the constructor of the KendoComboBox and call the desired method of the comboBox.

[TestMethod]
public void SelectItemKendoComboxWithJavaScriptExtensionMethod()
{
    manager.ActiveBrowser.NavigateTo("http://demos.telerik.com/kendo-ui/combobox/events");
    HtmlInputText htmlInputText = manager.ActiveBrowser.Find.ByXPath<HtmlInputText>("//*[@id='example']/div[1]/span/span/input");
    KendoComboBox kendoComboBox = new KendoComboBox(htmlInputText);
    kendoComboBox.SelectItemByText("Item 2");
}

Automate Kendo DatePicker

Here we are going to create again a custom HTML control wrapping the JavaScript API of the component. The only difference compared to the previous example is that the constructor accepts an ID. Kendo DatePicker's JavaScript API.

Custom Control's Code

public class KendoDatePicker
{
    private readonly string datePickerSetValueJqueryExpression =
        "$('#{0}').kendoDatePicker({{ value: new Date({1}, {2}, {3}) }});";
    private readonly string idLocator;

    public KendoDatePicker(string idLocator)
    {
        this.idLocator = idLocator;
    }

    public void SetDate(DateTime dateTime)
    {
        string scriptToBeExecuted = 
        string.Format(datePickerSetValueJqueryExpression, 
        this.idLocator, 
        dateTime.Year, 
        dateTime.Month - 1, 
        dateTime.Day);
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }
}

Usage in Tests

[TestMethod]
public void SetDateKendoDatePickerCustomControl()
{
    manager.ActiveBrowser.NavigateTo("http://demos.telerik.com/kendo-ui/datepicker/index");
    KendoDatePicker datePicket = new KendoDatePicker("datepicker");
    datePicket.SetDate(DateTime.Now);
}

Automate Gauge Needle

We want to move the arrow to a specific number. Gauge Needle's JavaScript API.

Custom Control's Code

public class GaugeNeedle
{
    private readonly string idLocator;

    public GaugeNeedle(string idLocator)
    {
        this.idLocator = idLocator;
    }

    public void SetValue(int value)
    {
        string scriptToBeExecuted = 
        string.Format("$('#{0}').igRadialGauge('option', 'value', '{1}');", 
        this.idLocator, 
        value);
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }
}

Usage in Tests

[TestMethod]
public void SetValueGaugeNeedleCustomControl()
{
    manager.ActiveBrowser.NavigateTo("http://www.igniteui.com/radial-gauge/gauge-needle");
    GaugeNeedle gaugeNeedle = new GaugeNeedle("radialgauge");
    gaugeNeedle.SetValue(44);
}

Automate FullCalendar

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. It is a JavaScript event calendar, customizable and open source. FullCalendar's JavaScript API.

Custom Control's Code

public class FullCalendar
{
    private readonly string fullCalendarMethodJqueryExpression =
        "$('#{0}').fullCalendar('{1}')";
    private readonly string idLocator;

    public FullCalendar(string idLocator)
    {
        this.idLocator = idLocator;
    }

    public void ClickNextButton()
    {
        string scriptToBeExecuted = 
            string.Format(fullCalendarMethodJqueryExpression, this.idLocator, "next");
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }

    public void ClickPreviousButton()
    {
        string scriptToBeExecuted = 
            string.Format(fullCalendarMethodJqueryExpression, this.idLocator, "prev");
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }

    public void GoToToday()
    {
        string scriptToBeExecuted =
            string.Format(fullCalendarMethodJqueryExpression, this.idLocator, "today");
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }

    public void GoToDate(DateTime date)
    {
        string scriptToBeExecuted = 
            string.Format("$('#{0}').fullCalendar('gotoDate', $.fullCalendar.moment('{1}-{2}-{3}'))", 
            this.idLocator, 
            date.Year, 
            date.Month - 1,
            date.Day);
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }
}

Keep in mind that months in JavaScript starts from 0.

Usage in Tests

[TestMethod]
public void TestMethodsFullCalendarCustomControl()
{
    manager.ActiveBrowser.NavigateTo("http://fullcalendar.io/");
    FullCalendar fullCalendar = new FullCalendar("calendar");
    fullCalendar.ClickNextButton();
    fullCalendar.ClickPreviousButton();
    fullCalendar.GoToDate(new DateTime(2012, 11, 28));
    fullCalendar.GoToToday();
}

Automate Kendo ColorPicker

Kendo ColorPicker's JavaScript API.

Custom Control's Code

public class KendoColorPicker
{
    private readonly string colorPickerSetColorExpression =
        "$('#{0}').data('colorpicker').value('#{1}');";
    private readonly string idLocator;

    public KendoColorPicker(string idLocator)
    {
        this.idLocator = idLocator;
    }

    public void SetColor(string hexValue)
    {
        string scriptToBeExecuted = string.Format(colorPickerSetColorExpression, this.idLocator, hexValue);
        Manager.Current.ActiveBrowser.Actions.InvokeScript(scriptToBeExecuted);
    }
}

Usage in Tests

[TestMethod]
public void SetColorKendoColorPickerCustomControl()
{
    manager.ActiveBrowser.NavigateTo("http://demos.telerik.com/kendo-ui/colorpicker/index");
    KendoColorPicker kendoColorPicker = new KendoColorPicker("colorpicker");
    kendoColorPicker.SetColor("ccc");
}

All images are purchased from DepositPhotos.com and cannot be downloaded and used for free.
License Agreement

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Anton Angelov
CEO Automate The Planet
Bulgaria Bulgaria
Anton Angelov is an IT Consultant and Quality Assurance Architect at Innovative Lab. He is passionate about automation testing and designing test harness and tools, having the best industry development practices in mind. In addition, he is an active blogger and the founder of Automate The Planet. He strives to make the site one of the leading authorities in Automation Testing by presenting compelling articles, inspiring ardent discussions amongst the community. He is also one of the most-rated-answer authors of questions about Test Automation Frameworks (WebDriver) on Stack Overflow.

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190419.4 | Last Updated 14 Mar 2016
Article Copyright 2016 by Anton Angelov
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid