Front End Testing with Hobbes.js

Introduction to Hobbes:

AEM 6.0 has come up with a new framework for a functional testing system. It uses Hobbes.js, a testing library written in JavaScript. This framework helps to automate UI tests and provide us with a test result. We can write and execute tests from a web browser. The framework also provides us with a Test Panel in the Touch-Optimized UI where the tests can be executed.

Level of Expertise

AEM Developer – Intermediate

 

Concept:

This blog is intended for AEM developers who perform UI testing for their applications. This framework enables them to automate their test scripts and execute them on their webpages.

Requirements:

The minimum requirements to test the AEM applications using Hobbes are,

1. Java 1.7+
2. AEM 6.0
3. CRXDE Lite

The framework helps us to perform the following:

1. Create a Test Suite
2. Add Test Cases
3. Add actions to Test Cases
4. Re-use Test Cases
5. Use Dynamic Parameters
6. Delay Test Execution

Before creating a Test Suite for any web page, the below steps need to be followed.

Create a new Test Client Library Folder

1. Create a ClientLibraryFolder.
   1. Open CRXDE Lite in your web browser.
   2. Navigate to “etc/clientlibs/testsuites” folder.
   3. Create a new folder under clientlibs.
      1. Right click on “clientlibs” and click “Create à Create Node”.
      2. Enter the details for the node,
         1. Name: geometrixtestsuite
         2. Type: nt:unstructured

3.  Add the following properties to the node.

The above properties recognize the folder as a test and provide access to the framework API.

 

 

1. Create a Test Suite

A test suite is a collection of test cases. To create a test suite we need to first create a JavaScript file which creates the hobs.TestSuite object.

1. The hobs.TestSuite() creates a new object.
2. The first parameter to the constructor will be the name of the Test Suite that would be displayed in the Test Panel under the Developer Mode.
3. The second parameter is the path to the JavaScript file in the client library folder. This path enables the user to open the script from the Test Panel.
4. There is an optional parameter ‘registerSuite’ which is true by default. When explicitly set to false, it hides the test suite from appearing.

 

2. Add Test Cases

Test cases can be added to the test suite to execute a set of cases that can be performed on the webpage. The test cases will be listed below their respective test suites in the Tests Panel. The addTestCase method helps us to create a new test case.

The hobs.addTestCase method can have two parameters.

• The first parameter is the name of the test case that will appear below the test suite in the Tests Panel.
• The second parameter is optional and can have options that would support execution delay and Demo mode of the test cases.

3.  Add Action to Test Cases

Actions can be added to the test cases which help us to perform steps like the below;

From the above piece of code, we will be able to add 4 testcases which perform different actions each. Actions like mouseover, navigateTo and click are performed here. The ‘hasCssClass’ is also used in the above example, which is a method of the hobs.actions.Asserts class.

4. Asserts:

The Asserts class provides us with a set of assertion methods which can be used along with the actions to verify the fields and their properties. An example on the usage of the assertion methods;

1. hasCssClass: This method checks for the class attribute of the element that is selected. The method accepts parameters;
   • selector: The jQuery selector for the element to be checked.
   • cssClass: The class of the selected element.
   • hasClass: The class of the element to be verified with.
   • options: Accepts “timeout” and “delay” options.
2. cssAttribute: This method checks for the attribute of the selected element. The method accepts parameters;
   • selector: The jQuery selector for the element to be checked.
   • cssAttr: The attribute of the selected element.
   • hasClass: The value for the attribute of the element.
   • isTrue: If true, expects the attribute, or otherwise.
3. exists: This method checks if the selected element exists. The method accepts parameters;
   • selector: The jQuery selector for the element to be checked for existence.
   • doesExist: checks for the existence of the element.
4. isEnabled: This method checks if the selected element is enabled or disabled. The method accepts parameters;
   • selector: The jQuery selector for the element to be checked.
   • isEnabled: Checks if the element is enabled or disabled.
5. location: This method checks if the current URL is equal to the one passed to it.
   • url: The URL, the current page should be verified with.
   • isTrue: Checks if the URL of the current page is the same as the one passed.

The methods isTrue and isFalse are also part of the Asserts class. These methods take custom assertion functions as inputs and test the result of the same. The method also takes delay and timeout as parameters. The delay sets the interval between each execution of the function. Meanwhile, the timeout, verifies if the assertion function executes within the specified timout period.

5. Core:

The Core class provides a set of methods which can be used as actions in our test cases. These actions help us to navigate through pages and verify events. An example of the Core methods used in the test case;

In the above example, we have used the core methods like,

1. navigateTo: This methods performs the action of navigating from the current page to the specified URL.
   • url: The URL to be navigated to.
2. mouseover: This method triggers the mouseover event on the specified element.
   • selector: The jQuery selector of the element.
3. click: This method performs the action of clicking on the specified element.
   • selector: The jQuery selector of the element.
4. fillInput: This method performs the action of setting the value attribute with the specified value.
   • selector: The jQuery selector of the element.
   • text: The text to be filled in the selected element.
5. mouseout: This method triggers the mouseout event on the specified element.
   • selector: The jQuery selector of the element.
6. reloadPage: This method the reloads the current page.
7. wait: This method waits for the specified time before executing the remaining test cases.
   • time: The waiting time in milliseconds.
8. typeInput: This method fills the text in the selected element, typing character by character. This method triggers the input event after each character entered.
   • selector: The jQuery selector of the element.
   • text: The text to be typed in the selected element.
9. execTestCase: This method executes the specified test case which is existing or registered.
   • testcase: The name of the test case to be executed.
   • resetURL: The URL to be stored before executing the specified test case. Post execution, the page will be reverted back to this URL.
   • extraParams: Any extra parameters to this method.

The Core class has another method, execSyncFct which take custom Javascript functions as input. This method also provides us with the delay and timeout options similar to the Asserts class.

6. Reusing & Chaining of Test Cases:

Test cases can be reused in more than one Test Suites by registering them. Chained testcases help us to execute a group of steps through a single test case. They are also helpful when we need the execute the same set of steps in multiple places. Each test case created for reuse must be registered by using the hobs.framework.Manager.registerChain method.

The registered test cases can be reused in our Test Suites, by using the execTestCase method and passing the test case name as its parameter.

7. Order of Execution for Chained Test Cases:

The order of execution for the Chained test cases can be configured. The test case can be executed either before or after the Test Suite or Test Case. The options need to configured while creating the TestCase or TestSuite objects in order to execute them accordingly.

As shown, the order can be defined for the Test Suite or the Test Case by adding it to the object while creation.

8. Dynamic Parameters:

Dynamic parameters can be used and registered in our test cases. A dynamic parameter can be created with a default value. This parameter can be used across all the Test Suites and Test Cases. This parameter can also be overridden in individual Test Suites when required. This practice avoids hardcoding parameters in our test cases.

A dynamic parameter can be registered by calling the hobs.framework.Manager.registerParameter(name, value) method. Once registered the parameter can be used by its name across the Test Suites.

The dynamic parameter can be read by using the method hobs.getParam.name() method.

The dynamic parameters can be overridden in the TestSuite or TestCase by assigning a value to it while creating the objects.

9. Delay Execution:

The execution of a test case can be delayed by setting the delay attribute of the hobs.TestCase method. The units are milliseconds.

Test Execution and Result:

The tests can be executed from the web browser.

1. Open the page in Touch-UI mode.
2. Select ‘Developer Mode’.
3. In the left panel, click on the ‘Tests’ panel.
4. Click on the play button to execute the ‘Geometrix Media Test Suite’ from the list of all Test Suites.
5. As the Test Suite is executing, the test cases that have executed successfully will display a green check before it. For failed test cases, a red cross will be displayed.

In the above screenshot, as we can see all the test cases from the ‘Geometrix Media Test Suite’ have executed successfully.