Test Automation for ExtJS User Interface using Selenium

Test Automation of an application that has an ExtJS user interface can be tricky, because of randomly-generated default element IDs. The firm I am working for has ExtJS User Interface and Automation of UI Testing was about to drop because of randomly-generated element IDs. Unfortunately almost all the elements have the default random generated IDs and very few elements are overridden to get Custom set IDs. I managed to solve this issue.

Why is it difficult to Automate? 

To interact with DOM elements, Selenium Commands should specify the target elements using their xpaths.

click //input[@value='Google Search' and @type='button']

To determine the xpath we can use tools like xpath add-on for Firefox or record and get the xpath from Selenium IDE. But the biggest challenge here with ExtJS is this xpath changes every time page reloads as element IDs are randomly generated by default.

So the xpath generated using above mentioned ways will give some thing like

//div[@id='ext-gen77']/div[12]/table/tbody/tr/td[4]/div

This xpath will get changed every time you reload the page. So if you try to run the test it gives

[error] Element //div[@id='ext-gen77']/div[12]/table/tbody/tr/td[4]/div not found

How did I solve this?

To solve this Problem we need Firefox Browser with Firebug, Selenium IDE Add-On installed.

Record the Test Case using Selenium IDE

Open your Application UI which is developed in ExtJS. Right click on some element like Edit Button and say "Inspect Element"

Replace xpath which got recorded with xpath=//button[text()='edit'] because every time the screen gets reloaded, this xpath changes as Element ID is getting generated randomly. This xpath is determined by Tag name which is "button" and value of tag is "edit". 

Few times you may need to use class like xpath=//span[@class='x-menu-item']. This xpath is determined by Tag name which is "span" and value of class is "x-menu-itmt".