用于基于 ExtJS 的 Web 应用程序的 UI 测试的框架和工具答案

【问题标题】：Frameworks and tools for UI testing of ExtJS based web apps用于基于 ExtJS 的 Web 应用程序的 UI 测试的框架和工具
【发布时间】：2012-03-29 22:31:11
【问题描述】：

我想测试一个经过彻底重新设计以使用 ExtJS 驱动其 UI 的网络应用程序。

我已经进行了一些在线搜索，但找不到任何关于一个好的框架来正确处理它的建议。

到目前为止，我们一直在使用 WatiN 来创建测试。

请注意，我们不拥有网络应用代码。

目前最好的选择是什么？

【问题讨论】：

标签： javascript testing extjs automated-tests ui-automation

【解决方案1】：

您应该考虑使用 Siesta，它是一个单元测试和功能测试工具，旨在帮助您测试 Ext JS 和 Sencha Touch（Sencha 内部也使用它来测试 Ext JS 本身）。由于 Siesta 对 Ext JS 了解很多，因此您可以使用 Component Query 而不是 CSS 编写富有表现力的测试，并且与此线程中其他答案中描述的更简单的工具相比，可以获得更健壮的测试。以下是纯 JS 中的示例测试脚本：

t.chain(
    { click : ">>textfield[name=user]" },

    { type : "Mike[TAB]Password" },

    { click : ">>button[name=loginbutton]" }
);

免责声明：我为创建它的公司工作。

http://www.bryntum.com/products/siesta/

【讨论】：

【解决方案2】：

您是希望对您的网页进行直接的功能测试，还是希望将测试范围缩小到 ExtJS 中的 JavaScript？

如果是前者（UI 级别的功能），那么 WatiN/Watir/Webdriver 应该适合您。（如果他们不工作，那么我很想获得有关您遇到的特定问题的更多详细信息。）

如果是后者，那么您可能会研究 Jasmine，它提供了许多有趣的功能，可在 UI 层对您的 JavaScript 进行单元测试。

（如果是功能测试，您还可以查看 Telerik's Test Studio 以了解功能自动化。我是该工具的传播者，所以我有点偏见......）

【讨论】：

谢谢。我已经从 Telerik 下载了一些免费的 web 测试框架，我想知道你是否是同样的意思。我对 ExtJS 以及它是如何构建的不是很熟悉，所以我想知道 WatiN 或类似的框架是否可以正确处理它。
BTE 您能否详细说明功能测试和 JS 相关测试之间的区别？例如，哪些测试属于后者？
功能测试将驱动浏览器执行诸如验证您是否能够将商品放入购物车之类的事情。 WatiN/Watir/Selenium 和 Test Studio 在这方面都很棒。（您从 Telerik 获得的免费框架是完整的独立版 Test Studio 的基础。通过 Jasmine 进行 JavaScript 测试可以让您为浏览器内的 JavaScript 编写单元/集成测试。这可以让您执行测试验证之类的操作或您的 JavaScript 中的其他逻辑/行为。

【解决方案3】：

您可能想查看RIATest。

5.0 版完全支持 ExtJS 测试。 ExtJS UI 小部件是 RIATest 中的一等公民。这意味着与其他 HTML 测试工具不同，您不需要编写操作 HTML DOM 元素的测试。 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 还知道何时自动等待 ExtJS AJAX 完成，因此如果您的 UI 下载动态内容，测试将自动神奇地等待，直到从服务器接收到数据。

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

【讨论】：

【解决方案4】：

Sahi 是我最近使用的自动化和测试工具，因为我与您进行了类似的搜索... Selenium 对我没有用（因为它对网络上的许多人都没有用...还没有找到任何可以做到的东西工作...动态 ID 和其他与 Ext 相关的特殊性显然与它混淆）...

看看 sahi 或许会有用... www.sahi.co.in （我没有关系，我最近发现它，发现它很有用）。

【讨论】：

【解决方案5】：

您想做功能测试。 Selenium 是个不错的选择。它具有多种语言（Java、Ruby、Python）的 API 实现，并在后台使用 Webdriver。

【讨论】：

我们已经在使用 WatiN，不确定它与 Selenium 有何不同。重点是我们需要轻松支持ExtJS。

【解决方案6】：

Ranorex 也可以处理 Ext-J，尽管将其变成一等公民需要一些自定义编码。一般来说，秘诀是避免使用 id 进行对象识别，因为它们会改变并使用 innertext 属性。

【讨论】：

【解决方案7】：

个人发现在某些地方使用带有 extjs 片状的 xpath。

您最好（在 Java 中）编写一个使用 JavaScript 组件查询来提取元素 ID 的方法。（如果有的话）

【讨论】：