View Full Version : Inserting automation Ids to the extjs application

16 Jul 2012, 3:20 AM

Our development team is going to use Ext JS as the infrastructure for our new product's version.
As an automation developer I'm trying to find ways to ease the process of developing automation tests to this new version.
I've read that the developer shouldn't set the components ids by himself because this is the role of the extjs component manager, and the component manager generates auto-ids that the automation can't rely on for mapping the GUI.
Can the develpoer insert other kind of automation ids that the automation framework can hookup to for controling the components?
For example if the developer could have inserted an attribute called "automationId" to the combobox component of the employees and call it "cmbEmployees" that would make my life much easier. :)


16 Jul 2012, 5:16 AM
ComponentQuery was designed for lookups without using the id. Your app has a structure based meaning containers have child items and all components have xtypes. ComponentQuery can go up and down this hierarchy to match components and return them based on a selector.

16 Jul 2012, 5:40 AM
You might also have a look at the Siesta (http://www.bryntum.com/products/siesta/latest/examples/browse-all-desktop.html)unit testing library. It's made for unit testing, but that's pretty much the same thing as automation just with a different goal. The source of the ExtJS unit tests show a good way to structure your automation functions.

16 Jul 2012, 7:20 AM
Thanks guys for the quick responses.
We're currently using the WatiN framework for testing our product and that's why I'm looking for some kind of automation id that the developer will add to the Ext JS application.
I'm standing here in a situation that the developers are willing to write the application so it will be automatable.
Can you give me suggestions about how to create the new product as automatable as it can be?
If I'll use the ComponentQuery and for instance I'll have two comboboxes, there might be a chance that they'll the same selectors, but not the same id, so how can I hook to the right one? By its index? (I'll rather not) By its label? (not good for localiztion)...
Thank you,

16 Jul 2012, 7:41 AM
Check out the component query docs, it's very similar to xpath and allows you to use the id or itemId of any ExtJS component (javascript id property, not html id) by putting a # in front of it. Also, you can use the > as a direct descendant selector or leave it off to select at any level. Using an itemId instead of a regular id (you can have more than one itemId rendered at a time) allows you to more or less namespace things inside of containers. Finally, you can call the query method on any component so you don't have to let it search the entire page each time, and this will greatly cut down on errors.

All that is to say you can do something like:

var content = Ext.ComponentQuery.query('#contentPanelId')[0];
var form = content.query('#formId')[0];
var newBtn = content.query('toolbar > #new')[0];
var saveBtn = content.query('toolbar > #save')[0];

newBtn.fireEvent('click', newBtn);

var fields = form.query('field');
for (var i = 0, l = fields.length; i < l; i++) {

saveBtn.fireEvent('click', saveBtn);

16 Jul 2012, 8:14 AM
So if I understand you correctly, I can ask the developers to add itemIds to the components that I want to control.
Then these itemIds won't appear in the DOM but I'll be able to use the Ext ComponentQuery/query to get these components.

16 Jul 2012, 1:29 PM
Sorry for the slow reply, but you are right, the itemId property doesn't come through as the html id attribute like the id field does since it isn't necessarily unique. Good luck luck with your project.

19 Jul 2012, 5:00 AM
Thank you very much!

25 Oct 2012, 2:53 PM
Hello Mikieh,
Our team is also in process of deciding for automation tool for our EXT JS application . Could you give some inputs here as to what tool you found as best for ext based application and also if defining 'itemId' was enough for developing the tests and what are other important things to look for .


28 Nov 2012, 7:48 AM
Hi shailykamboj,
We are still in the beginning of the process but it looks like the itemId is a good hook
that the automation can use for testing the application.
We've chosen to go with Ranorex as the framwork for our testing because it supports multiple types of browsers.
We didn't find a tool that has a good support for functional testing of extjs application and we'll have
to create a layer on top of the framework for identification of the controls by their item ids and then managing them.
We are going to use the ExecuteScript that the framework gives us a lot to access the object in the javascript layer.