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.

 

Solution:

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.

 

 

 

2. TabPanel component

 

Problem: Tab strip not detected properly in record mode.

 

 

Solution:

 

//div[@id='tabpanel_id']//ul/li[2]

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.

 

3. 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: -

 

//div[@id='comboId-list']/div[2]

 

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

 

 

 

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

 

 

2. //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

 

 

5. 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']

 

 

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

 

 

 

 

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

 

2. //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]

 

 

 

 

 

 

 

Reference:-

 

http://seleniumhq.org/projects/core/reference.html

http://www.w3schools.com/XPath/xpath_syntax.asp