Testing Your UI 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 structure-of-tests
When using automated tests within AEM, the following terms are important to understand:
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.
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 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:
-
In the Tests panel, click the name of the Test Case that you want to run to expand the details of the Actions.
-
Click Run test.
-
The placeholder is replaced with page content as the test executes.
-
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 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.
-
On the Tests panel, click either the Run all tests button or the Run tests button below the title of the Test Suite that you want to run.
-
To view the results of each Test Case, click the title of the Test Case. Clicking the name of your test in the Result panel shows all details.
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.
-
Open CRXDE Lite. (https://localhost:4502/crx/de)
-
Right-click the
/etc/clientlibs
folder and click Create > Create Folder. TypemyTests
for the name and click OK. -
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
- Name:
-
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
-
Click Save All.
-
Right-click the
myFirstTest
node and click Create > Create File. Name the filejs.txt
and click OK. -
In the
js.txt
file, enter the following text:code language-none #base=. myTestSuite.js
-
Click Save All and then close the
js.txt
file. -
Right-click the
myFirstTest
node and click Create > Create File. Name the filemyTestSuite.js
and click OK. -
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") );
-
Navigate to the Testing console to try your test suite.