Tuesday, September 21, 2010

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". 

12 comments:

  1. I'm not having success using your suggestion. Can you please explain it in more detail. I'm having problems with Trees specifically and cannot get it to work. When I record any operation on a Tree it it fails during playback for the same reasons you've detailed for buttons. Any help would be GREATLY appreciated, thanks!

    ReplyDelete
  2. Well, after some stops and starts I did get it working using span as you instructed. Still having some issues with other elements (combo boxes, check boxes) but will keep fighting with it and hope for the best :-).

    ReplyDelete
  3. Sorry Dude I haven't looked at your comments for a long time.. All the Best :)

    ReplyDelete
  4. Works totally awesome!!!! Thanks a llot man! Can u provide some more tutorials like this on how to determine xpath for tabs, header bar, grid entries, etc. as I am aving difficulty with those!

    ReplyDelete
  5. For ExtJS testing tool that does not suffer due to dynamically generated ids you may want to have a look at RIATest: http://www.cogitek.com/riatest/features/technologies/extjs.html

    ExtJS UI widgets are first class citizen in RIATest. The tests in RIATest operate in terms of ExtJS UI widgets and RIATest knows that the dynamic ids must be ignored. Instead it uses widget type, its label, etc to identify it.

    So for example the 'Edit' button from your sample is identified simply as ExtButton("Edit").

    ReplyDelete
  6. Thanks for your informative post; selenium is portable automation testing tool to validate the performance and behavior of a software application or environment. Best Selenium training institute in Chennai

    ReplyDelete