Automating Kendo UI controls

[Naga]

Hello:

I am automating an application which has majority of the controls build using KendoUI such as
KendoGrid
Kendo Temaplate etc


Can you please help me how to identify these controls such as Kendo Grid and proceed further.Also please let me know Telerik Test tsudio completely supports Kendo UI controls or not.If not then from which version of test studio can we expect a complete support.

Thanks,
Naga

[Cody]

Hello,

To give you an accurate answer how do you define "...completely supports Kendo UI controls..."? Test Studio supports any/all HTML elements/controls to one degree or another. It always has and always will. The real question is to what level of support are you seeking?

Test Studio comes with a set of "translators" (extended support) for Silverlight controls, some of the common HTML controls, and our large set of RadControls. We do not have any translators for the special Kendo UI controls. That should not stop or prevent your test automation tasks however. Test Studio will recognize the base elements used to make up the Kendo UI controls and interact with and automate all of those elements out of the box.

If you run into any specific problems please let us know.

All the best,
Cody
the Telerik team

[Cody]

Hello,

I must apologize and eat my own words now. A colleague reminded me we do have specific translators for Kendo UI. The list includes:

• KendoCalendar
• KendoGrid
• KendoInput
• KendoListview
• KendoMenu
• KendoPager
• KendoPanelBar
• KendoTabStrip
• KendoTreeView
• KendoWindow

Sorry for not paying attention to this fact earlier!!

All the best,
Cody
the Telerik team

[Naga]

Can you please post few sample code snippets to work with Kendo UI controls.

[Plamen]

Hello Naga,

I am sorry for the delay in getting back to you on this. Here are some samples with Kendo UI controls.

Kendo Grid

// Navigate to : 'http://demos.kendoui.com/web/grid/editing-custom.html'
ActiveBrowser.NavigateTo("http://demos.kendoui.com/web/grid/editing-custom.html");

//Get the grid object
KendoGrid grid = ActiveBrowser.Find.ById<KendoGrid>("grid");


//Search for a row that contains "Chang" in its first cell
foreach (KendoGridDataItem row in grid.DataItems)
{
    if (row.Cells[0].TextContent == "Chang")
    {
        //Create a Confirm dialog
        ConfirmDialog cd = new ConfirmDialog(ActiveBrowser, DialogButton.OK);
        Manager.DialogMonitor.AddDialog(cd);
        Manager.DialogMonitor.Start();

        //Click on the last cell
        row.Cells[3].MouseClick();

        //Handle the Confirm dialog
        cd.WaitUntilHandled();
        Manager.DialogMonitor.RemoveDialog(cd);
    }
}

Kendo Calendar

// Navigate to : 'http://demos.kendoui.com/web/calendar/index.html'
ActiveBrowser.NavigateTo("http://demos.kendoui.com/web/calendar/index.html");

//Get the Calendar object
KendoCalendar calendar = ActiveBrowser.Find.ById<KendoCalendar>("calendar");

//Select date
calendar.selectDay("2013, 09, 18");

Kendo ComboBox    

// Navigate to : 'http://demos.kendoui.com/web/combobox/cascadingcombobox.html'
ActiveBrowser.NavigateTo("http://demos.kendoui.com/web/combobox/cascadingcombobox.html");

//ComboBox1
HtmlControl label = ActiveBrowser.Find.ByExpression<HtmlControl>("for=categories");
Assert.IsNotNull(label);
KendoInput combo = label.BaseElement.GetNextSibling().As<KendoInput>();

HtmlControl arrow = combo.Find.ByExpression<HtmlControl>("class=k-icon k-arrow-down");
arrow.MouseClick();

ActiveBrowser.RefreshDomTree();

HtmlListItem item = ActiveBrowser.Find.ByContent<HtmlListItem>("Confections");
item.MouseClick();


//ComboBox2
HtmlControl label2 = ActiveBrowser.Find.ByExpression<HtmlControl>("for=products");
Assert.IsNotNull(label);
KendoInput combo2 = label2.BaseElement.GetNextSibling().As<KendoInput>();

HtmlControl arrow2 = combo2.Find.ByExpression<HtmlControl>("class=k-icon k-arrow-down");
arrow2.MouseClick();

ActiveBrowser.RefreshDomTree();

HtmlListItem item2 = ActiveBrowser.Find.ByContent<HtmlListItem>("Pavlova");
item2.MouseClick();


//ComboBox3
HtmlControl label3 = ActiveBrowser.Find.ByExpression<HtmlControl>("for=orders");
Assert.IsNotNull(label);
KendoInput combo3 = label3.BaseElement.GetNextSibling().As<KendoInput>();

HtmlControl arrow3 = combo3.Find.ByExpression<HtmlControl>("class=k-icon k-arrow-down");
arrow3.MouseClick();

ActiveBrowser.RefreshDomTree();

HtmlListItem item3 = ActiveBrowser.Find.ByContent<HtmlListItem>("London");
item3.MouseClick();

If you have a specific scenario that you want to automate, please describe it in details and I'll be glad to assist you in writing the code.

Regards,
Plamen
the Telerik team

[Prasanna]

Hi Plamen,

Is this above mentioned same code work with Firefox,etc browsers, please advise the code if it is different for other browsers.

Regards,
Prasanna

[Plamen]

Hi Prasanna,

The code is the same for all browsers, however the implementation of some of these Kendo UI controls has been changed. Please provide detailed information on your automation scenario. What type of Kendo control you're testing and what is the problem you're experiencing? If you can provide access to your application or if you can point me to a similar publicly accessible application I'll be glad to assist you in writing the code. 

Kind regards,
Plamen
the Telerik team

[sreekanth n]

I used the sample code written for Calender.    As per the example given, it is supposed to pick up the 18th September 2013.

            //Select date
            calendar.selectDay("2013, 09, 18");

But it is selecting 18th October 2013.    Even i tried with different month and date, it is always picks up following month's date.

[Boyan Boev]

Hello Sreekanth,

Yes, you are right. The month list starts from 0. So for January you should type 0, for February 1, for March 2, e.t.c.

If you need additional assistance, please do not hesitate to contact us.

Regards,
Boyan Boev
Telerik

[sreekanth n]

When user enters date format like below, they expect same month and not following month.
calendar.selectDay("2013, 09, 18");

It will be very confusing.  Is it possible to provide a fix for this.

[Velin Koychev]

Hi Sreekanth,

You are right that this might be counterintuitive since in C#,  DateTime months are not Zero-based as they are in JavaScript Date Object. I filed feedback on your behalf on this problem, which you can follow in our Feedback Portal. 

Thank you for your understanding.
 
Regards,
Velin Koychev
Telerik

[Manjunath]

how can i find kendo listviewitem in listview?

[Manjunath]

How can i find the item in kendolistview?

[sreekanth n]

We have written below code for KendoComboBox.

            HtmlControl sizeui = myManager.ActiveBrowser.Find.ById<HtmlControl>(capSizeId);
            HtmlListItem capSizeItem = sizeui.Find.ByContent<HtmlListItem>(selectCapSize);
            capSizeItem.Wait.ForExists();
            capSizeItem.Click();

I feel we should be able to write on similar lines for KendoListView.

[Manjunath]

Hi Srikanth,

   Thanks for your responce. Your solution is not working for me. Could you please look at my kendo listview html content.

<ul id="lvAvailablePayers" class="k-widget k-listview k-selectable" data-bind="source: AvailablePayerList" data-role="listview" role="listbox" aria-multiselectable="true">

<div data-bind="text: Name, value: PayerId" data-uid="80a5851f-3a2d-40d7-85ee-4829f4f9d8c9" role="option" aria-selected="false"> Payer1</div>

<div data-bind="text: Name, value: PayerId" data-uid="227b1c05-fa8f-4cd1-9999-99a3ac97cc3d" role="option" aria-selected="false">Payer2
</div>

<div data-bind="text: Name, value: PayerId" data-uid="9e97dc21-ed5d-4952-a665-ae9cf5664376" role="option" aria-selected="false">Payer3
</div>

</ul>

[Manjunath]

could you please help me out? How can i select kindolistview item from kendolistview

[Velin Koychev]

@ Sreekanth - Thank you for sharing your experience.

@Manjunath -

You should be able to use code similar to the following:

KendoListViewItem newItem = Find.ByExpression<KendoListViewItem>("id=lvAvailablePayers","|","tagIndex=div:0");

This code should select the first KendoListViewItem. You can change the tagIndex depending on which item you need.

You might find our documentation very useful for cases like this one.

I hope this helps.

Regards,
Velin Koychev
Telerik

[Manjunath]

Hi velin,


     Thank you for response.  I got another solution.


            KendoListView lvAvailablePayers = CurrentBrowser.Find.ById<KendoListView>("lvAvailablePayers");
            ReadOnlyCollection<HtmlDiv> items = lvAvailablePayers.Find.AllByAttributes<HtmlDiv>("role=option");
            items[0].MouseClick();

[Velin Koychev]

Hi Manjunath,

Thank you for sharing this solution. It is good to hear that you've been able to resolve this problem.

Regards,
Velin Koychev
Telerik

[Darshana]

Hi All, 

I am facing same issue selecting value from kendoUI combobox. I tried code mentioned above, but still no luck. Please help me out here.

In attached document, Code is for family drop down List, So if I want to select value from Family Drop Down List ,say for example option value "ABC", How do i select as a coded step? 

I tried doing this way: 
HtmlListItem value = ActiveBrowser.Find.ByContent<HtmlListItem>("ABC");
value.MouseClick();

And this code is throwing error like : Object reference not set to an instance of an object
I think it might be getting Null value,but I need your advice to successfully select value from family Drop Down.


Thank you.

[Boyan Boev]

Hi Darshana,

Thank you for contacting us.

If you want to select the item by its text the code should look like:

HtmlSelect mySelect = ActiveBrowser.Find.ById<HtmlSelect>("combo-family");
mySelect.SelectByText("ABC");

If you want to select if by its value:

HtmlSelect mySelect = ActiveBrowser.Find.ById<HtmlSelect>("combo-family");
mySelect.SelectByValue("675390");

Hope this helps.

Regards,
Boyan Boev
Telerik

 

 

[Darshana]

Hi Boyan,

Thanks for the response. I tried with this code and it is still not selecting any value, So based on above code, can you help me out how to open combo box? 

[Boyan Boev]

Hello Darshana,

Please give is more detailed information.

What happens when you execute the code? Does the test fail?

Send us the trace log.

Can you please record a quick video using Jing to demonstrate the exact steps you take? 

Hope to hear from you soon.

Regards,
Boyan Boev
Telerik

 

 

[Darshana]

Hi Boyan,

I am getting error " Object reference not set to an instance of an object.".

Before Code:(Working)

Pages.OtherItemsLedgex.TC13401ProductDiv.Wait.ForExists();
Pages.OtherItemsLedgex.TC13401ProductDiv.TypeText("xcastle Arbitrage LP");
Pages.OtherItemsLedgex.TC13401ProductDiv.ToggleCombo();
System.Threading.Thread.Sleep(250);
Pages.OtherItemsLedgex.ListitemProductSelected.MouseClick();

After Code:(Not Working)
Pages.OtherItemsLedgex.TC13401ProductDiv.ToggleCombo();
HtmlSelect mySelect = ActiveBrowser.Find.ById<HtmlSelect>("combo-product");
mySelect.SelectByText("xcastle Arbitrage LP");

 So, for before Code , I am not confident about it whether it is right way to do it or not . And  for After Code, I want to write the way you have mentioned in the code above. But it is throwing an error. 

 I tried selecting value by recording, but it is taking List Item for that particular value , so because of that I can't reuse this object in other testcases/test steps. I have to record this object again if I want to select different value. 

 Let me know if you need more information.
 Thank you for your help.

[Boyan Boev]

Hello Darshana,

Which row is throwing the exception?

Can you please record a quick video using Jing along with the DOM tree to demonstrate the exact steps you take? 

Thank you!

Regards,
Boyan Boev
Telerik

 

 

[Darshana]

Hi, I am attaching video and DOM file. 

Thanks for your help.

[Boyan Boev]

Hello Darshana,

Thank you for the video, however I still cannot understand where is the problem.

Please send me the execution log so I can debug it.

Thank you!

Regards,
Boyan Boev
Telerik

 

 

[Srinivasan]

Hi,I am new to telerik testing.

I am using c# code for automation testing in telerik framework.

i need solution for how to check  the kendo K-widget k-treeview checkbox node based on given text.

 

Thanks,

Srinivasan.k

 

[Boyan Boev]

Hello Srinivasan,

Thank you for contacting us.

Could you please send us a screen shot of the control as well as a screen shot of its DOM tree so I can assist you best with the code?

Looking forward to hearing from you.

Regards,
Boyan Boev
Telerik

 

 

[George]

Hi I am automating a UI, finding the element as become so challenging.. right my clicking on some elements used to work but now it hasnt can you show me how to locate an element and how to design a better framework using Telerik. 

[Boyan Boev]

Hi George,

Thank you for contacting us.

Could you please give us more detailed information about the issue? What is exactly the problem?

Send us some logs, screen shots e.t.c.

You can also point us to some live sample so I can assist you with the code.

We have also a demo site for Kendo.

Hope to hear from you soon.

Regards,
Boyan Boev
Telerik

 

 

[Asif]

Hi Cody,

Is that translator support for KendoEditor. If not, how to find the KendoEditor element in telerik test studio.

Regards,
Asif

[Boyan Boev]

Hi Asif,

We have translator for KendoInput elements.

If the editor is implemented with some other elements Test Studio will find it also with its basic HTML elements.

Hope that helps

Regards,
Boyan Boev
Telerik

 

 

[Asif]

Hi Boyan,

I tried to test the url (http://demos.telerik.com/kendo-ui/editor/index) where you can find the KendoEditor. During recording, In that editor I have typed as "test". When I playback those steps in telerik test studio, it shows error that element is not found. Please find the attachment where you cannot find the HTMLInput element in the KendoEditor. Please guide me how to test on this. 

Regards,
Asif

 

[Boyan Boev]

Hello Asif,

Please find the attached project which clicks on the editor and type some text.

I have added manually the table of the editor into the Element explorer, perform a mouse click against it and then type the text.

Let me know if that helps.

Regards,
Boyan Boev
Telerik

 

 

[Asif]

Hi Boyan,

I have checked the attached project. It's working fine by using desktop command and using Manager.Desktop.KeyBoard.TypeText to type the text. Thanks for the help.

Regards,

Asif

 

[Boyan Boev]

Hello Asif,

Happy to hear that.

If you need further assistance please let us know.

Regards,
Boyan Boev
Telerik

 

 

[Jasvant]

Hi we are using Kendu - grid in our application in form of table , we need to automate our application using selenium and the scripting language we are using is Java.

Can any one help me by giving some example how to

- select dropdown in grid 

- how to select column and row in a grid 

 

[Boyan Boev]

Hi Jasvant,

This forum is regarding Telerik Testing Framework. 

I recommend you to contact Selenium support or post in their forum.

Thank you! 

Regards,
Boyan Boev
Telerik by Progress