If you are testing web application having EXTJS framework for rendering ui you might have experience many challenges in terms of identifying and performing actions on those elements using selenium webdriver. I am listing few of the common issues below but there might be many more.


  • ExtJS generates ids like "ext-gen-1234" which is dynamic in nature means same may change on a subsequent visit to the same page.
  • Sometime normal action apis provided by selenium are not enough to perform any action. Same needs to be combined with java script.
  • Components like grid/tree/dropdowns needs complex css/xpath to locate
  • Inspecting elements is not simple if we are using tools like firebug

So is there any simple solution that makes life of automation engineers easy? Yes it is. EXTJS ComponentQuery not only helps in terms of identifying those dynamic ids, same provides many ways to handle and perform operations on complex components. We just need to find out the write query combines with java script and execute the same using selenium in our automation script. 

Let me explain the entire process step by step starting with inspect element in today's post.

1) Download and install firefox add-ons - firebug(https://addons.mozilla.org/en-US/firefox/addon/firebug/) and illuminations-for-developers (https://addons.mozilla.org/en-us/firefox/addon/illuminations-for-developers/). The second one will help to identify the ids and properties of extjs components.

2) Open any sample link to be testing on firefox - http://dev.sencha.com/ext/5.1.0/examples/grid/row-editing.html

3)


















Now inspect the element with firebug after enabling the illuminations add-on. You will be able to find all the properties of the selected element in browser console.

4) Lets take a simple example to start with. We need to test the title of the grid/table of this page. Expected title is "Employee Salaries". Now how to find this text, since itemid of the panel is "title-1021" and it may change at any point of time. But if you have noticed carefully the above picture along wit the item id there is a field call text which actually contains the text we are looking for.

5) Open firefox console and try running this simple query. 
id = Ext.ComponentQuery.query('title[text="Employee Salaries"]')[0].id

















So now we have the dynamic id of the element. Just create a java script using the above command and execute it using selenium execute script command. 
If you want only the title string change the query to Ext.ComponentQuery.query('title[text="Employee Salaries"]')[0].text

For more information on component query you can refer Sencha api documentation (http://docs.sencha.com/extjs/4.2.4/#!/api/Ext.ComponentQuery)

Hope I am able to explain the basic process to retrieve dynamic id of web element, feel free to leave your comments or questions in my blog. I will explain some other extjs components with examples in my next post. Till then have a good time and happy testing.