We have decided to use Sencha ExtJS for the client side of our new products and we plan to do automated functional testing on the client side. We looked into several tools like Ranorex, Selenium, Telerik Test Studio etc and so far we like Test Studio more than the others. Anyway, the question I am asking is relevant no matter which of these tools one might use.
I am interested to find out what is the recommended way to get internal elements of extjs controls. In order to be clear enough I will give an example.
I have a numberfield control and I would like to test that if I clicked on the 'up' button the value in the field will increase by one unit. Note that I did set an unique ID to the number field (id="testDurationHourNumberField"). The number field has the following (simplified) DOM structure:
In order to do this I must access the input element (id="testDurationHourNumberField-inputEl") and the button (id="ext-gen1211"). How is the recommended way of accessing these 2 elements?
<div role="button" id="ext-gen1211"></div>
<div role="button" id="ext-gen1212"></div>
So far I have the following options:
Can you please let me know which is the recommended way to do this?
- Use ExtJS internal IDs - does NOT seem good because:
- These are internal IDs, they are out of my control and they may change if I will later add another control on the page
- It seems that for the same page I get different IDs in different browsers. For example in IE 10 I get different IDs for the buttons from the IDs I get in Google Chrome.
- Get controls by unique ID and get internal elements by knowing their internal DOM structure or attributes - does NOT seem good because:
- I would rather not use this way because I do not know that when upgrading to the next version of ExtJS the internal DOM structure won't change or some attribute names will change and I will have to update the tests that I created
- eg pseudocode: getById('testDurationHourNumberField').getElementByAttributeAndIndex('role=button', 0)