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 T﻿elerik 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.

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

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.

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

Usage in Tests

Automate Gauge Needle

We want to move the arrow to a specific number. Custom Control's Code

Usage in Tests

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.

Custom Control's Code

Keep in mind that months in JavaScript starts from 0. Usage in Tests

Automate Kendo ColorPicker



Custom Control's Code