Testing Kendo UI Grid with Selenium / Geb

Question

I'm trying to write a functional test for a Kendo UI Grid in my application. In my test, I click on a button to add a new row to the grid, I then want to move through each of the cells, assigning a value to the input field contained in the cell as I go. I can do this 'by hand' in a browser, and it works with no issues. However, if I try to automate this process using Geb, the value entered into each cell is cleared out as soon as I tab away from the input field.

One observation is that when I perform this test by hand, once I enter a value in the input I see a black triangle (i.e. the kendo 'dirty' icon) appear in the top left hand corner of the input. If I try to do this programmatically in my test, I do not see this icon.

I have tried various different methods for populating the input field, such as:

1. productDescriptionField.find("input",0).value("some description")
2. productDescriptionField.find("input",0) << "some description"
3. (driver as JavascriptExecutor).executeScript("jQuery('.k-input').val('some description')")

where productDescriptionField is a geb selector for the input field shown in the HTML snippet below:

<td data-role="editable" class="k-edit-cell" id="grid_active_cell" role="gridcell">
    <input data-bind="value:description" name="description" class="k-input k-textbox" type="text">
</td>

How can I better simulate what I, as a human being using a web browser, do when interacting with the kendo grid?

Answer 1

the problem seems to be, that the grid is not aware of the programmatically change of the input field. this happens because the change-event of the grid is not fired if this is done programatically. Due to this, you just have to trigger the change event by yourself (change-kendo-html-input-field-programmatically).

In your case your third option should be changed to the following:

var changeValue = "$('.k-input').val('some description')";
var triggerChange = "$('.k-input').change();"
(driver as JavascriptExecutor).executeScript(changeValue + "; " + triggerChange)