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?