DocumentationAEM 6.4Developing Guide

Testing Your UI testing-your-ui

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

AEM provides a framework for automating tests for your AEM UI. Using the framework, you write and run UI tests directly in a web browser. The framework provides a javascript API for creating tests.

The AEM test framework uses Hobbes.js, a testing library written in Javascript. The Hobbes.js framework was developed for testing AEM as part of the development process. The framework is now available for public use for testing your AEM applications.

NOTE
Refer to the Hobbes.js documentation for full details of the API.

Structure of Tests structure-of-tests

When using automated tests within AEM, the following terms are important to understand:

Action
An Action is a specific activity on a web page such as clicking a link or a button.
Test Case
A Test Case is a specific situation that can be made up of one or more Actions.
Test Suite
A Test Suite is a group of related Test Cases that together test a specific use case.

Executing Tests executing-tests

Viewing Test Suites viewing-test-suites

Open the Testing Console to see the registered Test Suites. The Tests panel contains a list of test suites and their test cases.

Navigate to the Tools console via Global Navigation -> Tools > Operations -> Testing.

chlimage_1-26

When opening the console, the Test Suites are listed to the left along with an option to run all of them sequentially. The space to the right shown with a checkered background, is a placeholder for showing page content as the tests run.

chlimage_1-27

Running a Single Test Suite running-a-single-test-suite

Tests Suites can be run individually. When you run a Test Suite, the page changes as the Test Cases and their Actions are executed and the results appear after completion of the test. Icons indicate the results.

A checkmark icon indicates a passed test:

An “X” icon indicates a failed test:

To run a Test Suite:

  1. In the Tests panel, click or tap the name of the Test Case that you want to run to expand the deatils of the Actions.

    chlimage_1-28

  2. Click or tap the Run test button.

  3. The placeholder is replaced with page content as the test executes.

    chlimage_1-29

  4. Review the results of the Test Case by tapping or clicking the description to open the Result panel. Tapping or clicking the name of your Test Case in the Result panel shows all details.

    chlimage_1-30

Running Multiple Tests running-multiple-tests

Test Suites execute sequentially in the order that they appear in the console. You can drill down into a test to see the detailed results.

chlimage_1-31

  1. On the Tests panel, tap or click either the Run all tests button or the Run tests button below the title of the Test Suite that you want to run.

  2. To view the results of each Test Case, tap or click the title of the Test Case. Tapping or clicking the name of your test in the Result panel shows all details.

    chlimage_1-32

Creating and Using a Simple Test Suite creating-and-using-a-simple-test-suite

The following procedure steps you through the creation and execution of a Test Suite using We.Retail content, but you can easily modify the test to use a different web page.

For full details about creating your own Test Suites, see the Hobbes.js API documentation.

  1. Open CRXDE Lite. (http://localhost:4502/crx/de)

  2. Right-click the /etc/clientlibs folder and click Create > Create Folder. Type myTests for the name and click OK.

  3. Right-click the /etc/clientlibs/myTests folder and click Create > Create Node. Use the following property values and then click OK:

    • Name: myFirstTest
    • Type: cq:ClientLibraryFolder

  4. Add the following properties to the myFirstTest node:

    table 0-row-3 1-row-3 2-row-3
    Name Type Value
    categories String[] granite.testing.hobbes.tests
    dependencies String[] granite.testing.hobbes.testrunner
    note note
    NOTE
    AEM Forms only
    To test adaptive forms, add the following values to the categories and dependencies. For example:
    categories: granite.testing.hobbes.tests, granite.testing.hobbes.af.commons
    dependencies: granite.testing.hobbes.testrunner, granite.testing.hobbes.af

  5. Click Save All.

  6. Right-click the myFirstTest node and click Create > Create File. Name the file js.txt and click OK.

  7. In the js.txt file, enter the following text:

    code language-none 
    #base=.
myTestSuite.js

  8. Click Save All and then close the js.txt file.

  9. Right-click the myFirstTest node and click Create > Create File. Name the file myTestSuite.js and click OK.

  10. Copy the following code to the myTestSuite.js file then save the file:

    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. Navigate to the Testing console to try your test suite.

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