A trick to test selenium with ExtJS is to use cssSelectors. As an element can have more than one css classes and you really dont need to define any style for that css class it can be a good locator for the element and faster than XPATH on IE.
You can define cssSelector as
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Send',
cls: 'x-btn-text',
overCls: 'x-btn-noicon',
ctCls: 't-btn-yellow x-btn-over',
iconCls: 't-send seleniumSendNote',
...........
...........
and you can then in your test call the button click as
driver.findElement(By.cssSelector("button.seleniumSendNote"))
.click();
You can define cssSelector as
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Send',
cls: 'x-btn-text',
overCls: 'x-btn-noicon',
ctCls: 't-btn-yellow x-btn-over',
iconCls: 't-send seleniumSendNote',
...........
...........
and you can then in your test call the button click as
driver.findElement(By.cssSelector("button.seleniumSendNote"))
.click();
Yep, that's a good trick - the same strategy works for other test automation tools too, like QTP. We went so far as to formalize it with the following Ext mod:
ReplyDeleteExt.Component.prototype.onRender = Ext.Component.prototype.onRender.createSequence(function(){
if (this.testId){
this.el.addClass("test-id-" + this.testId);
}
});
This allows us to put an attribute "testId" on any component; this is then rendered as a class with the prefix "test-id-". It makes it slightly more obvious that the purpose of the class is purely identification, not styling.
Could you please assist me with the exact code on using this in QTP
ReplyDelete