Testing Extjs 2.2 "TabPanel element" with Selenium

[Riri]

Hello,

I'm testing Extjs applicaiton using Selenium RC.

Since I upgrade to Extjs 2.2, I am not able at all to navigate throught Extjs TabPanel element.

Using previous Extjs release, I was using "selenium.click(locator)" and it worked fine.
And now nothing works ... :((

For your info, I'm testing using " *iehta " as selenium browser.

I tested using "selenium.mouseDown(locator)" and it works using " *chrome " (so FireFox engine) but not using " *iehta " (IE7 engine) ?

Did someone also experienced this pbl now with this Extjs 2.2 release ? :s

[alphanerd]

Yes me too, a real show-stopper.

Works OK for me in Firefox under Linux and XP, but not under IE.

I'm considering loading a javascript hook into the document to select the tab, as a selenium extension, driven by my java test classes. Pretty desperate eh?

If you figure this out for IE, please let me know!

[FredrikWendt]

If you figure this out for IE, please let me know!

I also tried
* click
* clickAt
* mouseDown
* mouseDownAt
on
* The span element
* The li element

One of the combinations works. Guess :)

Answer:
mouseDownAt on the span element. In the example below, you need to use tabs__theTabTab (span) and not tabs__theTab (li) element:

<ul id="ext-gen65" class="x-tab-strip x-tab-strip-top">
<li id="tabs__theTab" class="x-tab-strip-active">
<a onclick="return false;" class="x-tab-strip-close"/>
<a onclick="return false;" href="#" class="x-tab-right">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text" id="tabs__theTabTab">Click on me automatically</span>
</span>
</em>
</a>
</li>
...
</ul>

For this to work, you will need to change the template which currently is set in the onRender method of TabPanel. In the example above it would look like:

onRender : function(ct, position) {
// set the template used to render child items (the actual clickable tabs)
// this template uses "{id}Tab"
if (!this.itemTpl) {
var ourTemplate = new Ext.Template(
'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
'<span class="x-tab-strip-inner">',
// THE NEXT LINE IS THE SOLE REASON TO WHY THIS CLASS WAS CREATED
'<span id="{id}Tab" class="x-tab-strip-text {iconCls}">{text}</span>',
'</span>',
'</em></a></li>'
);
ourTemplate.disableFormats = true;
ourTemplate.compile();
Ext.TabPanel.prototype.itemTpl = ourTemplate;
}

// continue original render method
/* cut out */
}

[FredrikWendt]

This is verified in FF2, IE6, IE7 on Windows XP and Safari on Mac.

[alphanerd]

Awesome, that works, thank you from everybody here in our team.

[Condor]

Alternatively you could use the following selector in Selenium:


css:#<tabpanel-id>__<tabitem-id> .x-tab-strip-text

[raotnv]

I also tried
* click
* clickAt
* mouseDown
* mouseDownAt
on
* The span element
* The li element

One of the combinations works. Guess :)

Answer:
mouseDownAt on the span element. In the example below, you need to use tabs__theTabTab (span) and not tabs__theTab (li) element:

<ul id="ext-gen65" class="x-tab-strip x-tab-strip-top">
<li id="tabs__theTab" class="x-tab-strip-active">
<a onclick="return false;" class="x-tab-strip-close"/>
<a onclick="return false;" href="#" class="x-tab-right">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text" id="tabs__theTabTab">Click on me automatically</span>
</span>
</em>
</a>
</li>
...
</ul>For this to work, you will need to change the template which currently is set in the onRender method of TabPanel. In the example above it would look like:

onRender : function(ct, position) {
// set the template used to render child items (the actual clickable tabs)
// this template uses "{id}Tab"
if (!this.itemTpl) {
var ourTemplate = new Ext.Template(
'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
'<span class="x-tab-strip-inner">',
// THE NEXT LINE IS THE SOLE REASON TO WHY THIS CLASS WAS CREATED
'<span id="{id}Tab" class="x-tab-strip-text {iconCls}">{text}</span>',
'</span>',
'</em></a></li>'
);
ourTemplate.disableFormats = true;
ourTemplate.compile();
Ext.TabPanel.prototype.itemTpl = ourTemplate;
}

// continue original render method
/* cut out */
}

Is there any way I can use locator span element text as 'Click on me automatically'. If it could you guys post the exact syntax.

[FredrikWendt]

Is there any way I can use locator span element text as 'Click on me automatically'. If it could you guys post the exact syntax.

Sorry, I don't understand what you're saying.