Click here to Skip to main content
15,867,704 members
Articles / Programming Languages / Javascript
Technical Blog

Advanced Web UI Components Automation with Telerik Testing Framework

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
14 Mar 2016Ms-PL3 min read 11.7K   4  
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

Image 1

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.

C#
[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.

Image 2
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.
C#
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.

C#
[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

Image 3

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

C#
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

C#
[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

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

Custom Control's Code

C#
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

C#
[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

Image 5

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

C#
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

C#
[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

Image 6

Kendo ColorPicker's JavaScript API.

Custom Control's Code

C#
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

C#
[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)


Written By
CEO Automate The Planet
Bulgaria Bulgaria
CTO and Co-founder of Automate The Planet Ltd, inventor of BELLATRIX Test Automation Framework, author of "Design Patterns for High-Quality Automated Tests: High-Quality Test Attributes and Best Practices" in C# and Java. Nowadays, he leads a team of passionate engineers helping companies succeed with their test automation. Additionally, he consults companies and leads automated testing trainings, writes books, and gives conference talks. You can find him on LinkedIn every day.

Comments and Discussions

 
-- There are no messages in this forum --