AEM : UI testing using automated test scripts

 

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

aem-hobs-clientlibs-tools

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

Download code