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