ExtJS 功能测试 - 获取 ExtJS 控件的内部元素

Question

我们决定在新产品的客户端使用 Sencha ExtJS，并计划在客户端进行自动化功能测试。我们研究了几种工具，如 Ranorex、Selenium、Telerik Test Studio 等，到目前为止，我们比其他人更喜欢 Test Studio。无论如何，无论人们可能使用哪种工具，我提出的问题都是相关的。

我很想知道获取 extjs 控件的内部元素的推荐方法是什么。为了清楚起见，我将举一个例子。

我有一个数字字段控件，我想测试一下，如果我单击“向上”按钮，该字段中的值将增加一个单位。请注意，我确实为数字字段设置了唯一 ID (id="testDurationHourNumberField")。 number 字段具有以下(简化的)DOM 结构:

<table id="testDurationHourNumberField">
<tbody>
    <tr id="testDurationHourNumberField-inputRow">
        <td id="testDurationHourNumberField-labelCell">
            <label id="testDurationHourNumberField-labelEl">Label:</label>
        </td>
        <td id="testDurationHourNumberField-bodyEl">
            <table id="testDurationHourNumberField-triggerWrap">
                <tbody>
                    <tr>
                        <td id="testDurationHourNumberField-inputCell">
                            <input id="testDurationHourNumberField-inputEl">
                        </td>
                        <td>
                            <div role="button" id="ext-gen1211"></div>
                            <div role="button" id="ext-gen1212"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
</table>

为此，我必须访问输入元素 (id="testDurationHourNumberField-inputEl") 和按钮 (id="ext-gen1211")。访问这两个元素的推荐方式是什么？

到目前为止，我有以下选择:

使用 ExtJS 内部 ID - 看起来不太好，因为:

这些是内部 ID，它们不受我的控制，如果我稍后在页面上添加另一个控件，它们可能会更改

似乎对于同一个页面，我在不同的浏览器中获得了不同的 ID。例如，在 IE 10 中，我获得的按钮 ID 与我在 Google Chrome 中获得的 ID 不同。

通过唯一 ID 获取控件并通过了解其内部 DOM 结构或属性来获取内部元素 - 看起来不太好，因为:

我宁愿不使用这种方式，因为我不知道升级到下一版本的 ExtJS 时，内部 DOM 结构不会改变或某些属性名称会改变，我将不得不更新我创建的测试

例如伪代码:getById('testDurationHourNumberField').getElementByAttributeAndIndex('role=button', 0)

你能告诉我推荐的方法是什么吗？

谢谢，
保罗

Answer 1

这就是我在我的项目中的做法:

it("should increment the control value", function () {
    var ctrl = Ext.ComponentQuery.query('#age')[0],
        upBtn = Ext.ComponentQuery.query('#upButton')[0],
        curValue = ctrl.getValue();

    upBtn.fireEvent('click');

    expect(ctrl.getValue()).toEqual(curValue + 1);
});

我用 Jasmine 。

更新:

对于功能测试，您应该阅读以下内容:

Any suggestions for testing extjs code in a browser, preferably with selenium?
还有这个:

http://www.sencha.com/blog/testing-ext-js-ext-gwt-applications-with-selenium