This article covers how to automate AEM front end using hobbes.js framework, the Hobbes framework is written in Javascript to test AEM as part of development
Just question your self while developing AEM component have you ever thought about doing a unit test on the front end using some automation tools? I think most of the people are “No”, as a java developer we always think about testing server side code using Powermockito and mockito framework’s but, what about front end testing? we simply say that it is not my job or I don’t know javascript?
How many late nights did you spend at the office to do the regression testing? how much time did you spend on clicking same buttons and same user flow? was it not boring? can we not automate this?
The AEM OOTB hobbes framework will help you to automate the UI testing, it has a lot of features you can create a test suite, add test cases to test suite’s,  adding actions to test cases and reusing test cases etc…
If you are familiar with JUnit’s or any testing framework then it is very easy to understand, the difference between JUnit and hobbes is the JUnit’s executes at server side and the hobbes framework executes at client-side and like any other testing framework the hobbes also support writing a test case and test suite
We are using javascript to write  test case using hobbes framework generally in AEM we place all our js files into the clientlib folder so the first thing is we must create client lib in our local environment to place all javascript based test cases

Step 1: creating clientlibs

  • Go to the crxde light and right click on etc/designs
  • Create a new folder called toolkit
  • Under toolkit create a new folder called “clientlibs” and the primary type for this is cq:ClientLibraryFolder
  • Add the below properties to the clientlibs folder
categories = granite.testing.hobbes.tests
dependencies = granite.testing.hobbes.testrunner

Step 2: Write test cases

Create a new js file and add below code, the only thing which you need to understand to write test cases on hobbes framework  is Jquery based selectors and events, if you see below code the test suite takes two parameters suite name and script path

new hobs.TestSuite("KeysandStrokesSuite", {path: "/etc/designs/toolkit/clientlibs/script.js"})

You can add more than one test case to test suite here, as part of POC I just added only one but, you can add more than one by creating a new instance

new hobs.TestSuite("KeysandStrokesSuite", {path: "/etc/designs/toolkit/clientlibs/script.js"})
.addTestCase(new hobs.TestCase("TestCase #1")

You can add actions to test case, the navigateTo action will redirect to the next page, the click action fires on button and to fill input form we need to use fill input action

(function(window, hobs) {
'use strict';
new hobs.TestSuite("KeysandStrokesSuite", {path: "/etc/designs/toolkit/clientlibs/script.js"})
.addTestCase(new hobs.TestCase("TestCase #1")
.execSyncFct(function() { demoMode: DEBUG })
.navigateTo("http://localhost:4506/content/we-retail/us/en/products/women/shorts/candide-trail-short.html#wohisucat-XXS")
.click('button[class="btn btn-action btn-primary"]', {expectNav: false})
.click('a[class="btn btn-primary btn-action pull-right"]', {expectNav: false})
.click('a[class="btn btn-primary btn-action cq-dd-linkTo btn-checkout"]', {expectNav: false})
.fillInput('[name="shipping.firstname"]', "raj")
.fillInput('[name="shipping.lastname"]', "mandalapu")
.fillInput('[name="shipping.street1"]', "Address 1")
.fillInput('[name="shipping.street2"]', "Address 2")
.fillInput('[name="shipping.city"]', "HYD")
.fillInput('[name="shipping.zip"]', "500072")
.fillInput('[name="shipping.country"]', "US")
.click('button[class="btn btn-action btn-primary"]', {expectNav: true})
.click('button[class="btn btn-action btn-primary"]', {expectNav: true})
)
}(window, hobs));

Now go to the Tools -> Operations and click on testing coral card then you should see something like below
aem-hobs-clientlibs-tools
Now click on Run tests on right side window you should see entire booking flow something like below

Download code

[sociallocker] download code [/sociallocker]

 

By coderss

6 thought on “AEM : UI testing using automated test scripts”
  1. Hi Raj, can you recommend any other UI testing frameworks that work well with AEM, besides Hobbes? Or is Hobbes really the only option?

  2. Hi Raj,
    The article is helpful, but can you point some syntax for finding dynamic element when authoring ?
    New to Hobbes and AEm, need more help before we start coding for auto test

  3. Anyone have any idea about how to perform the drag and drop operation(e.g. image component) using hobbes.js?

  4. Can some one can provide complete document of hobbes.js methods list and their usage with syntax?
    Also on which basis elements identification should specify in methods for eg:click,mouse over,fill input

  5. I did everything exactly as described but i don’t see my test in hobbes console. I have tried few times and i still don’t get to see my test in console. Can you help with this? Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *