使用 Selenium / Geb 测试 Kendo UI Grid

Posted 2023-05-07

【中文标题】使用 Selenium / Geb 测试 Kendo UI Grid

【英文标题】：Testing Kendo UI Grid with Selenium / Geb

【发布时间】：2014-06-08 11:17:20

【问题描述】：

我正在尝试在我的应用程序中为 Kendo UI Grid 编写功能测试。在我的测试中，我单击一个按钮以向网格中添加一个新行，然后我想在每个单元格中移动，同时为单元格中包含的输入字段分配一个值。我可以在浏览器中“手动”执行此操作，并且没有问题。但是，如果我尝试使用 Geb 自动执行此过程，则输入到每个单元格中的值会在我离开输入字段时立即清除。

一个观察结果是，当我手动执行此测试时，一旦我在输入中输入一个值，我会在输入的左上角看到一个黑色三角形（即剑道“脏”图标）。如果我在测试中尝试以编程方式执行此操作，则看不到此图标。

我尝试了各种不同的方法来填充输入字段，例如：

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')")

其中productDescriptionField 是下面html sn-p 中显示的输入字段的geb 选择器：

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

作为一个使用网络浏览器的人，我如何更好地模拟我在与剑道网格交互时所做的事情？

【参考方案1】：

问题似乎是，网格不知道输入字段的编程更改。发生这种情况是因为如果以编程方式完成，则不会触发网格的change-event。因此，您只需要自己触发更改事件 (change-kendo-html-input-field-programmatically)。

在您的情况下，您的第三个选项应更改为以下内容：

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

【讨论】：

看起来很有希望 - 我明天试试。