使用CasperJS/PhantomJS测试ExtJS webapp的UI

Question

我正在进行UI测试ExtJS网络应用程序,我是初学者.我试图使用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.如何在测试中提供数据？是否存在任何与代码中的ExtJ一起使用的存根或模拟工具,以便在测试期间在运行时提供这些ID？

我遇到了SinonJS.是否可以使用或者我是否需要使用此答案中提到的CSS或XPath定位器？使用CSS或Xpath定位器的可靠性如何？

提前致谢!

Answer 1

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

1. 不要依赖生成的ID.决不.他们会在你不喜欢的时刻改变,如果你早点运气的话.

2. 您最好的朋友可能是您附加到组件的伪CSS类.您也可以使用ID,但只有在页面中只出现一次的元素时,这才是合理的.如果是这种情况,那么它们就是选择/查询的良好锚点.

3. 可以使用带有ExtJS的XPath,但您必须仔细选择元素.ExtJS在生成小东西时非常冗长,所以你的路径可能非常复杂.当Sencha放弃对有问题的浏览器(IE <8)的支持时,他们可能会更改他们的模板,而XPath也找不到任何东西.

4. SinonJS很棒.但它对DOM问题没有多大帮助.但是你一定可以在测试中使用它.我想它在测试控制器或非平凡模型的部分时会得到最多回报.

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

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