Testing Ext JS 5 apps with Siesta

Over the past few weeks we have received a number of questions from Siesta users wondering about Siesta supporting Ext JS 5. Since Siesta is a generic JS tool, it can of course test any JavaScript code. There is of naturally a slight risk that the Ext JS layer in Siesta may need to be updated if Ext JS itself changes. The user interface for Siesta will continue to use Ext JS 4.2.0, which doesn’t affect your tests at all since this is just for the visualization of the test results. I recently took some time to investigate if our Ext JS tests in Siesta worked with Ext JS 5, and after a few minor tweaks they now pass all our tests. For anyone interested in trying these tests out, you can download our latest Siesta v2.0.7 release from our customer zone or try it online here.

Testing an Ext JS 5 code base

There are no special requirements when testing an Ext JS 5 application, the test code you write will look just like any of your previous Ext JS tests. To demonstrate this, I thought I would take a look at the Ext JS 5 beta SDK, in which you can find a new Ticketing app sample which uses various components and shows charts, grids and team member lists. Click the image to try this sample out.

Screen Shot 2014-05-20 at 10.05.14

I decided to write a few smoke tests for this app and below you can see the Siesta code I came up with. The test is divided into different it sections to make it easier to read and maintain. First it logs into the app, then it exercises a few different sections of it.

The key to writing stable Siesta tests is to learn Ext.ComponentQuery. You can see above that I use it extensively to target various UI components in the application. Example:

>> textfield[inputType=password]

targets the password field and you can also pinpoint elements inside Ext components by using our Composite Query notation:

tab[text^=Search] => .x-tab-close-btn

This query targets the close icon in an individual tab which has a title beginning with “Search”. You can run this test yourself by clicking here and filter for “smoke”. If you have any questions relating to testing Ext JS 5 apps, our forums are always open.

Leave a Comment