使用 CasperJS/PhantomJS 测试 ExtJS webapp 的 UI

Question

我正在对 ExtJS 网络应用程序进行 UI 测试，而且我是初学者。 我正在尝试使用 CasperJS/PhantomJS 工具测试 ExtJS 小部件。 此外，我使用Resurrectio 生成所需的 CasperJs 脚本，并对它进行必要的更改。

由于 ExtJs 为它创建的 DOM 元素动态生成唯一的 id，我想知道如何在 CasperJs 脚本中提供这些 id 以进行测试。

例如，以下 Casper 脚本是由 Resurrectio 生成的：

   casper.waitForSelector("#ext-gen1142 .x-tree-icon.x-tree-icon-parent",
       function success() {
           test.assertExists("#ext-gen1142 .x-tree-icon.x-tree-icon-parent");
           this.click("#ext-gen1142 .x-tree-icon.x-tree-icon-parent");
       },
       function fail() {
           test.assertExists("#ext-gen1142 .x-tree-icon.x-tree-icon-parent");
   });
   casper.waitForSelector("#gridview-1038",
       function success() {
           test.assertExists("#gridview-1038");
           this.click("#gridview-1038");
       },
       function fail() {
           test.assertExists("#gridview-1038");
   });

这里的#ext-gen1142 和#gridview-1038 是动态创建的ID。应该如何在测试中提供数据？是否有任何存根或模拟工具可以在代码中与 ExtJs 一起使用，以便在测试期间在运行时提供这些 id？

我遇到了SinonJS。它可以使用还是我需要使用answer 中提到的 CSS 或 XPath 定位器？使用 CSS 或 Xpath 定位器有多可靠？

提前致谢！

Answer 1

回答这个问题并不容易，但这里有一些想法......

1. 不要依赖生成的 ID。绝不。它们会在你不喜欢的时刻发生变化，如果你很早运气好的话。

2. 您最好的朋友可能是您附加到组件的伪 CSS 类。您也可以使用 ID，但这仅在您的页面中仅出现一次的元素时才合理。如果是这种情况，它们是非常好的锚点，可以从选择/查询开始。

3. 使用 ExtJS 的 XPath 是可能的，但您必须仔细选择元素。 ExtJS 在生成小东西方面非常冗长，因此您的路径可能非常复杂。当 Sencha 放弃对有问题的浏览器（IE

4. SinonJS 很棒。但它在 DOM 问题上对您没有多大帮助。但请确保您可以在测试中使用它。我想它会在测试部分控制器或非平凡模型时获得最大的回报。

5. 根据真实的 UI 组件和屏幕部分对测试组件进行建模。不要只录制脚本。测试代码应该像生产代码一样设计。如果您创建可重用的测试代码和逻辑组件，则不必担心更改。在最好的情况下，一个组件的更改只会触及该特定组件的测试代码。

6. 我知道你有 ExtJS。但是花点时间看看 AngularJS，看看测试 JavaScript Web 应用程序的所有部分是多么容易。我并不是说你应该切换到 AngularJS，但你可以学到很多东西。看看Deft JS，因为它有许多增强 ExtJS 应用程序可测试性的概念。

Answer 2

我使用 Siesta 进行 ExtJs 测试。它对所有 JavaScript（基于 jQuery 和其他）都非常有效，但它是专门为 ExtJS/Sencha Touch 设计的。

它具有结合 CSSquery 和 ComponentQuery 来选择您的元素的功能，我认为这将为您解决很多问题。

在付费版本中，甚至还有一个测试记录器来记录场景并将它们用于您的测试。

这是demo

下面是一些示例代码：

StartTest(function(t) {
    t.chain(
        { waitFor : 'CQ', args : 'gridpanel' },

        function(next, grids) {
            var userGrid = grids[0];

            t.willFireNTimes(userGrid.store, 'write', 1);
            next();
        },

        { waitFor : 'rowsVisible', args : 'gridpanel' },

        { action : 'doubleclick', target : 'gridpanel => .x-grid-cell' },

        // waiting for popup window to appear
        { waitFor : 'CQ', args : 'useredit' },

        // When using target, >> specifies a Component Query
        { action : 'click', target : '>>field[name=firstname]'},

        function(next) {
            // Manually clear text field
            t.cq1('field[name=firstname]').setValue();
            next();
        },

        { action : 'type', target : '>>field[name=firstname]', text : 'foo' },

        { action : 'click', target : '>>useredit button[text=Save]'},

        function(next) {
            t.matchGridCellContent(t.cq1('gridpanel'), 0, 0, 'foo Spencer', 'Updated name found in grid');
        }
    );
})