测试您的UI testing-your-ui

CAUTION
AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

AEM为AEM UI的测试自动化提供了一个框架。 使用框架,您可以直接在Web浏览器中编写和运行UI测试。 该框架提供了用于创建测试的Javascript API。

AEM测试框架使用Hobbes.js,这是一个使用Javascript编写的测试库。 Hobbes.js框架是作为开发过程的一部分,用于测试AEM。 该框架现已可供公众用于测试AEM应用程序。

NOTE
请参阅Hobbes.js 文档 以了解API的完整详细信息。

测试结构 structure-of-tests

在AEM中使用自动测试时,以下术语很重要,需要了解:

操作
操作 是网页上的特定活动,如单击链接或按钮。
测试用例
A 测试用例 是由一个或多个组成的特定情况 操作.
测试套件
A 测试套件测试用例 一起测试特定用例。

执行测试 executing-tests

查看测试包 viewing-test-suites

打开测试控制台以查看注册的测试包。 “测试”面板包含测试包及其测试用例的列表。

通过导航到“工具”控制台 全局导航 — >工具>操作 — >测试.

chlimage_1-26

打开控制台时,测试包将列在左侧,并提供一个选项以按顺序运行所有测试包。 右侧带有方格背景的空格是在测试运行时显示页面内容的占位符。

chlimage_1-27

运行单个测试包 running-a-single-test-suite

测试包可以单独运行。 运行测试包时,页面会随测试用例及其操作的执行而发生更改,并且结果会在测试完成后显示。 图标指示结果。

复选标记图标表示通过的测试:

“X”图标表示测试失败:

要运行测试包,请执行以下操作:

  1. 在“测试”面板中,单击或点按要运行的测试案例名称,以展开操作的详细信息。

    chlimage_1-28

  2. 单击或点按 运行测试 按钮。

  3. 测试执行时,占位符将替换为页面内容。

    chlimage_1-29

  4. 通过点按或单击描述以打开 结果 的上界。 在 结果 面板会显示所有详细信息。

    chlimage_1-30

运行多个测试 running-multiple-tests

测试包按它们在控制台中的显示顺序依次执行。 您可以深入到测试中,查看详细结果。

chlimage_1-31

  1. 在测试面板上,点按或单击 运行所有测试 按钮或 运行测试 按钮。

  2. 要查看每个测试用例的结果,请点按或单击测试用例的标题。 在 结果 面板会显示所有详细信息。

    chlimage_1-32

创建和使用简单的测试包 creating-and-using-a-simple-test-suite

以下过程将指导您使用 We.Retail内容,但您可以轻松修改测试以使用其他网页。

有关创建您自己的测试包的完整详细信息,请参阅 Hobbes.js API文档.

  1. 打开CRXDE Lite。 (http://localhost:4502/crx/de)

  2. 右键单击 /etc/clientlibs 文件夹,单击 创建>创建文件夹. 类型 myTests ,然后单击 确定.

  3. 右键单击 /etc/clientlibs/myTests 文件夹,单击 创建>创建节点. 使用以下属性值,然后单击 确定:

    • 名称: myFirstTest
    • 类型: cq:ClientLibraryFolder
  4. 将以下属性添加到myFirstTest节点:

    table 0-row-3 1-row-3 2-row-3
    名称 类型 价值
    categories String[] granite.testing.hobbes.tests
    dependencies String[] granite.testing.hobbes.testrunner
    note note
    NOTE
    仅AEM Forms
    要测试自适应表单,请将以下值添加到类别和依赖项中。 例如:
    类别: granite.testing.hobbes.tests, granite.testing.hobbes.af.commons
    依赖: granite.testing.hobbes.testrunner, granite.testing.hobbes.af
  5. 单击 全部保存.

  6. 右键单击 myFirstTest 节点,单击 创建>创建文件. 命名文件 js.txt 单击 确定.

  7. js.txt 文件中,输入以下文本:

    code language-none
    #base=.
    myTestSuite.js
    
  8. 单击 全部保存 然后关闭 js.txt 文件。

  9. 右键单击 myFirstTest 节点,单击 创建>创建文件. 命名文件 myTestSuite.js 单击 确定.

  10. 将以下代码复制到 myTestSuite.js 文件,然后保存文件:

    code language-none
    new hobs.TestSuite("Experience Content Test Suite", {path:"/etc/clientlibs/myTests/myFirstTest/myTestSuite.js"})
       .addTestCase(new hobs.TestCase("Navigate to Experience Content")
          .navigateTo("/content/we-retail/us/en/experience/arctic-surfing-in-lofoten.html")
       )
       .addTestCase(new hobs.TestCase("Hover Over Topnav")
          .mouseover("li.visible-xs")
       )
       .addTestCase(new hobs.TestCase("Click Topnav Link")
          .click("li.active a")
    );
    
  11. 导航到 测试 控制台来尝试您的测试包。

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e