Testing Your UI

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.

Structure of Tests

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

Executing Tests

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.

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.

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.

   

2. Click or tap the Run test button.

   

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

   

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.

   

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.

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.

   

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. (https://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:

   Name	Type	Value
   categories	String[]	granite.testing.hobbes.tests
   dependencies	String[]	granite.testing.hobbes.testrunner

   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:

   #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:

    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.

Business.Adobe.com resources

Automated Onboarding Customer Communications Content As A Service Customer Experience Management Dynamic Forms Digital Rights Management