AEM : UI testing using automated test scripts

Posted in AEM Tutorials By Raj On September 8, 2017


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

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

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

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

Now go to the Tools -> Operations and click on testing coral card then you should see something like below


Now click on Run tests on right side window you should see entire booking flow something like below

Download code


  • Andrea Coaker

    Hi Raj, can you recommend any other UI testing frameworks that work well with AEM, besides Hobbes? Or is Hobbes really the only option?

  • Kanchan K

    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

  • krishna

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

  • krishna

    Anyone have any idea about how to enter text in text component using hobbes.js?

  • krishna

    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

  • Dritan Cloud

    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!