Automate Filter of KendoGrid

[Thomas Sonnenschein]

Hello,

I am automating an application which has majority of the controls build using KendoUI such as e.g. KendoGrid.

Now I test to create, edit and delete entries of my grid. The Problem now is, I can't find a way, to automaticaly set the filter of a column with the testing framework.
I managed to get a reference to my grid by:

KendoGrid grid = myManager.ActiveBrowser.Find.ById<KendoGrid> (gridId);

I also managed, to select a row, but for correct testing I try to filter for my test entries.

How can I achieve this?

I use Kendo 2014.1.318 and testing framework 2014.1.410.0

Greetings
  Thomas

[Boyan Boev]

Hello Thomas,

Thank you for contacting us.

Please elaborate a bit more on your scenario. Are you trying to use the filter functionality of the grid (see the attached screen shot)?

If so here is an example code against our public demo site:

KendoGrid grid = ActiveBrowser.Find.ById<KendoGrid>("grid");
KendoFilterMenu filterMenu = grid.Find.ByAttributes<KendoFilterMenu>("data-field=City");
HtmlSpan span = filterMenu.Find.ByExpression<HtmlSpan>("tagName=span");
span.MouseClick();

Hope this helps.

Regards,
Boyan Boev
Telerik

 

 

[Thomas Sonnenschein]

Hello Boyan,

  thank you for your reply. This is exactly what I want. But what is the next step? Your code only opens the filter. I need to type some text into the first filter field (it is bound to a string model property in my case). I tried the following code to find this input but with no luck (result was null):

HtmlInputText filterValue = myManager.ActiveBrowser.Find.ByExpression<HtmlInputText> ("data-bind=value:filters[0].value");

and also

HtmlInputText filterValue = span.Find.ByExpression<HtmlInputText> ("data-bind=value:filters[0].value");

I was already able to click then the "Filter" button, but wit no filter value the whole exercise is still useless.

Greetings
  Thomas

PS: I still fight against massive stability problems (test crash in the middle of the run, Html Elements (mostly entries of comboboxes or listboxes) are found in one run but not in the next run (or vise versa) without changes in both, website and test code. Website to test is installed on a second independent virtual machine.

Have you any suggestions to setup a stable testing maschine with testing framework (Windows Version, Additional Tools, VS2010 or VS2013, ...)

[Ivaylo]

Hello Thomas,

After you ppen/expand the filter all the elements are loading dynamically. Which explains why you get the null, maybe the element is not properly loaded when you are trying to set the text.
In order to solve this problem you might need to add a wait for exist step for the element you need to work with. Please find an example below on how to wait for specific element:

ActiveBrowser.WaitForElement(Pages.HTMLFormsAndInput.Expressions.VehicleCheckBox0, 33000, false);

Hope this helps.

Regards,
Ivaylo
Telerik

 

 

[Thomas Sonnenschein]

Hello Ivaylo,

  that was the point. With the Wait I now find my input field from the filter popup. Now there is the next problem :(

I find the Element. Set the text and click the filter button, but the filter is ignored by the grid. If I pause the test and open the filter again, my filtervalue is properly displayed in the field (see attached png), but the grid is not filtered. I have to clear the filter completely and after setting the filter manualy, it works, but not, if set by the test.Even additional opening the filter and clicking on the filter button has no effect.

I use this code to find and set the value:

Element inputField = myManager.ActiveBrowser.WaitForElement (new HtmlFindExpression ("data-bind=value:filters[0].value"), 33000, false);
myManager.ActiveBrowser.Actions.SetText (inputField, titleText);

Greetings
  Thomas

[Ivaylo]

Hello Thomas,

I think here the click on the filter is the problematic one. What click you are using here? Please provide the entire code so we can take a look. I guess you should be using the MouseClick(); method in order to trigger the filtering. 

Looking forward to hearing from you.

Regards,
Ivaylo
Telerik

 

 

[Thomas Sonnenschein]

Hello Ivaylo,

  I used the following code:

// Set Filter of Master
// Open Filter
KendoGrid grid = myManager.ActiveBrowser.Find.ById<KendoGrid> ("MasterGrid");
KendoFilterMenu filterMenu = grid.Find.ByAttributes<KendoFilterMenu> ("data-field=Title");
HtmlSpan span = filterMenu.Find.ByExpression<HtmlSpan> ("tagName=span");
span.MouseClick ();

// Fill Filter text
Element inputField = myManager.ActiveBrowser.WaitForElement (new HtmlFindExpression ("data-bind=value:filters[0].value"), 33000, false);
myManager.ActiveBrowser.Actions.SetText (inputField, titleText);

// Click Filter Button
String[] attributes= new String[] {"class=k-button", "type=submit"};
HtmlFindExpression hfe = new HtmlFindExpression (attributes);
Element button = myManager.ActiveBrowser.WaitForElement (hfe, 10000, false);
myManager.ActiveBrowser.Actions.Click (button);

Greetings
  Thomas

[Konstantin Petkov]

Hi Thomas,

Did you have a chance to try the mouse click option? Here is an example:

myManager.Desktop.Mouse.Click(MouseClickType.LeftClick, button.GetRectangle());

Regards,
Konstantin Petkov
Telerik

 

 

[Igor]

Assigning text to input field directly didn't work for me.  This worked though: 

KendoFilterMenu filterMenu = grid.Find.ByAttributes<KendoFilterMenu>("data-field=myFieldName");
HtmlSpan span = filterMenu.Find.ByExpression<HtmlSpan>("tagName=span");
span.MouseClick(MouseClickType.LeftClick, 0, 80, ArtOfTest.Common.OffsetReference.AbsoluteCenter);

ActiveBrowser.RefreshDomTree();

// Fill Filter text
Element inputField = ActiveBrowser.WaitForElement(new HtmlFindExpression("data-bind=value:filters[0].value"), 33000, false);
inputField.Focus();
ActiveBrowser.Desktop.KeyBoard.TypeText("my text");

// click filter button
Element btnFilter = ActiveBrowser.WaitForElement(10000, "type=submit", "class=k-button k-primary");
Actions.Click(btnFilter);

Leo

[Igor]

Assigning text to input field directly didn't work for me.  This worked though: 

 

 KendoFilterMenu filterMenu = grid.Find.ByAttributes<KendoFilterMenu>("data-field=CustomerName");
HtmlSpan span = filterMenu.Find.ByExpression<HtmlSpan>("tagName=span");
span.MouseClick(MouseClickType.LeftClick, 0, 80, ArtOfTest.Common.OffsetReference.AbsoluteCenter);


ActiveBrowser.RefreshDomTree();

            // Fill Filter text
Element inputField = ActiveBrowser.WaitForElement(new HtmlFindExpression("data-bind=value:filters[0].value"), 33000, false);
inputField.Focus();
ActiveBrowser.Desktop.KeyBoard.TypeText("textextext");

            // click filter button
Element btnFilter = ActiveBrowser.WaitForElement(10000, "type=submit", "class=k-button k-primary");
Actions.Click(btnFilter);

 

[Ivaylo]

Hello Igor,

Thank you for your input in the public forum and trying to help other customers.

I've rewarded your telerik account.

Regards,
Ivaylo
Telerik

 

 

[Dan]

I Just used the above script for filter and please find the below 

KendoGrid grid = ActiveBrowser.Find.ById<KendoGrid>("k-grid-filter");

KendoFilterMenu filterMenu = grid.Find.ByAttributes<KendoFilterMenu>("data-field=DocketNumber");
HtmlSpan span = filterMenu.Find.ByExpression<HtmlSpan>("tagName=span");
 span.MouseClick();

Any one can help me on this .

 

Thanks & Regards,

Govardhan N

[Elena]

Hi Govardhan, 

Could you please elaborate more on the issue you are experiencing and against which sample you are trying to use the listed code snippet.

Looking forward to hearing from you! Thanks in advance! 

Regards,
Elena Tsvetkova
Telerik by Progress

 

 

[Aditya]

I have to retrieve all the values of KendoFilterDropdown.
How can i achieve this.
For example :-
In the given demo site http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
CityFilter has a option of "SelectValue" dropdown which contains City Values.
I need all the City Values using telerik testing framework
How should i achieve this

[Elena]

Hi Aditya,

Thank you for your interest in Test Studio. 

Please find a sample article which provides a coded solution how to loop through grid items. Similar to this you could locate the filter menu on the sample page you shared and store all of its list items into a collection. Then using a foreach statement, for example, you could write each list item inner text to the log file or use it for your needs.  

Here is how you could locate the element in code without using the Pages,cs file. 

Regards,
Elena Tsvetkova
Progress Telerik