Tuesday, June 9, 2009

Selenium IDE Issues with ExtJS

Selenium IDE issues with ExtJS application



ExtJS automatically creates id’s for components if not provided by the developer. This id changes every time the component is created, so will not be the same for every user visit to the same page. We should define id explicitly for every ExtJS components which need be tested using Selenium.


Explicitly mention id config for components with which user can interact. e.g. form components, hyperlinks, images, buttons etc.


Some of the issue which you may encounter while testing your application with Selenium are as follows:-



  1. Button component


Problem: Selenum IDE cannot record the exact button ID of the button component.



    1. Find the id of the button component manually (using firebug) and replace the default captured button id with it
    2. We can also use xpath expression as target for this as – “//table[@id='buttonID']//button”



For this to work explicit id config must be provided for each required button component.




  1. TabPanel component


Problem: Tab strip not detected properly in record mode.






Will select the second tab from the tab panel


Or if you are using tabpanel inside tabpane


//div[@id='outer_tabpanel_id']//div[@class='x-tab-strip-wrap'][1]/ul/li[2] will select the second tab for the outside tab panel.


  1. Combo Box component


Problem: Selenium can not detect dropdown icon and list items


Solution: Need to override initList method of combo to modify following line to include ids in the list:-


this.innerList = this.list.createChild({cls:cls+'-inner', id:this.id+'-list'});



Record the test case for combo box now. The list item can be identified as: -




      Hear div[2] indicates second item in the list.




  1. Grid Component - Row identification


Problem: Grid rows are not given unique identification by default. Thus Selenium cannot record the user inputs on grid row properly.


Solution: Use click command on following target elements


  1. //div[@id=’GRID_ID']//div[@class='x-grid3-body']/div[2]


This will locate second row of the grid



  1. //div[@id='GRID_ID']//div[@class='x-grid3-body']/div[2]//div[@class='x-grid3-row-expander']


This will locate the expander element for the second row of the grid



  1. Window component


Problem: Close button id is auto generated


Solution: We can use xpath expression as //div[@id='windowId']//div[@class='x-tool x-tool-close']



  1. Grid Component - Store loading


Problem: Determine when grid has finished loading its data.


Solution: Use command – waitForElementNotPresent

               and Target - //div[@id='gridId']//div[@class= 'ext-el-mask']

This works only when loadMask config of grid is set to true.





  1. Date Field Component


Problem: Selenium IDE doesn’t detect user inputs on date field component properly


Solution: Use click commands on following html elements to simulate user click on Date field.


  1. //input[@id='DATEFIELD_ID']/../img


  1. //div[@class='x-layer x-menu x-menu-plain x-date-menu'][@style='position: absolute; z-index: 15000; visibility: visible; left: 587px; top: 105px;']//em[span=16]



















  1. great overview! you helped me a lot...

  2. I faced with a problem testing combobox. I have to say I'm quite new to Selenium IDE.
    I was trying the following:

    click: css=#combo-id + img (shows dropdown list) It works.

    clickAt: //div[@id='combo-id-list']/div[2]
    When I click Find button in Selenium IDE it shows green rectangle surrounding combo list item. But when I execute this command the list disappears and Selenium log says:
    [error] Element //div[@id='comboId-list']/div[2] not found
    It stops my test.
    Have you any idea how to solve this? Or what is wrong?

  3. Hi,

    Have u any idea about how to detect auto generated buttons in selenium IDE, eg:- Alert box with Ok and Cancel button. Please give any solution.

  4. How can we capture comments entered in a html window? eg: comments box


Was the information useful?