测试 extjs 应用程序

Posted 2023-02-26

【中文标题】测试 extjs 应用程序

【英文标题】：Testing extjs apps

【发布时间】：2012-12-05 16:10:16

【问题描述】：

当组件或组件部件（如网格中的组件）有预先生成的 id 时，我如何。

我可以为每个组件添加 ID，但如果我错过了一个或多个，并且应用程序又大又复杂怎么办？

ExtJS/Siesta 中是否有一个函数或某些模块允许您在应用程序中定位组件/元素，而不依赖于每个组件的预定义 ID

【问题讨论】：

您可以显式设置元素的 ID 并使用 Ext.get 或 Ext.getCmp

普遍的共识似乎是：小心 cmp.id，使用 itemId 和 'this.down('#' + theItemId);' （或“this.up（）”）代替。在这里，我们谈论的是 ExtJS.ComponentQuery，它为您提供了其他可以玩的东西，例如类名、xtypes 和 css 类（如 jQuery 选择器）

【参考方案1】：

首先是very careful using IDs on the components。我已经看到了我与他们相当多的问题。

其次，ExtJS 提供了几种定位组件和元素的方法。不要将两者混为一谈。

对于组件：

Ext.getCmp(id) Ext.ComponentQuery.query() up() down() nextSibling() previousSibling() child() previousNode()

加上各种find..方法

对于元素：

Ext.get() Ext.dom.Query()

更多关于 DOM 查询http://docs.sencha.com/core/manual/content/domquery.html

【参考方案2】：

使用 Siesta，您在定位要点击的位置等时有很多选项：

Dom 节点 ID（与 Ext 组件 ID 相同） 任何组件查询 任何 CSS 查询 坐标 真正的Ext Component JS实例 真实的 DOM 节点实例 复合查询（组件查询和 CSS 查询的组合，'.x-grid => .x-grid-cell' 一个函数，返回上述任何一个。

我的幻灯片中的更多信息在这里：https://speakerdeck.com/mats/testing-sencha-touch

【参考方案3】：

您可能想查看自动化功能 GUI 测试工具RIATest。

RIATest 知道如何忽略 ExtJS 动态生成的 id，但如果您手动将 id 分配给组件，该工具将使用它们进行识别（参见例如下面示例中的 #tree2）。

RIATest 中的测试根据 ExtJS UI 小部件运行。

使用 ExtJS 小部件的 RIATest 脚本示例：

以下点击带有“下一页”标签的 ExtJS 按钮：

ExtButton("Next Page")=>click();

以下内容将一行从一个 ExtJS 树拖放到另一个：

ExtRow("Controller.js")=>dragAndDropTo(
    ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));

这会折叠 ExtJS 框的标题：

ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();

（以上所有示例代码均来自在 ExtJS 示例应用程序上运行的真实测试脚本）。

（免责声明：我是 RIATest 团队成员）。